Reactコース

【実践】アプリ開発に挑戦しよう💻

React+Vite ローカル環境構築

## はじめに
このチュートリアルでは、モダンなReactアプリケーション開発環境であるReact + Viteの環境構築手順を解説します。

## Reactとは
**React**（リアクト）とは、Facebook（現Meta）が開発したユーザーインターフェース構築のためのJavaScriptライブラリです。

「ユーザーインターフェース」とは「UI」と略されることもある、ウェブサイトやウェブアプリケーションの見た目を指す用語です。例えば、ウェブサイトにはボタンやメニュー、画像などが表示されていますよね。Reactを使うと、これらの部品を簡単に作ったり、整理したり、動かしたりすることができます。

### Reactの特徴

*   **コンポーネントベース**: ウェブサイトの部品（ボタン、メニューなど）を「コンポーネント」という独立した構成要素として扱います。これにより、部品の再利用が簡単になり、開発効率が向上します。ウェブサイトの画面を作るときには、これらのコンポーネントをまるでおもちゃのブロックのように組み合わせて作っていくイメージです。
*   **仮想DOM**: ウェブサイトの内容を更新する際に、実際には「仮想DOM」というメモリ上にあるコピーを更新します。その後、変更があった部分だけを実際のウェブページに反映させるため、効率的に表示を更新できます。これにより、動作が速く、スムーズなユーザー体験を提供できます。
*   **宣言的な記述**: どういう見た目にしたいかを記述するだけで、Reactが自動的に必要な処理を行ってくれます。「〜してください」と命令するのではなく、「〜という状態にしたい」と宣言するような書き方をするため、コードが分かりやすくなります。

### Reactが選ばれる理由
*   **大規模なアプリケーション開発に向いている**: コンポーネントの再利用や効率的な更新により、複雑なウェブアプリケーションもスムーズに開発できます。
*   **FacebookやInstagramなどの有名なサービスでも使われている**: 実績があり、信頼性の高い技術です。
*   **活発なコミュニティ**: 多くの開発者が利用しており、情報やサポートが豊富です。

Reactを学ぶためには、JavaScriptの基礎知識があるとより理解しやすいです。JavaScriptが分からない場合は、まずJavaScriptの基礎を学ぶことをお勧めします。

まとめると、ReactはウェブサイトのUIを効率的に開発するための強力な道具であり、現代のウェブ開発において非常に重要な技術の一つと言えます。


## Viteとは
Vite（ヴィート）とは、モダンなフロントエンド開発ツールで、以下の特徴があります：
- 高速な開発サーバー起動
- 効率的なHMR（Hot Module Replacement）
- 最適化された本番ビルド
- 豊富なプラグインエコシステム

### なぜViteを使うか？
Reactで作られたプログラムは、ビルドという工程を経てウェブサイトやウェブアプリケーションになります。
Viteはそのビルドが高速であるという特徴があり、Reactと組み合わせた開発方式が近年人気を集めています。

## このチュートリアルの目的
このチュートリアルでは、React + Viteを使って簡単なウェブアプリを作る環境を整える方法を説明します。主には、以下のことを学びます。

* 必要なソフトウェアのインストール（開発の準備）
* 簡単なReactプログラムの作成
* 作成したReactプログラムの実行

チュートリアルをスムースに進めるためには、以下の点に注意しましょう。

* 間違いなく指示されている手順通りかどうか、手順を飛ばしていないか確認
* 画面のスクリーンショットがある場合、設定内容などをよく確認して説明通りの設定になっているか確認
* ソースコードがある場合、記述内容を確認(特に大文字／小文字、ピリオド／カンマ、カッコの対応など)

このチュートリアルを終えると、あなたは自分でReact + Viteでウェブアプリを作る準備が整います。初心者の方でも安心して進められるように、わかりやすく説明していきますので、一緒に頑張りましょう！

はじめに

このセクションではReact + Vite開発のために必要なソフトウェアをインストールする手順を紹介します。

