Vite を使用した React プロジェクトのセットアップ手順

## はじめに
この記事は，React を使用した Web 開発のセットアップ手順をまとめたものになります．備忘録としての要素が強いため，あらかじめご了承ください．

---

## 開発環境
[VSCode](https://code.visualstudio.com/)，[GitHub](https://github.co.jp/)

---

## 使用するライブラリ，ツール
[React](https://ja.react.dev/)，[Vite](https://ja.vite.dev/)

【React とは】
`JavaScript`ライブラリの一種で，UI を構築するために利用されます．[コンポーネントベース](https://www.ibm.com/docs/ja/rational-synergy/7.2.0?topic=synergy-component-based-development)であることや[仮想 DOM ](https://qiita.com/seira/items/6767e222890c9890ecb9)を使用していることが特徴です．

https://ja.wikipedia.org/wiki/React

【Vite とは】
高速な開発サーバーを起動することができるビルドツールです．

https://qiita.com/tomada/items/91c489e41a20a2fd11ea

---

## 前提
1. `node.js`のインストール
1. VSCode での GitHub ログイン

### 前提1の確認方法
ターミナル上で以下のコマンドを入力してください．

```shell:shell
node -v
```

`node.js`がインストールされている場合，以下のようにバージョン情報を確認することができます．

![`node -v`の結果の画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/ed62b5ba-4f16-4971-a829-322ed7dbab80.png)

インストールが終わっていない方は[こちら](https://nodejs.org/ja/)から．

---

## 1. 作業フォルダの作成
適当な場所に新規のフォルダを作成し，フォルダ名をプロジェクト名に変更します．

今後の操作はこのフォルダ内で行います．VSCode 等のエディタで作業フォルダを開きましょう．

---

## 2. Gitリポジトリの作成
VSCodeの画面左側の「ソース管理」を開き，リポジトリを初期化する」ボタンを押しましょう．

![GItリポジトリの作成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/f686e296-3f52-41b1-a3d3-cd85c7795ea2.jpeg)

---

## 3. `package.json`の作成
ターミナル上で以下のコマンドを実行し，`package.json`を作成します．

```shell:shell
npm init -y
```

【`package.json`とは】
使用したパッケージを管理するためのファイルです．

https://qiita.com/righteous/items/e5448cb2e7e11ab7d477

【余談】

https://qiita.com/sugurutakahashi12345/items/1049a33b86225f6345fe

---

## 4. パッケージのインストール
ターミナル上で以下のコマンドを実行し，`dependencies`として`react`と`react-dom`，`devDependencies`として`vite`と`@vitejs/plugin-react`をインストールします．

```shell:shell
npm i react react-dom
npm i -D vite @vitejs/plugin-react
```

インストールしたパッケージの中身は`node_modules`という名前のフォルダに格納されます．

【dependenciesとdevDependenciesの違い】
前者は本番環境でも利用するパッケージやその依存関係，後者は開発環境やテスト環境で利用するパッケージやその依存関係です．

https://mo-gu-mo-gu.com/about-dependencies-devdependencies/

---

## 5. `.gitignore`ファイルの作成
容量が膨大であるなどのファイルやフォルダを，Git リポジトリで管理しないように設定します．`.gitignore`という名前のテキストファイル内に記述されたファイルやフォルダは Git のトラッキングの対象外となります．

`.gitignore`ファイルを自動生成することができる gibo というコマンドラインツールを使用します．インストールが済んでいない方は[こちら](https://qiita.com/taquaki-satwo/items/358d2d473fff9a25d5eb)を参考に行ってください．

ターミナル上で以下のコマンドを実行すると，`.gitignore`ファイルが自動生成されます．

```shell:shell
gibo dump Node >> .gitignore
```

---

## 6. `vite.config.js`を設定する
`vite.config.js`は Vite の設定を行うファイルです．

作業フォルダ内に以下の内容のファイル`vite.config.js`を作成しましょう．

```js:vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});
```

【Vite の設定】

https://ja.vite.dev/config/

---

## 7. 主要ファイルの作成
### 7.1. フォルダの作成
まず，作業フォルダの中に`src`という名前のフォルダと，その中に`components`という名前のフォルダを作成します．

---

### 7.2. `index.html`と`style.css`の作成
作業フォルダの中に，以下の内容の`index.html`と`style.css`を作成してください．

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" />
    <meta charset="utf-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="content"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
```

```css:style.css
/*各自で適宜設定してください．*/
```

---

### 7.3. `main.jsx`と`App.jsx`の作成
`src`フォルダの中に以下の2つのファイルを作成してください．

```react:src/main.jsx
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.querySelector("#content")).render(<App />);
```

```react:src/App.jsx
import Header from "./components/Header";
import Main from "./components/Main";
import Footer from "./components/Footer";

export default function App() {
    return (
        <div>
            <Header />
            <Main />
            <Footer />
        </div>
    );
}
```

---

### 7.4. コンポーネントの作成
`src/components`フォルダの中に以下の3つのファイルを作成してください．

```react:src/components/Header.jsx
export default function Header() {
    return (
        <header className="header">
            <h1 className="title">Title</h1>
        </header>
    );
}
```

```react:src/components/Main.jsx
export default function Main() {
    return (
        <main>
            <p>Hello World!</p>
        </main>
    );
}
```

```react:src/components/Footer.jsx
export default function Footer() {
    return (
        <footer className="footer">
            <p>&copy; 20xx hogehoge</p>
        </footer>
    );
}
```

---

### 7.5. ディレクトリ構造
ここまでのディレクトリ構造は以下のようになっています．

```
├── index.html
├── node_modules
│   └── // 省略
├── package-lock.json
├── package.json
├── src
│   ├── App.jsx
│   ├── components
│   │   ├── Footer.jsx
│   │   ├── Header.jsx
│   │   └── Main.jsx
│   └── main.jsx
├── style.css
└── vite.config.js
```

---

## 8. `package.json`の`scripts`プロパティの編集
`package.json`の`scripts`プロパティを編集し，以下のようにします．これにより，任意のコマンドを簡略化することができます．

```json:package.json
{
  "name": "project-name",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.4",
    "vite": "^6.1.1"
  }
}
```

---

## 9. 開発サーバーの起動

ターミナル上で以下のコマンドを実行すると，ローカル上で Vite の開発サーバーを起動することができます．

```shell:shell
npm run dev
```

正常に表示されるか確認してみましょう．

![開発サーバーの起動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/f142d55d-6fb8-4e11-9bae-551a640034cf.png)

また，Vite の開発サーバーはホットリロードが有効であり，ソースコードの変更が即座に反映されます．

---

## 10. コミット

ここまでの作業が完了したら，一度 Git へのコミットを行いましょう．

VSCodeで「ソース管理」を開くと，「変更」リストに変更済みのファイルが表示されます．

![コミット（変更リスト）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/a7f28a42-d129-4484-8bc9-9acc7257a4d6.jpeg)


「変更」の文字にカーソルを合わせた際に現れる「+（すべての変更をステージ）」ボタンを押してみましょう．

![コミット（すべての変更をステージ）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/8952cd8c-c06b-413b-bd81-cb5ac356e664.png)

すると，変更済みのファイルが「ステージされている変更」リストに移動し，ステージングされます．

![コミット（ステージされている変更リスト）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/77606c85-83a4-4f38-8b0e-f5c3afe3e3b0.jpeg)

その上部の「メッセージ」の欄にコミットメッセージを必ず記入し，最後に「コミット」ボタンを押してください．

![コミット.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/b2b6787e-4ad9-423a-9728-5e34696d27f4.jpeg)

---

## 11. GitHub へのプッシュ

GitHub 上にリモートリポジトリを作成すると共に，そのリポジトリに対するプッシュを行います．

「Branch の発行」ボタンを押して，画面上部に表示される「Publish to GitHub public Repository」を選択しましょう．

![Gitへのプッシュ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916136/758e78eb-3e22-4b3e-a996-0a0baf8fa074.jpeg)

---

## 12. 完了

ここまで完了したら，React プロジェクトのセットアップ終了です．なお，今回作成した GitHub リポジトリは[こちら](https://github.com/ShigaJun/template.git)から確認することができます．

お疲れ様でした．

---

## 参考

https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started