VSCode の dev-container を使って、React + TypeScript の開発環境を構築する方法

Posted at 2024-09-14

はじめに

一緒に働いている方から「VSCode の dev-container を使えば、ローカル環境を汚さずに特定の開発環境だけ作れるよ」と聞いたので、実際に環境構築を行なった手順をまとめました。

今回は、Node.js をベースに React + TypeScript の開発環境を構築しました。

dev-container は docker 用いて使用する必要があるため、docker のインストールを行なっておいてください。(今回は割愛します。)

まず、Vite を使って新しい React プロジェクトを作成します。

Vite のプロジェクト作成
```
npm create vite@latest my-react-app -- --template react
```
- my-react-app はプロジェクト名です。

※ TypeScript を使いたい場合

TypeScript を使用する場合は、テンプレートを react-ts に変更します。

npm create vite@latest my-react-app -- --template react-ts

VSCode を開く

VSCode を開きます。
Dev Containers: Add Development Container Configuration Files を選択

コマンドパレットに dev container と入力し、Dev Containers: Add Development Container Configuration Files を選択します。
Node.js & TypeScript 環境を選択
- ポップアップメニューで Node.js & TypeScript を選択します。
devcontainer.json を確認・編集

自動生成された devcontainer.json ファイルが生成されるので、必要であれば、以下のように編集します。
```
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
  "extensions": [
    "dbaeumer.vscode-eslint",    // ESLint
    "esbenp.prettier-vscode",    // Prettier - コード整形
    "dsznajder.es7-react-js-snippets"  // React用スニペット
  ],
  "postCreateCommand": "npm install",
  "forwardPorts": [5173]
}
```
- extensions: 開発に便利な拡張機能を指定します。今回は、ESLint, Prettier, React スニペットをリストに追加しました。
- forwardPorts: デフォルトポートとして 5173 を指定。
- postCreateCommand: コンテナ起動後に npm install を自動実行し、依存パッケージをインストールするようにコマンドを指定しておきます。

dev-container を起動
- VSCode の左下の dev-container アイコンをクリックし、Reopen in Container を選択します。これでプロジェクトが Dev Container 内で開かれ、環境構築は完了です。
開発サーバーの起動

Dev Container 内で以下のコマンドを実行し、開発サーバーを起動します。
```
npm run dev
```
- 開発サーバーが起動し、ブラウザで http://localhost:5173 にアクセスするとアプリが表示されます。