Zenn
🍣

React Router v7のDevcontainer開発環境構築

2024/12/09に公開
React Router
devcontainer
Remix
tech

はじめに

React Router v7が正式にリリースされ、注目を集めています。特筆すべき点として、RemixのルーティングエンジンがReact Router v7に統合されることが発表されました。これはReact Router v3相当のコードベースがv7となります。

この記事では、React Router v7を使用するための開発環境をDevcontainerで構築する方法を解説します。

React Router v7について

React Routerは、Reactアプリケーションで最も広く使用されているルーティングライブラリです。v7では以下のような重要な変更が加えられています：

  1. Remixのルーティングエンジンの統合

    • より高度なルーティング機能の提供
    • パフォーマンスの最適化
    • データローディングの改善

  2. 新しいAPIの導入

    • よりシンプルで直感的なインターフェース
    • TypeScriptのサポート強化

開発環境の構築

1. Devcontainerの設定

.devcontainer/devcontainer.jsonで開発環境を定義します：

{
    "name": "React Router v7 TypeScript Development",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "dbaeumer.vscode-eslint",
                "esbenp.prettier-vscode",
                "formulahendry.auto-rename-tag",
                "dsznajder.es7-react-js-snippets",
                "ms-vscode.vscode-typescript-next"
            ]
        }
    },
    "forwardPorts": [5173],
    "postCreateCommand": "npm install",
    "remoteUser": "node"
}

2. Dockerfileの作成

FROM node:22-slim

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends git

RUN npm install -g npm@latest

WORKDIR /workspace

3. Viteの設定

開発サーバーの設定をvite.config.tsで行います：

import { reactRouter } from "@react-router/dev/vite";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  plugins: [reactRouter(), tsconfigPaths()],
  server: {
    host: true,
    port: 5137,
    strictPort: true,
    watch: {
      usePolling: true,
    }
  }
});

特筆すべき点として、serverオプションで以下の設定を行っています：

  • host: true: コンテナ外からのアクセスを許可
  • strictPort: true: 指定したポートが使用できない場合はエラーを発生
  • watch.usePolling: true: ファイル変更の監視にポーリングを使用

4. Prettierの設定

コードフォーマットの一貫性を保つため、.prettierrcを追加します：

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "endOfLine": "lf",
    "bracketSameLine": false,
    "jsxSingleQuote": false,
    "quoteProps": "as-needed"
}

使用方法

  1. リポジトリのクローン：
git clone https://github.com/chantakan/dev-container_for_React_Router.git

  1. VS Codeで開き、「Reopen in Container」を選択

  2. 開発サーバーの起動：

npm run dev
  1. ブラウザで http://localhost:5137 にアクセス

まとめ

この記事では、React Router v7の開発環境をDevcontainerで構築する方法を解説しました。RemixのルーティングエンジンがReact Router v7に統合されることで、より強力な機能とパフォーマンスが期待できます。

設定済みの開発環境はGitHubで公開されていますので、ぜひご活用ください。

参考リンク

Discussion