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

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

## 基本構成

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

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

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

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

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

# pnpmのインストール（例:npmを用いたインストール）
 npm install -g pnpm
```
インストール方法は、さまざま方法ありますので自身の環境にあった方法を利用ください。
Node.jsインストール方法↓

https://nodejs.org/ja/download


pnpmインストール方法↓

https://pnpm.io/ja/installation#using-other-package-managers

パッケージ管理ツールについては以前書いた記事もぜひ！→[Nodeのパッケージ管理を管理したい話](https://qiita.com/inacyc_k/items/4aea76a54f4d26b835e4)

## 1. Vite

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

https://ja.vite.dev/guide/why.html


### プロジェクトの作成

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

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

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

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

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1827273/66911251-a6a6-430d-9d79-b4939c28e0c8.png">

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

https://ja.vite.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B


### 環境変数

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

```bash
# .env
VITE_TEST_ENV='環境変数'
```

```typescript
// 呼び出しファイル.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管理外となります。

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

```bash
vite --mode development
```

https://ja.vite.dev/guide/env-and-mode.html

## 2. Turborepo

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

### プロジェクトの作成

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

```bash
pnpm dlx create-turbo@latest
```
実行すると以下の様になります。

<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1827273/a1f102e5-1a0c-428b-bb9c-b60b1eb08331.png">

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

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

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

https://turbo.build/repo/docs/getting-started/examples#community-maintained-examples


参照: [Turboで作成されたプロジェクト構成](https://zenn.dev/hayato94087/articles/d2956e662202a7#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%A7%8B%E6%88%90%E3%82%92%E7%A2%BA%E8%AA%8D)


### 実行コマンド

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

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

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

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

起動してみると、以下の様にTaskが起動します。
モノレポ構成のため、複数アプリケーションが並列で実行されているのが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1827273/8602e0b2-5c7d-44d2-bf8a-059283c769ad.png)

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

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

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

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

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

## 3. TanstackRouter

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

### パッケージインストール

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

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

https://tanstack.com/router/latest/docs/framework/react/quick-start#manual-setup

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

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

```bash
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というルートに対応）

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

https://tanstack.com/router/latest/docs/framework/react/routing/file-based-routing#directory-routes

### Vite設定ファイルの更新

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

```typescript
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` を実行すると以下の様なメッセージが表示されます。（パス名は塗りつぶし表示）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1827273/15fe6489-b1f0-4916-9af1-7dade944d57d.png)

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

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