---
# System prepended metadata

title: Windows11のReact環境づくり

---

# 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