Reactの開発環境を整備する

開発環境
Node.jsとnpmのインストール
確認する
（参考）Macの場合

開発環境

　今回は、Ubuntuの24.04.2 LTSのコマンドラインでの操作で開発環境を作っていきます。

　WindowsのWSLでUbuntuを入れればほぼ同じはずです。

　Macについては、別項目で記載します。

Node.jsとnpmのインストール

まず、最新版を使いたい場合は NodeSource 経由で入れるのがベストです。

まずは、すでに入っているパッケージを最新版にしておきます。

sudo apt update

sudo apt upgrade

次に、curlをインストールします。（すでに入っていれば、入ってるよ～♪と教えてくれます。英語で。）

sudo apt install -y curl

やってみました

やってみるとこんな感じ。

*xxxxxx@yyyyyyyyyy**:**/var/www/html**$ sudo apt install -y curl

Reading package lists... Done

Building dependency tree... Done

Reading state information... Done

curl is already the newest version (8.5.0-2ubuntu10.6).

curl set to manually installed.

The following packages were automatically installed and are no longer required:

  linux-headers-6.8.0-31 linux-headers-6.8.0-31-generic linux-image-6.8.0-31-generic

  linux-modules-6.8.0-31-generic linux-modules-extra-6.8.0-31-generic linux-tools-6.8.0-31

  linux-tools-6.8.0-31-generic

Use 'sudo apt autoremove' to remove them.

0 upgraded, 0 newly installed, 0 to remove and 1 not upgraded.

