「DevContainer」で、reactの快適な開発環境を構築しよう！

# はじめに
みなさんは DevContainer を利用されていますか？
「何それ？」と思う方も多かったので、備忘録も兼ねてまとめました。
ちなみに、私は 毎日使わない日はない ほど活用しています。

# devcontainerとは？
詳細な解説はさまざまなサイトにあるので省略しますが、私の一言で言うならば、「開発環境のIaC（Infrastructure as Code）」 だと考えています。

例えば、新しいプロジェクトに参加するとき、

- どの開発言語をインストールすればいいのか？
- どのバージョンを使うべきか？

といったことを確認しないと、開発を始められません。（README に書かれていればいいのですが……）
また、複数のプロジェクトに関わると、ローカル環境にさまざまな言語やツールがインストールされ、環境が汚れてしまいます。

DevContainer を使えば、これらの問題をすべて解決できます。

# VScodeの設定
拡張機能で「dev containers」をインストールしておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/37f8efc8-33bd-44d1-95c1-058ae4ff6835.png)

あとは、Docker がインストールされていれば動作します。

# （例）React の開発環境構築

React の開発環境を想定し、私がよく使う DevContainer の設定を紹介します。

```bash
mkdir .devcontainer
touch .devcontainer/devcontainer.json
```

```bash:.devcontainer/devcontainer.json
{
	"name": "DinD",
	"image": "mcr.microsoft.com/devcontainers/base:bullseye",
	"features": {
		"ghcr.io/devcontainers/features/docker-in-docker:2": {},
		"ghcr.io/devcontainers/features/node:1": { "version": 22 }
	},
	"mounts": [
		"source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh/,target=/home/vscode/.ssh/,type=bind,consistency=cached"
	],
	"containerEnv": {
		"TZ": "Asia/Tokyo"
	},
	"postCreateCommand": "docker --version",
	"customizations": {
		"vscode": {
			"extensions": [
				"mhutchie.git-graph",
				"dbaeumer.vscode-eslint",
				"stylelint.vscode-stylelint",
				"esbenp.prettier-vscode",
				"VisualStudioExptTeam.vscodeintellicode",
				"christian-kohler.path-intellisense",
				"oderwat.indent-rainbow",
				"formulahendry.auto-rename-tag",
				"vscode-icons-team.vscode-icons",
				"MariusAlchimavicius.json-to-ts",
				"wix.vscode-import-cost"
			],
			"settings": {
				"editor.formatOnSave": true,
				"editor.tabSize": 2,
				"editor.renderWhitespace": "all",
				"editor.fontSize": 14,
				"editor.fontFamily": "MS Gothic",
				"editor.renderLineHighlight": "all",
				"editor.rulers": [40, 80, 120],
				"editor.bracketPairColorization.enabled": true,
				"files.trimFinalNewlines": true,
				"files.trimTrailingWhitespace": true,
				"files.encoding": "utf8",
				"terminal.integrated.fontFamily": "MS Gothic",
				"git.autofetch": true,
				"workbench.tree.indent": 15,
				"editor.defaultFormatter": "esbenp.prettier-vscode"
			}
		}
	},
	"remoteUser": "vscode"
}

```

# 使い方

ここまでの設定が完了したら、VSCode を 一度閉じて 再起動し、プロジェクトを開きます。

すると、以下のような通知が表示されるので、「コンテナーで再度開く」 を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/4a9859c3-33e0-4cbf-a9f5-29a63fa00dd1.png)

これにより、devcontainer.json の設定に従い Docker 上に開発環境が構築され、自動でその環境内に入った状態 で開き直してくれます。

## 確認

ターミナルで node のバージョンを確認してみましょう。
DevContainer 内に Node.js や Docker がインストールされた状態 になっているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/ceb7fef6-b178-416c-b4ee-f2cf7c705cd3.png)


# devcontainer.jsonの解説

## image
コンテナのベースイメージです。

## features

追加機能を指定できます。今回は Docker と Node.js を追加しています。
バージョンを細かく指定できるため、バージョンごとの動作差異を検証しやすいのが利点です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/7585eab0-c55a-4db9-822a-d324565010ec.png)

## mounts
SSH キーや AWS クレデンシャル情報などを コンテナ内で利用できるようにする 設定です。
（sshの場合、ssh-agentを利用する方法もあります。その場合は、この設定は不要です。）

## containerEnv
環境変数の設定です。今回は タイムゾーンを Asia/Tokyo に指定 しました。

## customizations
VSCode の拡張機能や設定を事前にインストールできます。
通常、.vscode/settings.json に書く内容と同じですが、環境構築時点で適用される のがメリットです。

:::note warn
拡張機能の中には 再起動しないと動作しないもの があります。
環境が立ち上がったら、一度 VSCode を再起動 しましょう。
:::

## remoteUser
ターミナルでのログインユーザーを指定します。
（今回は vscode を指定しましたが、デフォルトと同じなので省略可能です。）

# 環境の動作確認
必要なツールをインストール
```
npm install -g yarn typescript ts-node typesync npm-check-updates npm@11.1.0
```

プロジェクトの作成
```
yarn create vite hello-world --template=react-ts
cd hello-world
yarn install
```

開発環境を起動
```
yarn dev --host
```

## 確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/17d0fa4c-185c-4182-9529-0cbae092bc5f.png)

ブラウザで http://localhost:5173/ を開きます。


# さいごに
環境構築に時間をかけたくない方や、開発環境をどこでも簡単に再現したい方にDevContainerは非常に便利です。
興味がある方は、ぜひ試してみてください！