React / Dev Containerを使った設定方法

# **Dev Containerを使った設定方法**

この記事では、VS Code の **Dev Container** 機能を使った開発環境の設定方法について解説します。Dev Container を活用することで、コンテナベースの統一された開発環境を簡単に構築でき、チーム開発や個人開発での効率を大幅に向上させることができます。

---

## **1. Dev Container の設置方法**

### 必要な準備
1. **Docker のインストール**  
   - [Docker Desktop](https://www.docker.com/products/docker-desktop/) をインストールし、起動しておきます。

2. **VS Code に Dev Containers 拡張機能をインストール**  
   - Dev Containers 拡張機能は [こちら](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) からインストールできます。

3. **プロジェクトに `.devcontainer` ディレクトリを作成**  
   プロジェクトのルートディレクトリに `.devcontainer` フォルダを作成し、その中に設定ファイルを作成します。

### フォルダ構成例
```
project/
├── .devcontainer/
│   ├── devcontainer.json
│   └── Dockerfile
├── src/
├── package.json
└── .prettierrc.json
```

---

## **2. devcontainer.json の各項目の説明**

### **devcontainer.json ファイルのサンプル**
以下は、React プロジェクトで Prettier を使用する場合の設定例です。

```json
{
  "name": "React Dev Container",
  "service": "react-app",
  "dockerComposeFile": "../docker-compose.yml",
  "workspaceFolder": "/workdir",
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode", 
        "dbaeumer.vscode-eslint"
      ],
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.tabSize": 2
      }
    }
  }
}
```

### **各項目の説明**
| 項目                          | 説明                                                                                          |
|-------------------------------|---------------------------------------------------------------------------------------------|
| `name`                        | コンテナの名前。                                                                                 |
| `service`                     | `docker-compose.yml` に記載されたサービス名を指定。                                                |
| `dockerComposeFile`           | 使用する `docker-compose.yml` ファイルのパス。                                                    |
| `workspaceFolder`             | コンテナ内で開発を行う作業フォルダ。                                                            |
| `customizations.vscode.extensions` | コンテナ起動時に自動でインストールされる拡張機能のリスト。                                            |
| `customizations.vscode.settings`   | VS Code 内のエディタ設定。Prettier をフォーマッタとして指定する例が含まれています。                             |

### **拡張機能が自動でインストールされる仕組み**
- `customizations.vscode.extensions` にリスト化された拡張機能が、コンテナ起動時にインストールされます。
- 例:  
  - `"esbenp.prettier-vscode"`: Prettier を使用するための拡張機能。
  - `"dbaeumer.vscode-eslint"`: ESLint をサポートする拡張機能。

---

## **3. Prettier の設定方法**

Prettier を使ったコード整形を有効にするために、以下のファイルを用意します。

### **3.1 `.prettierrc.json` の作成**
プロジェクトのルートに `.prettierrc.json` を作成し、整形ルールを記述します。

```json
{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "printWidth": 80,
  "tabWidth": 2,
  "endOfLine": "lf"
}
```

### **3.2 `.prettierignore` の作成**
以下のような `.prettierignore` ファイルを用意して、フォーマット対象外のファイルやフォルダを指定します。

```plaintext
node_modules
build
dist
package-lock.json
```

---

## **4. .devcontainer/devcontainer.json の立ち上げ方**

1. **VS Code を開く**  
   プロジェクトのルートディレクトリを VS Code で開きます。

2. **Dev Containers を起動**  
   コマンドパレット（`Ctrl + Shift + P` または `Cmd + Shift + P`）を開き、以下を選択します。

   ```
   Dev Containers: Reopen in Container
   ```

3. **コンテナのビルドと起動**  
   初回起動時、設定された `docker-compose.yml` や `Dockerfile` を基にコンテナがビルドされます。その後、自動的に設定が適用され、環境が整います。

---

## **5. 補足事項**

### **Dockerfile の設定例**
必要に応じて、コンテナ環境をカスタマイズする `Dockerfile` を用意します。

```Dockerfile
FROM node:20-slim

# 必要なパッケージをインストール
RUN apt-get update && apt-get install -y git

# 作業ディレクトリを設定
WORKDIR /workdir
```

---

## **6. Dev Container を使うメリット**

1. **環境の統一**
   - チーム全員が同じ開発環境を使用することで、環境依存の問題を回避。

2. **ローカル環境を汚さない**
   - コンテナ上で開発を行うため、ローカル環境に余計なパッケージをインストールする必要がない。

3. **セットアップの簡略化**
   - 必要なツールや拡張機能が自動的にインストールされるため、新しい開発環境をすぐに構築可能。

4. **移動性**
   - プロジェクトの `.devcontainer` 設定を共有するだけで、誰でも同じ環境を再現可能。

---

## **7. まとめ**

Dev Container を利用することで、以下のことが可能になります：
- Docker ベースのコンテナ環境を VS Code と統合して使用。
- Prettier や ESLint を含む統一された設定を簡単に適用。
- チーム開発での効率を大幅に向上。

特に、開発環境をすぐに構築したい場合や、複数プロジェクトを管理する必要がある開発者にとって強力なツールです。これを機に、Dev Container を導入してみてはいかがでしょうか？