React歴1年のエンジニアが、AI時代に設計力を身につける6ヶ月間の挑戦

はじめに

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の型設計から始めます。