# Node.js
React + Viteの開発にはバージョン18以上のNode.jsが必要です。
Node.jsのバージョンの確認、およびインストール手順については[こちらのチュートリアル](https://code-lesson.com/cms/tutorials?tutorial=6a25f504-5a50-4594-8abf-745b728f51c6)を参考にしてください。

## Node.jsのバージョンが低いとき
Node.jsのバージョンが18よりも低いときにはNode.jsのアップデートが必要になります。

Node.jsのインストールチュートリアルに従って最新版のNode.jsをインストールしてください。
旧バージョンを自動でアップデートしてくれます。

# VSCode
React + Viteの開発では、エディタとしてVSCodeを用いることが多いです。
[こちらのチュートリアル]()を参考にVSCodeをインストールしてください。

必要なソフトウェアのインストール

このセクションではReactプロジェクトを生成する手順を説明します。
各操作はターミナルに入力して実行してください。

## React + Vite でプロジェクトを生成する
以下のコマンドを入力してEnterキーを押してください。
以降は画面に表示される指示に従ってプロジェクトの設定を行っていきます。
```bash
npm create vite@latest
```

create-viteパッケージをローカル環境にインストールすることを求められるメッセージが表示されます。
`create-vite@`の後ろの数字はコード例と異なるかもしれませんが、今は気にしないで大丈夫です。
`y`を入力し、Enterキーで次へ進んでください。
```bash
Need to install the following packages:
create-vite@5.5.5
Ok to proceed? (y)
```

プロジェクト名の入力を促されます。
ここで決めた名前が今後プロジェクトのルートフォルダ名になります。
ここではデフォルトの`vite-project`で行くので、そのままEnterキーを押してください。

```bash
? Project name: › vite-project
```

フレームワークの選択を行います。
上下キーでカーソルを動かし`React`を選んでEnterキーで次へ進んでください。
```bash
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others
```

バリアント（プロジェクトで扱う構成）の選択を行います。
上下キーでカーソルを動かし`JavaScript`を選んでEnterキーで次へ進んでください。
```bash
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗
```

以下のような完了メッセージが表示されます。
```bash
Done. Now run:

  cd vite-project
  npm install
  npm run dev
```

これでReactプロジェクトが作成されました！
次のセクションではこのReactプロジェクトを実行してみます。
ターミナルは閉じずに、そのまま次のセクションへ進んでください。

Viteプロジェクトの作成

このセクションでは

## 生成したとき
Reactプロジェクトを生成し終わったときのメッセージを思い出しましょう。
```bash
Done. Now run:

  cd vite-project
  npm install
  npm run dev
```
この最後に書かれている3コマンドを順に実行していけば、今生成したReactプロジェクトが実行できます。

## プロジェクトフォルダへ移動
まずプロジェクトのフォルダへ移動します。
```bash
cd vite-project
```
前のセクションでプロジェクト名を違う名前にした場合は、`vite-project`の部分をプロジェクト名に置き換えて実行してください。

## ライブラリのインストール
次にReactプロジェクトを動かすのに必要なライブラリのインストールを行います。
```bash
npm install
```
このコマンドにより、依存関係が含まれているパッケージ`node_modules`が作成されます。

ネットワーク状況によっては終わるまでに多少時間がかかる可能性があります。
このようなメッセージが出るまで待ちましょう。
```bash
added 258 packages, and audited 259 packages in 25s

107 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

## サーバーの起動
最後に開発サーバーの起動を行います。
```bash
npm run dev
```

起動に成功したら以下のようなメッセージが表示されます。
```
  VITE v5.4.11  ready in 231 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.0.2.0:5173/
  ➜  press h + enter to show help
```
`Local: `のところに書かれているURLが、Reactプロジェクトから生成されたウェブサイトのURLです。

## ローカルホストへ接続
Webブラウザで[`http://localhost:5173/`](http://localhost:5173/)を開きましょう。
以下のようにプロジェクトの初期画面が表示されたら成功です！
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/bbc67d59-f1de-44e4-9459-65f450638407.png)


Viteプロジェクトの実行

# 画面の編集
これまでの手順を行うことで以下のディレクトリ構造が構築されます。
各概要は以下の通りです。
```
vite-project/
├── node_modules/     # 依存パッケージ
├── public/          # 静的ファイル
├── src/             # ソースコード
│   ├── assets/     # 画像などのアセット
│   ├── App.css    # アプリケーションのスタイル
│   ├── App.jsx    # メインコンポーネント
│   ├── index.css  # グローバルスタイル
│   └── main.jsx   # エントリーポイント
├── .gitignore      # Gitの除外設定
├── index.html      # HTMLテンプレート
├── package.json    # プロジェクト設定
└── vite.config.js  # Viteの設定
```

