はじめに

React歴1年（正確には研修2週間、自主開発6カ月、実務8カ月）のフロントエンジニアです。

業務において、Claude Codeに「こんな画面を作って」と指示するだけで、コード設計を完全に理解できていないままレビュー依頼を出してしまう日々に、このままで良いのかと焦りを感じています。

そんな現状を打破すべく、このAI時代に設計力を身につけられるような学習計画を、チャッピー（ChatGPT）に作成してもらいました。

※ 私が身につけたいスキルや、使いたい技術、こんなドキュメントを残したいなどの情報はある程度伝えています。
※ チャッピーには毎日のように仕事だけでなく趣味の話にも付き合ってもらっているので、作成予定のアプリが私の趣味（読書）関連になっています。

ここから先はAIが生成した文章をそのまま掲載しています。

この学習で目指すこと

目標は、

「AIにコードを書かせる人」ではなく、
「自分で設計し、AIを使って高速に実装し、AIの出力を評価・修正できる人」

になることです。

具体的には、最終的に以下を一人で考えられる状態を目指します。

要件を理解する
ユースケースを整理する
データ構造を設計する
Stateを設計する
Componentの責務を決める
APIとの境界を設計する
エラーや例外を設計する
テスト方針を決める
保守・変更しやすい構造を考える
AIに適切な指示を出す
AIが生成したコードをレビューする
設計上の意思決定を説明する

AIを使わないことが目的ではありません。

むしろ、

設計・意思決定は自分。
実装・調査・レビューにはAIを積極的に活用する。

という開発スタイルを身につけたいと思っています。

6ヶ月間の学習計画

1ヶ月目：TypeScript・React設計の基礎

まずは、設計を考えるための基礎を固めます。

TypeScript

基本型
interface / type
Union Type
Discriminated Union
Generic
Utility Types
型ガード
unknown
never
optional / nullable
型設計
Parse, Don't Validate

特に、

「どのデータを、どの型で表現するのか」

を意識します。

React

Component
Props
State
Event
Effect
Custom Hook
Context
Form
Error Boundary

さらに、

Componentの責務
Componentの分割
Stateの所有者
Local State / Global State / Server State / URL State / Form State

について考えられるようにします。

2ヶ月目：小さなアプリで設計を練習する

いきなり大きなアプリを作らず、まずはTODOアプリを題材にします。

機能は、

Todo追加
Todo削除
Todo完了
Todo編集
完了 / 未完了フィルター

程度にします。

ただし、今回はいきなりClaude Codeに作らせません。

まず自分で、

ユースケース
データモデル
State
Component構成
ディレクトリ構成
データの流れ

を設計します。

その後、自分の設計書をClaude Codeに渡して実装してもらいます。

そして、

自分の設計 → AIによる実装 → コードレビュー → 修正

というサイクルを経験します。

3〜4ヶ月目：読書管理アプリを作る

ここからが本命です。

読書が好きなので、自分の本を管理できるWebアプリを作ります。

まずはMVPとして、

本一覧
本詳細
本の登録
本の削除
読書状態の変更

を実装します。

ただ作るだけではなく、

要件定義
ユースケース
データモデル
State設計
Component設計
API設計
エラー設計
テスト戦略
アーキテクチャ

まで自分で設計します。

設計書もGitHubに残します。

docs/
├─ requirements.md
├─ use-cases.md
├─ architecture.md
├─ data-model.md
├─ state-management.md
├─ component-design.md
├─ api-design.md
├─ testing-strategy.md
├─ decisions.md
└─ ai-development.md

5ヶ月目：仕様変更とAI開発

アプリが完成したら、あえて仕様変更を入れます。

例えば、

「読書状態に『積読』を追加してください」

「本に複数の著者を設定できるようにしてください」

「検索条件をURLで共有できるようにしてください」

「APIのレスポンス形式が変更されました」

といった変更です。

そのたびに、

変更前に自分で影響範囲を予測する

ことを練習します。

そして、

設計変更
↓
実装
↓
テスト
↓
リファクタリング
↓
ADR更新

まで行います。

6ヶ月目：ポートフォリオとして仕上げる

最後に、

README
アーキテクチャ
設計上の工夫
テスト
AIとの役割分担
設計変更の事例
苦労した点
今後の改善

などを整理します。

GitHubに公開し、ポートフォリオとして完成させます。

Claude Codeとの付き合い方

今回の学習では、Claude Codeに設計を丸投げしないことをルールにします。

実装前に必ず自分で、

目的
↓
要件
↓
データ構造
↓
State
↓
Component構成
↓
API

を考えます。

そのうえでClaude Codeに実装を依頼します。

基本的には、

「あなたは実装者・レビュアーとして協力してください。設計は私が行います」

という役割分担にします。

設計上の問題を発見した場合は、勝手に修正させず、まず問題点と理由を説明してもらいます。

最終的な判断は自分で行います。

AIを使ったこと自体も記録する

今回の挑戦では、AIとのやり取りも記録していきます。

例えば、

AIに何を任せたか
何を自分で考えたか
AIの提案を採用したか
採用しなかった場合はなぜか
AIによって何が改善されたか
AIによってどんな問題が起きたか

などです。

「AIを使った」という事実だけではなく、

どこまでAIに任せ、どこから自分が判断したのか

を残していきます。

このブログで記録していきます

このQiitaでは、学習の過程を少しずつ記録していく予定です。

例えば、

TypeScriptの型設計を勉強した
Discriminated Unionを使ってみた
TODOアプリのState設計を考えた
Claude Codeにレビューしてもらった
AIの提案を採用しなかった理由
読書管理アプリのデータモデルを設計した
APIとDomain Modelを分離してみた
仕様変更を入れたらどこが壊れたか
最初の設計と完成後の設計を比較した

といった内容です。

単なる「今日は○○を勉強しました」という学習日記ではなく、

「自分で設計して、AIに実装させて、失敗して、改善した記録」

として残していきたいと思います。

6ヶ月後の自分へ

半年後に、この記事を読み返したとき、

「AIにコードを書いてもらうことはできるけど、なぜそうなっているのか分からない」

という状態から、

「この設計にした理由を説明できる。
仕様変更が来たら影響範囲を考えられる。
AIの提案を鵜呑みにせず、自分で判断できる。」

という状態になっていることを目指します。

そして、この半年間の学習を通して、

AI時代にエンジニアとしてどんな能力を伸ばすべきなのか

についても、自分なりの答えを見つけたいと思います。

それでは、まずはTypeScriptの型設計から始めます。