1.開発プロセスの理解(要件定義)
大前提として開発の前に要件定義、設計をしていくことが必要となる。要件定義は要求からスタートして最低でも「画面一覧」「機能一覧」「データモデル」を用意しておこう。
2.開発プロセスの理解(設計)
要件定義で整理したものをインプットに最低でも画面レイアウト(プロトタイプ)、API定義書、テーブル定義書は用意しておきたい。ここは大いにChatGPTを活用すべき。テーブル定義は深堀すると難しくなるが一旦割愛する。
3.開発知識のキャッチアップ
フロントエンド、バックエンドのプログラミング言語など学ぶものが多いがNext.jsのようにフロント/バックも開発できるフルスタック技術を利用する方が初見はいいように思う。僕の場合はVue.js + Node.jsにしたりしている。
4.開発知識のキャッチアップ②
データベースとの接続はSQLの知識とORMの知識を学んでおきたい。drizzleなどのORMなどを利用すると良いだろう。Supabaseにして一度ここをスキップするのも手である。(Supabaseとの接続方法はややこしいので何か参考にしたい。
5.まとめ
整理するとNext.jsなど決めたプログラミング言語の知識を中心に書籍やUdemyなどで学習していくことが良い。個人的には短めのUdemyを視聴しながらハンズオンして、そのあと生成AIで作りたいアプリのコードを生成して書籍で不明点を潰すことが良いと思う。
- 開発プロセスの理解 (要件定義)
ゴール
要件定義とは何か、なぜ重要なのかを理解し、実際に要件定義書（画面一覧、機能一覧、データモデル）を作成できるようになる。
学習ステップ
要件定義の基礎を学ぶ（1〜2日）
アクション:
IPA（情報処理推進機構）のソフトウェア開発関連資料や、Udemy等で「要件定義」に関する無料/有料セミナーを見る。
要件定義のプロセス、ドキュメントの種類（機能一覧、画面一覧、データモデルなど）を一通り把握する。
推奨リソース:
書籍『要求仕様の書き方』(技術評論社など)
IT系YouTuberやブログ記事で「要件定義」のキーワードで検索して概要をキャッチアップ。
簡易プロジェクトで要件定義をしてみる（3〜7日）
アクション:
想定プロジェクト例：「レストランのオンライン予約システム」「ToDo管理システム」「SNSの簡易版」など、自分が興味あるテーマを1つ決める。
画面一覧: 例）ログイン画面、ユーザー登録画面、予約一覧画面など。
機能一覧: 例）予約登録機能、予約一覧取得機能、ステータス変更機能など。
データモデル: ER図の簡単なドラフトを描き、ユーザー、商品（またはコンテンツ）などのエンティティを定義する。
MiroやGoogleドキュメントなどを使ってドキュメントを作成し、要件定義書を仕上げる。
レビュー & フィードバック
自分以外の人（同僚や知り合いエンジニア）に要件定義書を見せ、**「漏れはないか」「論理的に矛盾はないか」**などフィードバックをもらう。
ChatGPTなどに「これで抜け漏れがないか」などと確認してみる。
- 開発プロセスの理解 (設計)
ゴール
要件定義を踏まえ、画面設計・API定義書・テーブル定義書を具体的に作成し、設計段階で必要なドキュメントを用意できるようになる。
学習ステップ
設計書作成の概要を学ぶ（1〜2日）
アクション:
書籍やオンライン講座で「API設計」「データベース設計」「UI/UXデザイン基礎」を学ぶ。
API定義では、RESTの概念（エンドポイントの設計、ステータスコードの意味など）を学ぶ。
推奨リソース:
書籍『ドメイン駆動設計 入門』(要件定義から設計への流れの考え方を学ぶのに有用)
Swagger（OpenAPI）の公式ドキュメント
画面レイアウト（プロトタイプ）を作る（3〜5日）
アクション:
FigmaやAdobe XDでUI/UXデザインの基礎チュートリアルを見る。
要件定義書にある画面を実際にFigmaでモックアップし、画面遷移の流れを可視化。
具体例:
ログイン画面：メールアドレスとパスワード入力欄、ログインボタン。
トップページ：ユーザーごとのメイン情報表示、ナビゲーションメニュー。
ポイント:
カラーやフォントなどデザインの要素も考慮できれば尚良いが、最初は機能面重視でOK。
API定義書を作成する（同時並行 3〜5日）
アクション:
Swagger (OpenAPI) エディタを使い、エンドポイント一覧とリクエスト/レスポンスの例を記述。
例）POST /api/reservations → 予約登録API
リクエストボディ: { "userId": 1, "tableId": 10, "time": "18:00" }
レスポンス: { "reservationId": 1001, "status": "CONFIRMED" }
ポイント:
CRUDに当てはめながら、必要なHTTPメソッドやステータスコードを意識する。
テーブル定義書を作成（3〜5日）
アクション:
ER図をもとに、各テーブル名、カラム名、データ型、制約（NOT NULL、UNIQUEなど）を定義。
例）reservations テーブル
id (PK, auto increment)
user_id (FK → users.id)
table_id (FK → tables.id)
status (VARCHAR, default: “PENDING”)
created_at (TIMESTAMP)
ポイント:
正規化しすぎて複雑になりすぎないように注意。
最初はある程度シンプルにして、実装しながら微調整するのもアリ。
- 開発知識のキャッチアップ
ゴール
フロントエンドとバックエンドの基礎的なプログラミング知識を学び、フルスタックアプリの雛形を作れるようになる。
学習ステップ
Next.js（またはVue.js + Node.js）の基礎学習（1〜2週間）
アクション:
公式ドキュメントのチュートリアルや、Udemyの「Next.js入門」「Vue.js入門」「Node.js入門」コースを視聴。
コンポーネントの作成、ルーティング、API Routes（Next.jsの場合）などを一通り学ぶ。
具体例:
Next.jsの公式チュートリアル（Next.js Documentation)
Vue.jsの場合は、Vue MasteryやUdemyコースが充実。
バックエンド実装の基礎（1週間）
アクション:
Express（Node.js）やNext.jsのAPI Routesを使って簡単なREST APIを作成。
例）ユーザー登録API、ToDo管理APIなど。
ポイント:
ルーティング・エラーハンドリング・認証(トークンJWTなど)の基礎を学ぶ。
JestやMochaなどを使ったユニットテストの書き方を軽く確認。
フロントエンドとの連携（1週間）
アクション:
作成したAPIをフロントエンドから呼び出す。AxiosやfetchなどでHTTPリクエストを実装。
シンプルなCRUDアプリを完成させる（ユーザー登録、一覧表示、編集、削除）。
ツール・リソース:
APIテストにPostmanやInsomniaを活用。
- 開発知識のキャッチアップ②
ゴール
データベースの構造やSQL、ORMを理解し、DB連携ができるフルスタックアプリを完成させる。
学習ステップ
SQLの基礎（1週間）
アクション:
MySQLまたはPostgreSQLをローカルにインストールし、SELECT, INSERT, UPDATE, DELETE, JOIN, GROUP BYなどの基本構文を練習。
簡単なER図からテーブルを作成し、SQLを実行して動きを確認。
推奨リソース:
書籍『SQL 第2版 ゼロからはじめるデータベース操作』(オライリーなど)
SQLBolt（無料のSQL学習サイト）
ORM(Drizzle, Prismaなど)の導入（1週間）
アクション:
実際にnpmパッケージとしてDrizzleまたはPrismaをインストールし、DBスキーマとマイグレーションの仕組みを学ぶ。
例: drizzle-kit generate などを使ってスキーマ定義を自動生成 → drizzle-kit up でDBに反映。
具体例:
ユーザーテーブル、投稿テーブルをORMで定義し、createUser(), getUserById() などの関数を実装。
Supabaseの利用（1〜2週間）
アクション:
Supabaseでプロジェクトを作成し、リアルタイムDBや認証機能のハンズオンを行う。
ローカルで構築したフロントエンド/バックエンドからSupabaseのAPIやSDKを使ってデータを読み書きする。
ポイント:
Supabase Authを使ったユーザー管理（Google認証、GitHub認証など）も試してみる。
Supabase公式ドキュメントやサンプルリポジトリで具体例を参照。
- まとめ（実践フェーズ）
ゴール
学んだ技術を総合的に組み合わせて、実際に動くアプリケーションを完成させ、問題点を調整しながらスキルを定着させる。
学習ステップ
ミニプロダクトを作成（1〜2週間）
アクション:
テーマ例: 「ブログシステム」「簡易SNS」「リアルタイムチャット」「予約管理システム」など。
要件定義〜設計〜実装を通しで再度行う。
要件定義書 → 設計書(API仕様, DBスキーマ) → フロント+バックエンド実装 → リリース
GitHubリポジトリでバージョン管理をし、日々の進捗をコミットする。
ポイント:
途中で仕様変更や機能追加を試してみて、要件定義〜設計の見直しも行う。
生成AIの活用 & 不明点の解決
アクション:
ChatGPTやGitHub Copilotを使ってコード例を生成し、使える部分を吸収する。
なぜそのコードになるのかを調べ、公式ドキュメントや書籍で理解を補強する。
ポイント:
AIが生成するコードのチェック・改善を通して、コードレビューの習慣を身につける。
デプロイ & 運用
アクション:
VercelやNetlifyなどを使ってフロントエンドをホスティング。バックエンドはRenderやRailway、Supabaseを利用。
カスタムドメインの設定、SSL証明書の設定などを経験する。
ポイント:
GitHub ActionsやCircleCIを導入し、自動テスト→自動デプロイを学ぶとベター。
運用しながらバグ対応や機能追加を行い、本番環境を意識した開発フローに慣れる。
アウトプット
アクション:
作成したプロダクトのスクリーンショットや画面遷移図、デモ動画などをまとめ、ポートフォリオサイトやブログに公開。
QiitaやZennなどで学習の振り返り記事を書く。
ポイント:
自身の学習成果を発信すると、フィードバックが得やすくなり、実践スキルが磨かれる。
最終的な学習の流れまとめ
要件定義の概念習得 → 小規模プロジェクトで実践
設計書(画面レイアウト、API定義、DB設計)を手を動かして作成
フロント/バックエンドの基礎キャッチアップ（Next.js, Vue.js, Node.js）→ CRUDアプリで練習
DB・ORM(SupabaseやDrizzle等)と連携 → データを扱うフルスタックアプリを構築
総合的なミニプロダクト作成 → デプロイ・運用 → フィードバックを得る
これらのステップを学び→試す→アウトプット→フィードバック→修正というサイクルで回していくことが大切です。
1周目で完璧を目指すのではなく、反復しながら知識をアップデートしていきましょう。
不明点や行き詰まったところは、ChatGPTに質問 → 公式ドキュメントで再確認 → 書籍やコミュニティで知見を得るという流れで効率よく問題を解決するとスキル定着が早くなります。