Windows11のReact環境づくり

はじめに

Reactを使ったWeb開発デビューにあたり、環境構築を行いました。
なお、今回はWindows11が対象になります。

1. WSL2のインストール

まず、WSL2のインストールを行ってUbuntuの環境をWindowsに用意します。

※WSLとは
Windows上でLinuxを動かすためのシステム。ほぼすべてのLinuxコマンドが使用できる。

※Ubuntuとは
Linux系のOS。「誰でも扱いやすいOS」をコンセプトに開発され、日本語対応済み、無償で使用できる。数あるLinuxディストリビューションの中でも特に人気。

wslコマンドをインストールすると、規定でそのままUbuntuがインストールされます。

$ wsl --install

※Ubunts以外のディストリビューションをインストールする場合は下記を参照

Linuxのユーザー名とパスワード設定を求められるので、画面の指示に従って設定します。

次に、Ubuntuのバージョンを確認してみましょう。

$ cat /etc/os-release

※なおUbunts含むパッケージは最新版を使用する場合、定期的に手動で更新する必要があります。

$ sudo apt update && sudo apt upgrade

Ubuntuが入ったら作業用ディレクトリを作成します。（名前は任意）

$ mkdir workspace
$ cd workspace

これからはこのディレクトリで作業をします。

2. asdfのインストール

※asdfとは

様々な言語やツールのバージョンを管理してくれるライブラリです。

ディレクトリごとに言語のバージョンを切り替えることもできます。（しかも簡単）

今回はnode.jsのバージョン管理に使っていきます。

以下のドキュメントを参考にインストールします。

(VSCodeが入っていない場合はこのタイミングでインストールしといてください)

今回は上記のドキュメントを参照して、この手順でインストールを行いました。

$ sudo apt-get update
$ sudo apt-get upgrade

# curlとgitをインストール
$ apt install curl git

# asdfのインストール
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.0 //ドキュメントから最新版を入れる

# VSCodeが入っている前提で以下を実行
$ code ~/.bashrc

VSCodeが起動されたら、.bashrcの末尾に以下を追記します。

. "$HOME/.asdf/asdf.sh"
. "$HOME/.asdf/completions/asdf.bash"

VSCodeのターミナル上（powershellではなくubuntsuを選択）で.bashrcを再読込してください。

ファイル再読み込み
$ source ~/.bashrc
$ asdf #なにか出ればOK

3. Node.jsのインストール

asdfを使ってnodejsをインストールします。

立ち上げる環境によってNodejsのバージョンが変わるので、簡単に切り替えられるようにします。(バージョン管理を使わない場合、アンインストール→再インストールの手間が発生します。)

※nodejsとは

JavaScriptを、サーバー側で動作させるプラットフォーム。

前提として、JavaScriptはブラウザ上でのみ動く言語であるため、サーバー上では動きません。

Web開発をする際は、OS機能（ファイルの読み書き、ネットワーク通信等）にアクセスする必要があるため、OSにアクセスできるサーバサイド言語も必要になります。従って、今回はnodejsを使用します。

また、nodejsは大量なアクセスに強く、求められる処理をリアルタイムで実行できるメリットもあります。

以下のドキュメントを見ながら作業します。

nodejsをインストールできるようにプラグインを追加します。

$ asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git

次に、asdfでnodejsのバージョンを指定します。下記を参照します。
(今回はNode.js 18.16.0をいれます。)

今回は下記の手順で行いました。

$ asdf list-all nodejs
$ asdf install nodejs v18.16.0
$ asdf global nodejs v18.16.0
# バージョンチェック
$ node -v

4. ViteでReact環境を作る

今後ReactやTypeScriptの環境を作るときはViteを使います。

※Viteとは

モダンな開発環境に対応したビルドツール。

従来のツールに比べ以下のメリットがあります。

• 開発サーバの起動・更新がとにかく早い
• TypeScriptやSass使用時の設定がほぼ不要

下記サイトの「最初の Vite プロジェクトを生成する」を参照します。

今回は下記の手順で行いました。

$ npm create vite@latest
// 今回はproject名をsample-viteにしてみる
// React + JavaScriptに設定
$ ls // sample-viteというディレクトリができているかを確認
$ cd sample-vite
$ npm i // package.jsonの内容をインストール
// node_modulesというディレクトリができている
$ code . //今いる場所をVSCodeでひらく

// ターミナルをひらく(デフォルトはPowerShellなのでWSLのターミナルをひらく)
$ npm run dev

https://localhost:5173　
こちらが表示できれば成功です！お疲れさまでした。

参考