画面を編集するにはメインコンポーネントである`App.jsx`を編集します。
20行目付近に`<h1>My Code Lesson!!</h1>`を追加します。
```react~App
<h1>Vite + React</h1>
<h1>My Code Lesson!!</h1> {/* ここに追加 */}
<div className="card">
```


<details><summary>App.jsxの全文</summary>

```react~App
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <h1>My Code Lesson!!</h1> {/* ここに追加 */}
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App
```

</details>


編集したコードを保存すると、以下のように画面が更新されます。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/28215d9e-9517-4e1b-a06e-2993743750a9.png)

React＋Viteのローカル環境構築手順は以上となります。

Viteプロジェクトの編集

このセクションではNode.jsをインストールする手順を説明します。

# インストール済みかどうかの確認
Node.jsは初めからPCにインストールされている場合もあります。
それを確認するために、まずはNode.jsのバージョンを表示してみましょう。

```bash~Node.jsバージョンの確認
node -v
v18.1.0
```
`v`の後ろの数字がNode.jsのバージョンを表しています。（上の例ではバージョン18です。）

## Node.jsがインストールされていないとき
バージョンが表示される代わりに次のようなメッセージが表示された場合は、PCにNode.jsがインストールされていないことを示しています。
```
node : 用語 'node' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください。
発生場所 行:1 文字:1
+ node -v
+ ~~~~~
    + CategoryInfo          : ObjectNotFound: (node:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
```
この場合は、次の手順に従ってNode.jsをインストールしてください。

# Node.jsをインストールする
ご使用のマシンに合った手順を参照してください。

## Windowsの場合
### 1. インストーラーのダウンロード
[Node.js公式サイト](https://nodejs.org/ja)にアクセスしてください。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/b12ea88f-2f91-46d6-ad29-001e7bcb2452.png)
トップページにある「Node.js (LTS)をダウンロードする」ボタンを押してください。「node-v22.13.1-x64.msi」のような名前のインストーラーがダウンロードされます。

### 2. インストーラーの起動
ダウンロードしたインストーラー（.msiファイル）をダブルクリックして実行してください。インストールウィザードが起動します。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/0aa24438-9c6c-4d73-ba95-83cb2f8b02f7.png)

### 3. インストール
インストールウィザードの指示に従ってインストール前の設定を行います。基本的にはデフォルト設定のまま「Next」ボタンを押して進んでください。
最後にある「Install」ボタンを押すとNode.jsのインストールが開始されます。
インストールが完了すると完了画面が表示されますので、「Finish」ボタンを押してインストールウィザードを閉じてください。

### 4. マシン再起動
マシンを再起動してください。

### 5. インストール確認
マシンが再起動したら改めてNode.jsのバージョンを確認してみてください。バージョンが表示されたらインストール成功です。

## Macの場合
### 1. インストーラーのダウンロード
[Node.js公式サイト](https://nodejs.org/ja)にアクセスしてください。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/b12ea88f-2f91-46d6-ad29-001e7bcb2452.png)
トップページにある「Node.js (LTS)をダウンロードする」ボタンを押してください。「node-v22.14.0.pkg」のような名前のインストーラーがダウンロードされます。

### 2. インストーラーの起動
ダウンロードしたインストーラー（.pkgファイル）をダブルクリックして実行してください。インストールウィザードが起動します。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/f1f9804c-85e6-4ac6-8abf-1142177ce23b.png)

### 3. インストール
インストールウィザードの指示に従ってインストール前の設定を行います。基本的にはデフォルト設定のまま「続ける」ボタンを押して進んでください。
最後にある「インストール」ボタンを押すとNode.jsのインストールが開始されます。
インストールが完了すると完了画面が表示されますので、「閉じる」ボタンを押してインストールウィザードを閉じてください。

### 4. マシン再起動
マシンを再起動してください。

### 5. インストール確認
マシンが再起動したら改めてNode.jsのバージョンを確認してみてください。バージョンが表示されたらインストール成功です。

Node.jsのインストール

このセクションではVSCodeのインストール手順について説明します。

# VSCodeとは
正式名称はVisual Studio Codeといい、Microsoftが開発した高機能テキストエディタです。プログラミング用のプラグインが充実しており、様々なプログラミング言語に対応させることも可能なので数多くの開発者に利用されています。

# VSCodeのインストール
ご使用のマシンに合った手順を参照してください。

