# Windows11のReact環境づくり ## 1. WSL2のインストール ※WSLとは Windows上でLinuxを動かすためのシステムです。ほぼすべてのLinuxコマンドが使用できます。 まず。Ubuntuの環境をWindowsに用意します。 ※Ubuntuとは Linux系のOS。「誰でも扱いやすいOS」をコンセプトに開発され、日本語対応済み、無償で使用できる。数あるLinuxディストリビューションの中でも特に人気。 wslコマンドをインストールすると、規定でそのままUbuntuがインストールされます。 ```jsx $ wsl --install ``` ※Ubunts以外のディストリビューションをインストールする場合は下記を参照 https://learn.microsoft.com/ja-jp/windows/wsl/install#set-up-your-linux-user-info Linuxのユーザー名とパスワード設定を求められるので、画面の指示に従って設定します。 Ubuntuのバージョンを確認してみましょう。 ```jsx $ cat /etc/os-release ``` ※なおUbunts含むパッケージは最新版を使用する場合、定期的に手動で更新する必要があります。 ```jsx $ sudo apt update && sudo apt upgrade ``` Ubuntuが入ったら作業用ディレクトリを作成します。（名前は任意） ```jsx $ mkdir workspace $ cd workspace ``` これからはこのディレクトリで作業をします。 ## 2. asdfのインストール ※asdfとは 様々な言語やツールのバージョンを管理してくれるライブラリです。 ディレクトリごとに言語のバージョンを切り替えることもできます。（しかも簡単） 今回はnode.jsのバージョン管理に使っていきます。 以下のドキュメントを参考にインストールします (VSCodeが入っていない場合はこのタイミングでインストールしといてください) https://asdf-vm.com/guide/getting-started.html ```jsx $ 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 ``` .bashrcにの末尾に以下を書きます。 ```jsx . "$HOME/.asdf/asdf.sh" . "$HOME/.asdf/completions/asdf.bash" ``` .bashrcを再読込してください。 ```jsx ファイル再読み込み $ source ~/.bashrc $ asdf #なにか出ればOK ``` ## 3. Node.jsのインストール asdfを使ってnodejsをインストールします。 立ち上げる環境によってNodejsのバージョンが変わるので、簡単に切り替えられるようにします。(バージョン管理を使わない場合、アンインストール→再インストールの手間が発生します。) ※nodejsとは JavaScriptを、サーバー側で動作させるプラットフォーム。 前提として、JavaScriptはブラウザ上でのみ動く言語であるため、サーバー上では動きません。 Web開発をする際は、OS機能（ファイルの読み書き、ネットワーク通信等）にアクセスする必要があるため、OSにアクセスできるサーバサイド言語も必要になります。従って、今回はnodejsを使用します。 また、nodejsは大量なアクセスに強く、求められる処理をリアルタイムで実行できるメリットもあります。 以下のドキュメントをみながら作業します https://github.com/asdf-vm/asdf-nodejs nodejsをインストールできるようにプラグインを追加します。 ```jsx $ asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git ``` asdfでインストールする方法は以下を参考にしてください。 (今回はNode.js 18.16.0をいれます。) https://codenote.net/tool/5848.html ```jsx $ 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使用時の設定がほぼ不要 https://ja.vitejs.dev/ ```jsx $ npm create vite@latest // 今回はproject名をsample-viteにしてみる // React + JavaScriptを作れればOK $ ls // sample-viteというディレクトリができているかを確認 $ cd sample-vite $ npm i // package.jsonの内容をインストール // node_modulesというディレクトリができている $ code . //今いる場所をVSCodeでひらく // ターミナルをひらく(デフォルトはPowerShellなのでWSLのターミナルをひらく) $ npm run dev ``` https://localhost:5173を開ければ成功です！お疲れさまでした。 ## 参考 https://qiita.com/Sicut_study/items/cb198375011581f3ef2c https://zenn.dev/asopitech/articles/20230201-225956_1