ここまでで準備が整いましたので、Node.js LTS(長期サポート版）を入れます。

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

やってみました

**xxxxxx@yyyyyyyyyy**:**/var/www/html**$ curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

2025-04-08 13:55:30 - Installing pre-requisites

Hit:1 http://archive.ubuntu.com/ubuntu noble InRelease

Hit:2 http://archive.ubuntu.com/ubuntu noble-updates InRelease               

Hit:3 http://security.ubuntu.com/ubuntu noble-security InRelease             

Hit:4 http://archive.ubuntu.com/ubuntu noble-backports InRelease

Reading package lists... Done

Reading package lists... Done

Building dependency tree... Done

Reading state information... Done

ca-certificates is already the newest version (20240203).

ca-certificates set to manually installed.

curl is already the newest version (8.5.0-2ubuntu10.6).

gnupg is already the newest version (2.4.4-2ubuntu17.2).

gnupg set to manually installed.

The following packages were automatically installed and are no longer required:

  linux-headers-6.8.0-31 linux-headers-6.8.0-31-generic linux-image-6.8.0-31-generic

  linux-modules-6.8.0-31-generic linux-modules-extra-6.8.0-31-generic linux-tools-6.8.0-31

  linux-tools-6.8.0-31-generic

Use 'sudo apt autoremove' to remove them.

The following NEW packages will be installed:

  apt-transport-https

0 upgraded, 1 newly installed, 0 to remove and 1 not upgraded.

Need to get 3974 B of archives.

After this operation, 35.8 kB of additional disk space will be used.

Get:1 http://archive.ubuntu.com/ubuntu noble/universe amd64 apt-transport-https all 2.7.14build2 [3974 B]

Fetched 3974 B in 0s (11.2 kB/s)              

Selecting previously unselected package apt-transport-https.

(Reading database ... 162756 files and directories currently installed.)

Preparing to unpack .../apt-transport-https_2.7.14build2_all.deb ...

Unpacking apt-transport-https (2.7.14build2) ...

Setting up apt-transport-https (2.7.14build2) ...

Scanning processes...                                                                        

Scanning linux images...                                                                     

  

Running kernel seems to be up-to-date.

  

No services need to be restarted.

  

No containers need to be restarted.

  

No user sessions are running outdated binaries.

  

No VM guests are running outdated hypervisor (qemu) binaries on this host.

Get:1 https://deb.nodesource.com/node_20.x nodistro InRelease [12.1 kB]

Get:2 https://deb.nodesource.com/node_20.x nodistro/main amd64 Packages [10.9 kB]           

Hit:3 http://archive.ubuntu.com/ubuntu noble InRelease                        

Hit:4 http://security.ubuntu.com/ubuntu noble-security InRelease

Hit:5 http://archive.ubuntu.com/ubuntu noble-updates InRelease

Hit:6 http://archive.ubuntu.com/ubuntu noble-backports InRelease

Fetched 23.0 kB in 1s (28.8 kB/s)

Reading package lists... Done

**2025-04-08 13:55:37 - Repository configured successfully.**

2025-04-08 13:55:37 - To install Node.js, run: apt-get install nodejs -y

2025-04-08 13:55:37 - You can use N|solid Runtime as a node.js alternative

**2025-04-08 13:55:37 - To install N|solid Runtime, run: apt-get install nsolid -y**

次でインストールです。

sudo apt install -y nodejs

やってみます。

やってみました

**xxxxxx@yyyyyyyyyy**:**/var/www/html**$ sudo apt install -y nodejs

Reading package lists... Done

Building dependency tree... Done

Reading state information... Done

The following packages were automatically installed and are no longer required:

  linux-headers-6.8.0-31 linux-headers-6.8.0-31-generic linux-image-6.8.0-31-generic

  linux-modules-6.8.0-31-generic linux-modules-extra-6.8.0-31-generic linux-tools-6.8.0-31

  linux-tools-6.8.0-31-generic

Use 'sudo apt autoremove' to remove them.

The following NEW packages will be installed:

  nodejs

0 upgraded, 1 newly installed, 0 to remove and 1 not upgraded.

Need to get 32.0 MB of archives.

After this operation, 199 MB of additional disk space will be used.

Get:1 https://deb.nodesource.com/node_20.x nodistro/main amd64 nodejs amd64 20.19.0-1nodesource1 [32.0 MB]

Fetched 32.0 MB in 3s (9496 kB/s) 

Selecting previously unselected package nodejs.

(Reading database ... 162760 files and directories currently installed.)

Preparing to unpack .../nodejs_20.19.0-1nodesource1_amd64.deb ...

Unpacking nodejs (20.19.0-1nodesource1) ...

Setting up nodejs (20.19.0-1nodesource1) ...

Processing triggers for man-db (2.12.0-4build2) ...

Scanning processes...                                                                        

Scanning linux images...                                                                     

  

Running kernel seems to be up-to-date.

  

No services need to be restarted.

  

No containers need to be restarted.

  

No user sessions are running outdated binaries.

  

No VM guests are running outdated hypervisor (qemu) binaries on this host.

インストール後の確認です。

node -v

やってみました

**xxxxxx@yyyyyyyyyy**:**/var/www/html**$ node -v

v20.19.0

npm -v

やってみました

**xxxxxx@yyyyyyyyyy**:**/var/www/html**$ npm -v

10.8.2

確認する

今いるディレクトリ配下にmy-appというディレクトリを作成してmy-appというアプリを作成します。

npx create-react-app my-app

作成できたら、my-appというディレクトリに入ります。

cd my-app

このmy-appディレクトリで以下を実行します。これによってmy-appというアプリが作成されます。

npm run build

このコマンドは、今後、何度も使うことになります。

ちゃんとできたか確認します。

npm start

Webブラウザが立ち上がってきて、Reactのサンプルアプリが表示されます。これでOKです。

（参考）Macの場合

方法1: 公式インストーラーを使用する

Node.jsの公式サイトにアクセス: Node.js公式サイトにアクセスし、最新のLTSバージョンをダウンロードします。
インストーラーを実行: ダウンロードしたインストーラーを実行し、指示に従ってインストールします。
インストールの確認: ターミナルで以下のコマンドを実行して、Node.jsとnpmのバージョンを確認します。
node -v
npm -v

方法2: Homebrewを使用する

Homebrewのインストール: Homebrewがインストールされていない場合は、以下のコマンドでインストールします。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Node.jsのインストール: Homebrewがインストールされたら、以下のコマンドでNode.jsをインストールします。
brew install node

インストールの確認: ターミナルで以下のコマンドを実行して、Node.jsとnpmのバージョンを確認します。
node -v
npm -v

方法3: Node Version Manager (nvm)を使用する

nvmのインストール: nvmをインストールするには、以下のコマンドを実行します。
touch ~/.bashrc curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
Node.jsのインストール: nvmを使用してNode.jsをインストールします。
nvm install node
インストールの確認: ターミナルで以下のコマンドを実行して、Node.jsとnpmのバージョンを確認します。
node -v
npm -v