## Windowsの場合
### 1. インストーラーのダウンロード
まず、[VSCodeの公式サイト](https://code.visualstudio.com/)にアクセスしてください。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/401f0c6d-9932-42b8-aed4-1a3efc3375df.png)
トップページにある「Download for Windows」ボタンを押してください。
「VSCodeUserSetup-x64-1.97.2.exe」のような名前のインストーラーがダウンロードされます。

### 2. インストールウィザードの起動
ダウンロードしたインストーラー（.exeファイル）をダブルクリックして実行してください。
インストールウィザードが起動します。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/7ea9e5e5-5002-4fd4-911e-36d25c1cd899.png)

### 3. インストール
インストールウィザードの指示に従ってインストール前の設定を行います。基本的にはデフォルト設定のまま「次へ」ボタンを押して進んでください。
最後にある「インストール」ボタンをクリックするとVSCodeのインストールが開始されます。
インストールが完了すると完了画面が表示されますので、「完了」ボタンを押してインストールウィザードを閉じます。

### 4. VSCodeの起動
インストールが完了すると、VSCodeが自動的に起動します。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/6b432882-6851-4bb8-914b-76243bd4ef33.png)

ここまで来ればVSCodeのインストールは完了です。

VSCodeはスタートメニューやデスクトップのアイコンからも起動することができます。

## 5. 日本語化 (オプション)
VSCodeはデフォルトで英語表示ですが、日本語表示に変えることもできます。

VSCodeを起動し、左側のアクティビティバーにある拡張機能アイコン（四角いアイコン）をクリックしてください。

検索ボックスに「Japanese Language Pack for Visual Studio Code」と入力し、検索結果の一番上をクリックしてください。
右のウィンドウに「Japanese Language Pack for Visual Studio Code」拡張機能の詳細が表示されるので「Install」ボタンを押してインストールします。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/98d6af4d-bf67-4108-a876-403427558b1e.png)

インストールが完了すると右下にダイアログが出ますので「Change Language and Restart」ボタンを押してください。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/bd568ded-919a-4e70-bb88-c1a84cc01e0f.png)

自動的にVSCodeが再起動します。再起動後にメニューなどの言語が日本語に変わっていることがわかります。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/dd25ff59-8a9b-49d4-9de6-0b82ab0f92d3.png)

## Macの場合

### 1. インストーラーのダウンロード
まず、[VSCodeの公式サイト](https://code.visualstudio.com/)にアクセスしてください。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/0f2c1595-bf6e-4e34-88d6-4c95d6c61d34.png)
トップページにある「Download for macOS」ボタンを押してください。
「VSCode-darwin-universal.zip」のような名前のzipファイルがダウンロードされます。

### 2. アプリケーションへ移動
ダウンロードされたzipファイルをダブルクリックで解凍してください。
解凍すると「Visual Studio Code.app」というアプリケーションが確認できます。
「Visual Studio Code.app」を左側の「よく使う項目」にある「アプリケーション」へドラッグ&ドロップで移動させます。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/faca0e86-fd2b-4808-80c6-ab7bf9200ef6.png)

### 3. VSCodeの起動
「Launchpad」からVisual Studio Codeのアイコンをクリックして起動します。
初回起動時はインターネット上からダウンロードしたアプリケーションを開いて良いか警告文が出る場合がありますが、開くを選択して起動してください。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/30e9b376-e1da-4659-9e6f-b54771369ea0.png)
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/fdc01512-b150-4b6b-8b69-39cd4c921d53.png)

## 4. 日本語化 (オプション)
VSCodeはデフォルトで英語表示ですが、日本語表示に変えることもできます。

VSCodeを起動し、左側のアクティビティバーにある拡張機能アイコン（四角いアイコン）をクリックしてください。

検索ボックスに「Japanese Language Pack for Visual Studio Code」と入力し、検索結果の一番上をクリックしてください。
右のウィンドウに「Japanese Language Pack for Visual Studio Code」拡張機能の詳細が表示されるので「Install」ボタンを押してインストールします。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/98d6af4d-bf67-4108-a876-403427558b1e.png)

インストールが完了すると右下にダイアログが出ますので「Change Language and Restart」ボタンを押してください。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/bd568ded-919a-4e70-bb88-c1a84cc01e0f.png)

自動的にVSCodeが再起動します。再起動後にメニューなどの言語が日本語に変わっていることがわかります。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/dd25ff59-8a9b-49d4-9de6-0b82ab0f92d3.png)


VSCodeのインストール手順の説明は以上となります。

3. Viteプロジェクトの作成