「書ける」より「読める」が、
これからの生存戦略。
AI が書いたコードを、正しく判断できますか。
AI が一瞬で作った問題だらけの EC サイトを舞台に、コードレビュー力を鍛える問題集。
なぜ今、この学習教材が必要か
AI がコードを量産する今、「とりあえず動くコード」に価値はない。
文脈を無視したコピペは、AI の方が速く・正確にこなす。
現場で求められるのは、設計思想をもって AI の出力を正しく判断する力です。
AI への丸投げには限界がある
AI はコードを書けるしエラーも直せる。でも開発の規模が大きくなると「思った通り」に動かなくなる。AI は伝えていないことを察せない。前提・経緯・制約を渡せていなければ、期待通りの出力は返ってこない。
AI には見えない全体像
AI はファイル単体の修正は得意だ。でも「他のファイルへの影響」「過去の経緯」「チームのルール」までは知らない。1 箇所を直しながら、別の場所を壊していても気づかない。
文脈を守るのは人間だ
一つひとつのコードが動いていても、全体として筋が通っていなければ意味がない。AI が出した答えを「このプロジェクトに合っているか」で判断し、整える力が、今のエンジニアに求められている。
この教材が測りたいのは、あなたがAIに淘汰されず、生き残るための力です。
何を身につけるべきか
文脈を守るとは、「コードの意図を読み取り、問題を言葉で説明し、現実的な判断を下す」ことだ。
これは一度やれば身につくものではなく、繰り返し考えることで磨かれる思考の型だ。
この教材が提供するのは、その基本となる考え方への「気づき」の機会です。
コードを読む力
仕様書なしのコードから問題を自力で発見する。関数名・ファイル名・依存関係を追って「何がおかしいか」に気づく。
問題を言語化する力
「なんとなく嫌」を「〇〇の理由で△△という問題が起きる」と説明できる。AI の出力を素材に、自分の言葉で判断を重ねる。
現実的に提案する力
理想論ではなく、今あるコードに対して現実的な改善を提案する。コスト・リスク・優先度を含めて考える。
問題の舞台:一見動く、問題だらけの EC サイト
舞台のリポジトリ:sample-ec
AI が一瞬で作ったシンプルな EC サイト。
初期開発者が不在で、仕様書もなく動かし方も分からない——よくある案件を想像してほしい。
「なぜこうなっているのか」を読み解く力を鍛えるために、この舞台を用意しました。
動かしてみることもできます(Node.js が必要):
カリキュラム
AI を活用しながら取り組む問題を用意しています。
答えだけでなく「そのとき何を考えたか」を出題としています。
| 難易度 | 問いのコンセプト |
|---|---|
| 初級 | コードを読んで「何がおかしいか」を見つけ、どう直すかを判断する |
| 中級 | 複数ファイルにまたがる不具合の原因を調査し、影響範囲を特定する |
| 上級 | プロジェクト全体を見渡し、設計・リスク・優先度を含めて判断する |
1〜2ファイルのコードを読んで判断する
リファクタリングすべきか、否か、それが問題だ
「メール送信処理を追加したい。共通処理は utils.js に置くルールだから、そこに書いておいて」
- 単一責任原則
- ファイル設計
- レビューコメントの伝え方
- チームの習慣・文化
直らない金額表示
「金額表示を変えたい。¥ の前後にスペースを入れてほしい。utils.js あたりに実装してあると思うから探してみて」
- 関数の重複
- 修正漏れのリスク
- DRY原則
- 重複が生まれる原因
3画面で税率がバラバラ
「カート画面・チェックアウト画面・注文確定後の金額が微妙にズレていると言われた。調べてほしい」
- バグ特定
- 税率計算の不一致
- 仕様変更への耐性
- 数値計算の注意点
複数ファイルにまたがる原因調査と影響範囲の特定
プレミアム会員なのに、割引がゼロ
「佐藤花子さんからクレームが来た。プレミアム会員なのにカートで割引が表示されない」
- DB スキーマの不整合
- type / memberType 二重管理
- 影響範囲調査
- 最小影響の修正
ときどき返ってくる 401
「ログインしても一部の API で 401 が返ってくることがある。トークン周りを確認してほしい」
- セッション vs JWT
- 認証の統一
- 技術的負債の原因
- 移行計画
注文成功なのに、在庫そのまま
「注文は通るのに在庫が減っていないと言われた。確認してほしい」
- 呼び出し漏れの特定
- 非同期処理の落とし穴
- トランザクション設計
- 根本原因の言語化
プロジェクト全体+ビジネス判断が必要な設計問題
その実装、進めていいですか?
「管理者向けに注文キャンセル機能を追加したい。GET /api/admin/orders を参考に実装してほしい」
- セキュリティレポート
- リスク評価
- 実装前の判断
- 優先度の説明
クーポンのバグを直したら、もっと大きな問題が見えてきた
「クーポン機能にバグがあると言われた。クーポンコードを入れても最終的な金額が変わっていないらしい」
- フロント計算の危険性
- サーバー側検証
- 設計方針の比較
- 影響ファイルの全列挙
機能を追加する前に、設計の話をしましょう
「注文キャンセル・ポイント・在庫アラート機能を追加したい。まず設計を整理してほしい」
- ファイル分割設計
- リファクタリング順序
- 無停止での移行
- readDB/writeDB の整理方針
何も知らないプロジェクトへの入り方を体験する
Essential で何をしていいか分からない場合、またはプロジェクトへの入り方自体を学びたい場合は、こちらから始めてください。
サイトマップを書こう
アサイン初日。実際に動かして全ページを把握し、チームで共有できるサイトマップを作る
- 全体像の把握
- サイトマップ生成ツール
- ドキュメントを共有資産にする意味
機能仕様書をAIに書かせよう
情報なし→サイトマップあり→ソースありの3段階で、AIへの情報提供量と出力精度の変化を比較する
- 機能仕様書のドラフト作成
- AIへの情報提供の効果
- 仕様書の信頼性レビュー
データ設計図をAIに書かせよう
JSONデータファイルをAIに渡してER図を生成し、データ構造と機能の関係を理解する
- ER図の生成
- エンティティ間の関係
- データ構造からシステムの制約を読む
画面仕様書をAIに書かせよう
HTMLのみ vs スクリーンショット+HTMLで、AIの画面仕様書の精度がどう変わるかを確かめる
- 画面仕様書の作成
- 表示条件の整理
- コードで分からないことをスクリーンショットで補う
PlantUMLのシーケンス図をAIに書かせよう
ログイン処理から購入フロー全体まで処理の流れを可視化し、チュートリアル全体を振り返る
- シーケンス図の生成
- 処理フローの可視化
- ドキュメントセットを揃える意義
AI と一緒に設計し、図で残し、引き継ぐ
AIに設計を伝えてみよう
「注文キャンセル機能を追加したい」——AI に頼みながら、設計を文章で説明する限界を体験する
- 設計の文章化
- ビジネスルールの伝達
- 引き継ぎ資料の考え方
図を描いてみよう
PlantUML でシーケンス図を作り、AI が生成した図と実際のコードのズレを検証する
- PlantUML
- 図とコードの照合
- 設計の可視化
設計が変わったとき、図はどうなるか
キャンセル履歴機能の追加要件を受けて、コードと図を同期させながら「設計ドキュメントの維持コスト」を実感する
- 図の更新
- コードと図の同期
- 設計の矛盾の発見
設計をAIに渡して続きを頼んでみよう
S-03 で作った図とともにポイント機能追加を AI に依頼。「何を渡せば AI に伝わるか」を整理する
- AI への引き継ぎ
- 図+コード+文章の役割
- ドキュメントを残す意味
よくある質問
Essential、チュートリアル、設計ドキュメント編——どれから始めればいいですか?
コードレビューの問題に取り組みたいならば Essential(初級)から始めてください。ただし「何をしていいか分からない」「プロジェクトへの入り方を学びたい」という場合は、設計ドキュメント編のチュートリアル(T-01〜T-05)から始めることをおすすめします。チュートリアルは「何も知らないプロジェクトにアサインされたとき、どうやって全体像を把握するか」を体験する内容で、Essential の準備運動にもなります。
コードを動かせる環境がないと受けられませんか?
いいえ。コードを読むだけでも回答できます。ただし動かして確認すると理解が深まります(Node.js があれば動きます)。
全問やらないといけませんか?
時間が限られている場合は難易度を選んで回答してください。回答がない設問はスキップとして扱います。
採点はどうするのですか?
採点プロンプト(20_essential/40_evaluation/)が付属しています。Copilot に 4 フォルダを添付するだけで全設問を一括採点できます。採点結果はドラフトで、人がレビューして確定します。
AI を使っていいですか?
自由に使ってください。この教材が測りたいのは「AI の出力を素材に、自分の判断を重ねる力」です。AI の出力をそのまま貼り付けるだけでは「なぜそう判断したか」が書けないため、採点に影響します。
回答はどのくらいの長さで書けばいいですか?
長さは問いません。必要なことが書かれていれば短くても構いません。ファイル名・関数名の具体的な言及があると評価が上がります。
sample-ec にログインするにはどうすればいいですか?
ログイン情報は仕様書がないため、ソースを読んで調べる必要があります。ヒント:db/users.json を見ると、登録されているユーザーのメールアドレスとパスワードが確認できます。——ドキュメントのないプロジェクトではよくあることです。