React+Vite+Turborepo+TanstackRouterを用いた爆速フロントエンド開発のお話

はじめに

本記事は（個人的）新しい技術詰め詰めのPJTを作成したので、その際の学びを記録として残しておきます。
こちらを利用すれば、簡単にベースアプリケーションが作成できるかも？ぜひ〜！

基本構成

今回構築する環境は、以下役割を持つ技術を利用しています。
それぞれについて概要程度で詳しい説明はせず、環境構築手順をメインとします。

• Node.js: JavaScriptランタイム環境
• TypeScript: 静的型付けJavaScript
• Vite: 高速な開発サーバーとビルドツール
• pnpm: 効率的なパッケージマネージャー
• React: UIライブラリ
• Turborepo: モノレポ管理ツール
• TanstackRouter: ルーティングライブラリ

0.Nodeとパッケージ管理ツールのインストール

事前に実行環境を作成します。

# Nodeのインストール（例:brewを用いたインストール）
 brew install node

# pnpmのインストール（例:npmを用いたインストール）
 npm install -g pnpm

インストール方法は、さまざま方法ありますので自身の環境にあった方法を利用ください。
Node.jsインストール方法↓

pnpmインストール方法↓

パッケージ管理ツールについては以前書いた記事もぜひ！→Nodeのパッケージ管理を管理したい話

1. Vite

Viteの特徴

Viteはフロントエンドビルドツールです。
一番の特徴はなんと言っても、開発サーバーの起動がはやい！です。
(「Vite（ヴィート）」はフランス語で「速い」を意味する言葉らしい、さすが。)
もちろんビルド速度もはやいです。よりよい開発効率で開発できるのが魅力です。

プロジェクトの作成

コマンドにてViteでのプロジェクト作成を行います。

# プロジェクト作成
pnpm create vite sample-app --template react-ts

# 依存関係のインストール
pnpm install

# 開発サーバー起動
pnpm run dev

「sample-app」という名前のアプリケーションを「React + TypeScript + Vite」テンプレートで作成しました。
開発サーバーは http://localhost:5173/ で起動します。この様な画面が表示されればOK。

今回は「React + TypeScript + Vite」としましたが、他にも「Vue」や「solid」などにも対応できますので、実装したいテンプレートをご確認ください。

環境変数

Viteで環境変数を用いる場合、VITE_から始まる必要があります。
またVite は環境変数を import.meta.env オブジェクトの下で管理するため、呼び出し方法は、import.meta.env.VITE_〜〜の様に利用します。
Viteはdotenvを利用できるため、記載する環境変数値は.envファイルなどに記載していきます。

# .env
VITE_TEST_ENV='環境変数'

// 呼び出しファイル.ts
ENV = import.meta.env.VITE_TEST_ENV // 環境変数

ファイル名	環境
.env	すべての環境
.env.development	開発環境
.env.production	本番環境
.env.local	すべての環境（gitレポジトリ不可）
.env.development.local	開発環境（gitレポジトリ不可）
.env.production.local	本番環境（gitレポジトリ不可）

pnpm dev を実行すると自動的に development モードが適用されます。
pnpm build を実行すると自動的に production モードが適用されます。
.localのファイルは .gitignoreに追加しgit管理外となります。

以下の様に起動時に明示的にモードを指定することも可能です。

vite --mode development

2. Turborepo

Turborepoの特徴

Turborepoはモノレポ管理ツールです。
モノレポは複数のプロジェクトを1つのレポジトリで管理する考え方です。そのためTurborepoを用いることによって、複数パッケージの依存関係を最適化したり、複数のタスクを並行して実行することで高速処理をしたりすることができます。

プロジェクトの作成

コマンドにてTurborepoプロジェクトを作成します。

pnpm dlx create-turbo@latest

実行すると以下の様になります。

ここで作成されたのは、Next.jsで記載されたモノレポ構成のWebアプリケーションです。
Applicationはapps配下となります。デフォルトでは、webとdocsが作成されています。
ここでは、Turborepoで作成されたwebアプリフォルダをViteで作成したものに置き換えるイメージです。

