GitHub Copilotと進めるWEBリアーキテクチャ

背景

Next.jsで開発していた中規模プロジェクトでは、以前は「components」「api」「hooks」など、技術的な分類に沿ったディレクトリ構成を採用していました。

しかし、例えば「お気に入り機能（Bookmark）」を変更しようとすると、関連コードが複数のディレクトリに分散していて、作業のたびにファイルを行ったり来たりする必要がありました。関心ごとは近いのに、ディレクトリが遠い、、そんな状態が続き開発効率も落ちていました。

そこで、機能ごとにディレクトリをまとめる「Package by Feature」の方針で構成を見直すことにしました！複数人での開発が前提だったので、ルールを守りやすく、かつ効率的に進められる仕組みを作りました！

ESLint Plugin Boundary の活用

せっかく構成を機能ごとに整理しても、他の機能から好き放題参照できてしまえば意味がありません。ESLint Plugin Boundaryを導入することで、「このディレクトリの中だけで完結させる」といったルールをLintエラーとして強制できるようにしました。

特に便利だったのは、構成を移行中のタイミングです。旧ディレクトリを参照することを禁止するルールを設ければ、半端に残ったコードが新しい構成から使われることがなくなります。結果として、機能単位でのまとまった移行が自然と進んでいきました！

Github Copilotの活用

そして今回の主役のひとり、GitHub Copilot。地道で手間のかかる移行作業、できるだけ自動化したと思って活用したのが、Copilotへの段階的なプロンプト指示です！

手順

今回のリアーキテクチャでは、主に二つのファイルを用意しています。
1.リアーキテクチャの具体的な指示書（日本語）
2.リアーキテクチャプロンプト（英語）
指示書の例（簡略版）

# フロントエンドリアーキテクチャ指示書
## 概要
現在のページ単位の構造から、機能・関心事単位の構造（`src/feature`）への移行を行います。

## リアーキテクチャの原則
- Package by Feature
- ESLint Boundaries準拠
- 階層的な依存関係
- バレル・エクスポートの禁止

## ディレクトリ構成テンプレート
src/feature/[機能名]/
├── pages/
├── components/
├── hooks/
├── types/
├── constants/
├── server/
├── apis/
├── store/
├── validations/
└── functions/

## 移行ステップ
- Step A: pages ディレクトリの移行
- Step B: components の移行
- Step C: types/constants の移行
- Step D: その他の移行
- Step E: 不要なファイルの削除とLint最終チェック

この指示書で重要なのは、以下の3点です！：

• ✅ ESLintのルールを明確に定義して守らせること
• ✅ 移行手順をステップに分けて、段階的に指示すること（一気にやろうとすると破綻します）
• ✅ 最後にLintチェックを走らせること（この一文があるだけで、Copilotが自動修正してくれることが多いです）

プロンプトテンプレートの例（簡略版）

---
mode: 'agent'
tools: [ ]
description: 'Re architecture the feature ${input:feature} according to the provided architecture and ESLint rules.'
---

Re-architect the ${input:currentFeature} feature to ${input:targetFeature} according to the following guidelines:

- Follow the rules described in architecture.md, re_architecture_instructions.md, and .eslintrc
- DO NOT use barrel exports
- DO NOT change internal logic
- Proceed step by step (A → E)
- Follow this directory structure:
src/feature/[FeatureName]/

Start with Step A. -->

こちらはCopilot用のプロンプトファイルです。先ほどの指示書は開発者も参考にするため日本語で書いていますが、プロンプトはCopilotに入力して使うものなので英語にしました。(効果があったかは不明)
プロンプトファイルにしておくことで、チーム内で汎用的に再利用しやすくなります。

.github/prompts/ 配下に置けば、以下のようなコマンド形式で簡単に実行できます：

/re_architecture currentFeature=bookmark targetFeature=bookmark

成果と所感

この仕組みを使うことで、GitHub Copilotが移行作業の約6割を自動で行ってくれました！残りの4割はこちらで調整する必要がありましたが、それでも作業時間は半分以下に減らせました！
これからCopilotがもっと進化してくれれば、リアーキテクチャもどんどん気軽に取り組めるようになると感じました！