最近のウェブ開発では、React.jsが非常に人気のあるフレームワークとなっています。その柔軟性と効率性から、多くの開発者がReact.jsを選択しています。この記事では、Windows WSL を使用して、Ubuntu上にReact.jsの開発環境を構築する方法を解説します。
目次
パッケージリストの更新とアップグレード
$ sudo -i
# apt update && apt upgradeNode.jsのインストール
Node.jsのリポジトリ鍵の追加
Node.jsのリポジトリ鍵をダウンロードして、システムの信頼できる鍵リストに追加します。これにより、Node.jsのリポジトリから安全にパッケージをインストールできるようになります。
# curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpgNode.jsのリポジトリの追加
このコマンドは、特定のバージョン（ここでは20）のNode.jsをインストールするためのリポジトリをシステムに追加します。これにより、指定されたバージョンのNode.jsをインストールできるようになります。
# NODE_MAJOR=20
# echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro mainNode.jsのインストール
Node.jsは、JavaScriptをブラウザの外で実行することを可能にするランタイム環境。
Reactの開発プロセスやビルドプロセスにおいて中心的な役割を果たすもの。コードを実行するためには使用されないが、Reactプロジェクトのひな形作成やビルドの際に使用する。
※npm（Node.jsのパッケージマネージャ）も同時にインストールされる
# sudo apt-get update && sudo apt-get install nodejs -y
# node -v
v20.9.0
# npm -v
10.1.0yarn をインストール ※必須ではない
JavaScriptの依存関係を管理するためのパッケージマネージャー「yarn」をグローバルにインストール
# npm install -g yarn
# yarn -v
1.22.19「n」をインストール ※必須ではない
Node.jsのバージョン管理ツールである「n」をグローバルにインストール
# npm install -g n
# n --version
v9.2.0最新の安定版Node.jsのバージョン確認
# n --stable
20.9.0最新の安定版Node.jsのインストール
※既に同じバージョンなので何もかわらないはず⇒nodeのパスが変わった。既に最新ならこの手順不要。
# n stable
installing : node-v20.9.0
mkdir : /usr/local/n/versions/node/20.9.0
fetch : https://nodejs.org/dist/v20.9.0/node-v20.9.0-linux-x64.tar.xz
copying : node/20.9.0
installed : v20.9.0 (with npm 10.1.0)
Note: the node command changed location and the old location may be remembered in your current shell.
old : /usr/bin/node
new : /usr/local/bin/node
If "node --version" shows the old version then start a new shell, or reset the location hash with:
hash -r (for bash, zsh, ash, dash, and ksh)
rehash (for csh and tcsh)Reactアプリケーションの作成
$ npx create-react-app react-basic
$ cd react-basic/
$ ls
README.md build node_modules package-lock.json package.json public srcその他
日本語言語パックのインストール
# apt install -y language-pack-jaシステムのロケールを日本語（ja_JP.utf8）に設定
# update-locale LANG=ja_JP.utf8systemdを有効にする
# vi /etc/wsl.conf
[boot]
systemd=trueこの記事では、WindowsのWSLを使用してUbuntu上でReact.jsの開発環境を構築する方法を解説しました。
コメント