今回はデフォルトの「Next.js」としましたが、他にも「Vue」や「Vite + React」などにも対応できますので、実装したいテンプレートをご確認ください。

Viteのテンプレートを用いたTurborepoプロジェクトを起動することも可能でした、、！
構成は全く同じ、というわけではないのでどちらの構成が良いか、設定値に注意しながら作成ください。

参照: Turboで作成されたプロジェクト構成

実行コマンド

モノレポ環境で実行する際のコマンド一例です。

# 全てのアプリケーションを開発モードで起動
pnpm dev

# 全てのアプリケーションをビルド
pnpm build

# 全てのアプリケーションでLintを実行
pnpm lint

起動してみると、以下の様にTaskが起動します。
モノレポ構成のため、複数アプリケーションが並列で実行されているのが確認できます。

1アプリケーションのみを起動する場合は、以下のようなコマンドとなります。

# 1プロジェクトのみ(例:webアプリケーション)を開発モードで起動
pnpm --filter web dev

パッケージ追加は以下のようなコマンドとなります。

# ルートワークスペースに追加
pnpm add -w hoge

# 1プロジェクトのみ(例:webアプリケーション)に追加する場合
pnpm --filter web hoge

3. TanstackRouter

TanstackRouterの特徴

TanstackRouterはReactアプリケーション向けのルーティングライブラリです。
一番の特徴は、型安全！というところです。TypeScriptと完全に統合されており、あらゆる箇所で型の安全性が保証されています。
またコードベースルーティングではなく、ファイルベースルーティングで実装でき、自動でルーティングを作成します。

パッケージインストール

公式ドキュメントを参考に、パッケージをインストールします。

# パッケージのインストール
pnpm add @tanstack/react-router
pnpm add -D @tanstack/router-plugin @tanstack/router-devtools

ファイルベースルーティング

TanstackRouterはファイルベースルーティングのためファイル構造がそのままルート構造となります。

src/
├── routes          # ルートファイルを格納するディレクトリ
│   ├── __root.tsx  # ルートレイアウトを定義
│   ├── index.tsx   # ルートパス "/" のコンポーネント
│   ├── about.tsx   # "/about" ルートのコンポーネント
│   ├── posts/
│   │   ├── index.tsx    # "/posts" ルートのコンポーネント
│   │   ├── $postId.tsx  # "/posts/:postId" ルートのコンポーネント
│   └── posts.$postId.edit.tsx # "/posts/:postId/edit" ルートのコンポーネント
├── main.tsx 
└── routeTree.gen.ts # 自動生成されるルート定義ファイル

動的パラメータを使用する場合は、パラメータ名の前に$を付けます
（上記例：$postId.tsxは:postIdパラメータに対応）
また、ファイル名に.（ドット）を使うことで、実際のフォルダ階層を作成せずにパスの区切り（/）を表現できます。深くネストされずにルーティングすることができます。
（上記例：posts.$postId.edit.tsxは/posts/:postId/editというルートに対応）

実装したいパスルーティングに合わせたファイル構成を検討ください。

Vite設定ファイルの更新

Vite環境でTanstackRouterを利用する際、以下のように設定ファイルを更新します。この設定により、TanStack Router用のビルドプラグインが有効になり、ルート定義の自動検出やコード生成が可能になります。

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), TanStackRouterVite()],
});

pnpm dev を実行すると以下の様なメッセージが表示されます。（パス名は塗りつぶし表示）

これは、プラグインがルートファイルを検出してrouteTree.gen.tsファイルを生成または更新していることを示しています。ファイルの変更を検知すると、このプロセスが自動的に実行され、ルート構造が最新の状態に保たれます。

まとめ

今回は、React+Vite+Turborepo+TanstackRouterのプロジェクト作成手順と概要説明を行いました。
0ベースだからこそ、新しい機能へ挑戦できたのは良い機会だったなと思います。こんなにも簡単に立ち上げができたので、自学として今後はもっと気軽にアプリケーション開発ができるな〜！と思いました。
今後も引き続き頑張っていきます〜！