AI駆動開発の手法 「大きな石開発」：効率的で堅牢なWebアプリ開発の提案

GitHub Copilot、Next.js、Supabaseなどを用いたWebアプリ開発におけるAI（GitHub Copilot等）の活用方法を提案します。

［技術］AI駆動開発の手法「大きな石開発」：効率的で堅牢なWebアプリ開発の提案 [ポッドキャストタイプ] - YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/OzSKSGJKSvE?si=iz5ziaiAEOrT1Kxj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# GitHub Copilotシリーズ

https://qiita.com/masakinihirota/items/0e58a6b921e4420a2882

https://qiita.com/masakinihirota/items/c9df9de0c7326280bfae

https://qiita.com/masakinihirota/items/61f8a26546f4139c353c

https://qiita.com/masakinihirota/items/1694715063247574467d

https://qiita.com/masakinihirota/items/247bee4bd66ace86e1da

https://qiita.com/masakinihirota/items/b5ae692191d197eb5ad7

https://qiita.com/masakinihirota/items/8971aa8ccead3193e77f

https://qiita.com/masakinihirota/items/88d91559b9a111389b15

https://qiita.com/masakinihirota/items/96e2eb8929b0321d1a20



---

## 前提

ソフトウェア開発の世界では、プロジェクトを成功に導くための様々な手法が提唱されています。

私は古くから時間管理や優先順位付けの教訓として知られる「**ビッグロックの法則**」(「**ロックジャーの法則**」とも呼ばれています。)が、AIを活用したWebアプリの開発手法に応用できるではないかと考えました。

この「ビッグロックの法則」の考え方をAI駆動開発に応用し、GitHub CopilotのようなAIツールを最大限に活用しながら、効率的かつ堅牢なソフトウェアを構築するためのアプローチを提案します。

まず前提として、AIの提案するコードは完璧ではなく、間違いを含むことがあります。
開発者はそのハルシネーションを許容し、適切に修正していく必要があります。
開発を進めていくと、AIが生成するコードのブレはどんどん大きくなり、数千行のコードではすぐに限界が来てしまいます。
これは、小さなコードであれば大きなコードよりも比較的信頼できる提案をしてくれるということを意味します。

まずは**大きな石**（大枠、外枠、設計、ルーティング、ページ、アーキテクチャ、フォルダ構造、DB構造）を決めてから、**小さな石**（入出力設計、型定義、テストコード）、そして**砂**（実働コード）を順に埋めていくという考え方です。

---

## 「ビッグロックの法則」とは？

そもそも「ビッグロックの法則」とは、容器に大きな石、小さな石、砂を順に埋めていくという比喩を用いて、物事の優先順位付けの重要性を説く教訓です。
この話が伝えたい主な教訓は以下の通りです。

* **重要なこと（大きな石）を最優先する**: もし先に重要でないこと（砂や小さな石）から手をつけてしまうと、本当に重要なこと（大きな石）を入れるスペースがなくなってしまいます。
* **人生や時間の使い方**: 人生における「大きな石」とは、自分にとって本当に大切なもの（仕事、家族、夢、健康など）であり、それを最初に意識して取り組むべきであると教えてくれます。

このように、「ビッグロックの法則」は、効率的な時間管理や目標達成のための考え方として広く知られています。これをAI駆動開発に応用することを提案します。（ビッグロックを「大きな石」と訳しておきます。）

---

## AIによる「大きな石開発」手法とは？

Next.jsなどのWeb開発において、大きな枠（「**大きな石**（大枠、外枠、ルーティング、ページ、アーキテクチャ、フォルダ構造、DB構造）」）を最優先で決めておくという考え方になります。これにより、外骨格から確実に構築し、その中に詳細な要素や補足的な要素を追加していきます。

ソフトウェア開発におけるこの理論の応用は、以下のような段階的なアプローチで進められます。

### 1. 大きな石（設計、外骨格・基盤）

**定義**: アプリケーションの根幹をなす、最も重要で変更が難しい部分です。これがないと他の部分が成り立たない要素を指します。

* ベースとなる設計書の作成
* 基本的なルーティングとページ構造
* 主要なデータベーススキーマの設計
* 核となる認証・認可システム
* アプリケーションのアーキテクチャの決定
* App Router等によるページ作成（中身はプレースホルダーのみ）
* メニューやヘッダー、フッター等の外枠の作成、リンクの作成

**アプローチ**: まずはこれらを定義し、最小限の機能で動作する状態（プレースホルダーや型定義のみ）を目指します。

### 2. 小さな石（入出力設計、型定義、テスト）

**定義**: アプリケーションの品質と信頼性を確保するための要素です。

* 機能をコンポーネント単位の分割
* 各ページやコンポーネントの入出力（Props、データ型）の定義
* APIエンドポイントやServer Actionsの型定義
* バリデーションルールの定義
* テストコードの記述（ユニットテスト、結合テスト）

**アプローチ**: 実装に取り掛かる前にテストケースを記述することで、要件の明確化と実装の指針とします（テスト駆動開発 - TDD の考え方）。

### 3. 砂（主要機能）

