次世代React開発の守護神：RSC境界を「ESLint」で制御する設計思想
React Server Components (RSC) の登場により、我々のフロントエンド開発は大きな転換期を迎えました。しかし、現場で最も苦しむのは「サーバーコンポーネントでクライアント専用のHooks（`useState`や`useEffect`など）を使ってしまい、実行時にエラーを吐く」という、いわゆる「境界線問題」です。
これを個人の注意深さに頼るのは、エンジニアリングではありません。「システムが人間をエラーから保護する」。これが、優れた開発環境アーキテクチャの基本思想です。今回は、ESLintを単なる構文チェッカーから、RSCの設計秩序を守る「番人」へと進化させる方法を伝授します。
—
1. なぜ「設定」が開発効率の全てを握るのか
多くの開発者は、ESLintを「赤線を引くツール」としか捉えていません。しかし、我々アーキテクトにとってESLintは、「チームの集合知をコードとして固定化するエンジン」です。
Next.jsのApp Router環境において、`’use client’`の付け忘れはビルド後のランタイムエラーを誘発します。これをエディタ上で即座に検知できれば、デバッグに費やす数分間（あるいは数時間）を、価値あるロジックの実装に充てられます。
インストールすべき武器
以下のパッケージは、単なるプラグインではありません。Reactの内部構造を理解し、AST（抽象構文木）レベルでコンポーネントの境界を判定する強力なツール群です。
必要なライブラリを一括導入
npm install –save-dev eslint-plugin-react-hooks eslint-plugin-react @next/eslint-plugin-next
—
2. 境界を強制する：魂のESLint設定
プロジェクトルートの `.eslintrc.json` を以下のように構成してください。ここで重要なのは、「サーバー用コンポーネントでHooksの使用を禁止する」というルールを明示的に有効化することです。
{
“extends”: [
“next/core-web-vitals”, // Next.jsの最適化ルールを継承
“plugin:react-hooks/recommended” // React Hooksの正しい使用を強制
],
“rules”: {
// サーバーコンポーネントでクライアントフックの使用を厳格に警告
“react-hooks/rules-of-hooks”: “error”,
// 依存関係の欠落を警告する（地味ですが、最もバグを減らします）
“react-hooks/exhaustive-deps”: “warn”
}
}
この設定が何をしているのか？
`react-hooks/rules-of-hooks` は、単にフックの順番をチェックするだけではありません。RSCの環境下では、コンポーネントが「サーバーで動くべきか、クライアントで動くべきか」というメタ情報をESLintが解析し、サーバー環境で実行不可能な関数が呼ばれた瞬間に静的解析レベルでNGを出します。
—
3. Hello World的：境界突破をシミュレートする動作確認
この設定が本当に効いているか、わざと間違ったコードを書いて確認しましょう。`src/app/page.tsx`（デフォルトのサーバーコンポーネント）に、あえて以下のコードを記述してください。
// src/app/page.tsx
‘use client’ // ← これをあえて削除してみてください
import { useState } from ‘react’;
export default function Page() {
const [count, setCount] = useState(0); // サーバーコンポーネントでuseState使用
return
;
}
もし設定が正しく機能していれば、VS Code上で `useState` に赤い波線が表示されます。エディタがこう語りかけてくるはずです：
「君が書いているこのファイルはサーバーコンポーネントだ。ここにクライアント専用のHooksは置けない。もし使いたいなら、ファイルの先頭に `’use client’` を置くか、コンポーネントを分離しなさい」と。
—
4. アーキテクトからのアドバイス：なぜこれが「楽」なのか
初心者のうちは、これらを「ルールで縛られる」と感じるかもしれません。しかし、「動かないコードを書く」という最大のストレスから解放されることは、開発において計り知れない利益をもたらします。
1. 認知負荷の軽減: 「これ、どこで動くんだっけ？」と脳内でシミュレーションする必要がありません。ESLintが即座に答えを教えてくれます。
2. コードレビューの質向上: レビュー担当者は「Hooksの使い方がおかしい」という細かい指摘から解放され、ビジネスロジックやアーキテクチャの妥当性に集中できます。
3. オンボーディングの自動化: 新しく参加したメンバーも、ESLintに従うだけで自然と「Next.jsの作法」を身体に染み込ませることができます。
開発ツールとは、あなたの生産性を削るものではなく、あなたの「思考の限界」を拡張するための外骨格です。ぜひ、この設定をプロジェクトの初期段階で導入し、堅牢で美しいコードベースの土台を築いてください。
さあ、次はどんな壁をツールで自動解決しましょうか？ 開発の旅はまだ始まったばかりです。