**定義**: 大きな石の上に構築される、アプリケーションの主要な機能や、コンポーネントの定義です。

* コンポーネント単位で、実際のビジネスロジックの作成
* App Router等による、コンポーネントを組み合わせたページ単位での作成
* エラーハンドリングの設計

**アプローチ**: ここで機能のスコープを明確にし、具体的な実装に入る前にインターフェースや型定義を固めます。

### 4. 水（詳細実装・仕上げ）

**定義**: これまでの工程で定義された内容に基づき、実際に動くコードを記述し、ユーザーインターフェースを完成させる部分です。

* ビジネスロジックの実装
* データベース連携ロジックの実装（データ取得、更新など）
* UIコンポーネントの詳細なスタイリングとインタラクションの実装
* エラーハンドリングの実装
* 最終的なデプロイと最適化

**アプローチ**: ここでようやく具体的なコードを記述し、アプリケーションを完成させます。

Next.jsなら機能やページ単位で、1-4を繰り返します。

---

## 利点

このアプローチには、以下のような利点があります。

* **リスク軽減**: 重要な要素から着手するため、プロジェクトの途中で手戻りが発生するリスクを低減できます。
* **早期のフィードバック**: 骨格が早期に形になるため、関係者からのフィードバックを早い段階で得られ、方向性のズレを修正しやすくなります。
* **構造の明確化**: 何をいつ構築すべきかが明確になり、開発チーム全体の理解が深まります。
* **効率的なリソース配分**: 重要なタスクに集中することで、リソースを最も効果的に配分できます。
* **堅牢な基盤**: まず基盤をしっかりと固めることで、その上に構築される機能もより堅牢になります。

この理論は、特に大規模なプロジェクトや、複雑なシステムを開発する際に有効なアプローチだと思います。

---

## GitHub Copilot と「大きな石開発」

AIによる「大きな石開発」を実践する上で、GitHub CopilotのようなAIツールは強力なパートナーとなります。
GitHub Copilotに適切な指示を与えることで、開発の各フェーズをよりスムーズに進めることができます。

以下は、`.github/.copilot-character-instructions.md` の指示書の例です。
これをGitHub Copilotに読み込ませることで、開発の意図を正確に伝え、より的確なコード生成を提案してもらいます。

```.github/.copilot-character-instructions.md
プロジェクトは、「**大きな石開発**」という段階的なアプローチで進めます。これは、まず**大きな石（骨格）**から構築し、次に**小さな石（テスト）**、**砂（機能）**、そして最後に**水（実装）**を埋めていくことで、堅牢かつ効率的な開発を目指すものです。

---

## 1. 大きな石（外骨格の構築）を優先する

### ルーティングとページ構造の定義

まず、Next.jsのApp RouterにおけるURLパスと対応するファイル（`page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`など）の構造を定義します。
この段階では、各ファイルには最小限のプレースホルダーコード（例: `<h1>ページタイトル</h1>`）のみを記述し、実際のロジックやデータフェッチングは含めません。

**例:** `/app/dashboard/page.tsx` のようなファイルパスと、そのページが担う役割を明確にします。

### Supabaseスキーマの初期設計

アプリケーションが扱う主要なデータエンティティ（テーブル）とそのカラムを定義します。
この段階では、概念的なスキーマ定義（テーブル名、主要なカラム名と型）で十分です。具体的なSQL文や詳細な制約は後回しにします。

---

## 2. 小さな石（テストコードの記述）を埋める

### テスト駆動開発 (TDD) の考え方

動くコードを実装する前に、そのコードが満たすべき要件をテストコードとして記述します。
ルーティングが正しく機能するか、コンポーネントが期待されるPropsで正しくレンダリングされるか、データ取得関数の型が正しいかなどをテストします。
テストコードは、実装の指針となります。

---

## 3. 砂（機能の境界と型定義）を定義する

### ページ/コンポーネントの入出力定義

各`page.tsx`やUIコンポーネントが受け取るPropsと、表示するデータの型をTypeScriptのインターフェースや型エイリアスで厳密に定義します。
Supabaseから取得するデータの型もここで定義します。

**例:** `interface Product { id: string; name: string; description: string; price: number; imageUrl: string; }`

### APIエンドポイント/Server Actionsの型定義

もしAPIエンドポイントやServer Actionsを使用する場合、それらが受け取るリクエストの型と、返すレスポンスの型を定義します。
実際のデータ処理ロジックはまだ実装しません。

---

## 4. 水（動くコードの実装）を流し込む

### Supabase連携の実装

定義したスキーマに基づき、SupabaseクライアントSDK (`@supabase/supabase-js`) を使用して、データの取得、挿入、更新、削除のロジックを実装します。
認証機能（サインアップ、ログイン、ログアウト）もここで実装します。

### データフェッチングとUIの実装

`page.tsx`内でSupabaseからデータをフェッチし、それをUIコンポーネントに渡して表示するロジックを記述します。
Server Componentsの特性を活かし、Server Actionsを積極的に利用します。
エラーハンドリングとローディング状態の表示も考慮します。

### UIコンポーネントの詳細実装

プレースホルダーだったUIコンポーネントに、実際のデザインとインタラクションを実装します。

---

## 技術スタックとコードスタイル

* **フレームワーク:** Next.js (App Router)
* **データベース/認証:** Supabase
* **言語:** TypeScript (必須)
* **CSS:** Tailwind CSS (推奨)

### コード品質

* クリーンで可読性の高いコードを生成してください。
* 型安全性を重視し、適切な型定義を推奨してください。
* 重要なロジックにはコメントを追加してください。
* エラーハンドリングのパターンを提案してください。

---

## Copilotへの期待

* ユーザーが「大きな石」の段階にいることを理解し、ルーティングやファイル構造の提案、Supabaseスキーマの概念的な定義を優先してください。
* 「動くコードは後で実装します」という指示があった場合、プレースホルダーや型定義のみを生成し、具体的な実装は保留してください。
* ユーザーが次にどの「石」に取り組むべきか、段階的な開発を促すような提案をしてください。
* TypeScriptの型定義を積極的に活用し、コードの設計をサポートしてください。
* ユーザーの意図を汲み取り、適切なNext.js (App Router) とSupabaseのパターンを提案してください。

```

---

## AIを用いた開発を加速させるために

「大きな石開発」をAIと共に実践する上で、以下の点に注意することで、開発プロセスをさらに加速させ、品質を高めることを目指します。

* **TypeScriptを最大限に活用する**:
    型定義は、コードの設計図であり、AIがコードを生成する際の強力なヒントになります。入出力の型を厳密に定義することで、AIが生成するコードの精度も向上し、バグの早期発見にも繋がります。

* **AIに具体的な指示を与える**:
    「大きな石」の段階で定義したルーティング、ページの目的、入力/出力の型、Supabaseのスキーマを具体的にAIに伝えます。例えば、「ProductDetailPageは、idを受け取ってSupabaseからProduct型のデータを取得し、それを表示するコンポーネントを生成してください。Product型は`{ id: string; name: string; price: number; }`です。」といった具体的な指示が効果的です。

* **イテレーションを意識する**:
    一度に完璧なコードを目指すのではなく、「**大きな石**」→「**小さな石**」→「**砂**」→「**水**」という流れを各機能やページごとに繰り返すイメージです。この反復的なアプローチが、複雑なプロジェクトを管理可能にします。

* **バージョン管理の徹底**:
    各フェーズの完了時にコミットし、必要に応じてブランチを細かく切ることで、問題が発生した場合の切り戻しを容易にします。これは、開発の安全弁として機能します。

* **CI/CDの活用**:
    「**小さな石**」（テスト）のフェーズを自動化することで、コードの品質を継続的に担保できます。継続的インテグレーション/継続的デリバリー (CI/CD) パイプラインを構築し、テストの実行とデプロイを自動化しましょう。

Next.jsのApp Routerを応用して、ルーティングとコンポーネントを別々に管理することで、この「大きな石開発」をサポートします。

Next.js App routerでの ルーティングとコンポーネントを別々に管理 #AppRouter - Qiita
https://qiita.com/masakinihirota/items/2695cba68816794e33d3



AI開発による「大きな石開発」は、プロジェクトの根幹から着実に構築し、段階的に詳細を詰めていくことで、効率性、堅牢性、そして品質の高いソフトウェア開発を実現する強力な手法です。

このアプローチを取り入れることで、複雑な現代のソフトウェア開発において、本質的な価値の提供に集中し、より良い成果を生み出すことができるのではと思います。

# その他

私はバイブコーディングの否定派です。
これはスタートダッシュなどには適していますが、
私がGitHub Copilotを利用して開発しているプロジェクトでは、長期運用を視野にしれたWebアプリ開発を目指しているのので、自分の開発スタイルとは噛み合いません。

大きな石開発は、テンプレート開発とか、吊橋開発などと名付けてきた開発手法にAIを組み込んだものです。
この記事はGitHub Copilotシリーズの一つです。

アジャイルと言うよりもウォーターフォールを何度もやり直すというやり方のほうが近いかなと思います。
なぜならAIの指示を途中で変えたらAIが整合性をとったコードを柔軟性を持って書き直していくと複雑化していくからです。

なので、一旦AIに指示を与えたら最後までコードを書ききってもらいます。

そのためには **「設計書をしっかり書くこと」** が最も重要です。

人間が土台を用意して、設計書と外骨格、テスト等で挟んでAIが暴走しないように監視ししつつGitHub Copilotを利用していきます。

あとから機能を追加や削除する場合には、また設計書から丁寧に書き直していきます。
設計書を再利用して開発を行うで、2回目からはそれほど手間ではなくなります。
これは以前のアプリをベースに、新しくWebアプリを開発するようなものになるので、ウォーターフォールを何度もやり直すというやり方に近いものとなります。

アジャイル型ウォーターフォール開発というべきものでしょうか？
これは、
* ベースとなる指示書を書きます。
* プロンプトファイルを機能ごとに作成します。
* プロンプトファイルをきちんと動くまで実装をします。
* 以上を繰り返します。
というものです。