26週間の学習ロードマップ

主軸は HTML → CSS → JavaScript → React → TypeScript → テスト・チーム開発 → HTTP・SQL・バックエンド基礎 → 自作アプリの改善・応募です。GitとGitHubは第1週から継続します。

Reactを選ぶ理由は、日本語の段階的な教材がそろい、学んだJavaScript・TypeScriptをバックエンドの入口にも使えるためです。Reactだけが就職への経路という意味ではありません。第2週から希望勤務地・勤務形態に合う求人を見て、必要スキルを確認します。

週25時間取れる場合の追加5時間、最大130時間は、理解が遅れた範囲の復習、レビューで出た修正、年末年始などの調整、求人調査に使います。新しい技術を増やすための時間にはしません。

前半の週20時間は「動画・教材5時間、実装12時間、復習・説明・記録3時間」を目安にします。後半は「実装・修正12時間、応募準備5時間、復習・説明3時間」へ移し、動画は必要な箇所だけ読み替えます。

以下のA〜Hと発展用Iは、2026年9月8日に公開講座ページで個人向け定額プランの案内、または当該講座のプレミアム表示を確認しました。ログイン後のあなたの契約で再生できるかまでは確認していません。受講開始時には契約中のアカウントで開き、定額プラン内で開始できることを確認してください。Udemy公式も、すべての講座が個人向け定額プランに含まれるわけではないと説明しています。Udemy公式FAQ

表の時間は講座全体の動画時間です。実際の学習には、一時停止、実装、エラー調査、自作への応用時間が別に必要です。講座の採用は公開カリキュラムに基づく選定で、全動画を実際に受講した評価ではありません。

AとCのJavaScript入門など、同じ内容が重複する場合は課題を解けるかで判断して省略します。まず着手するのはAとBだけです。以後も主教材1本＋必要な補助教材、という形を保ちます。

講座の最終更新日が新しくても、全動画・全ライブラリが刷新されたとは限りません。練習用は講座の指定環境で学び、自作アプリの開始時には公式手順とサポート中のバージョンを確認してください。Create React Appは新規アプリ向けに非推奨となっています。この計画では学習用ReactアプリにViteを使います。React公式は通常の新規アプリではフレームワークを推奨しつつ、基礎学習にはビルドツールからの構築も案内しています。React公式の説明

Node.jsは開始時点のサポート中LTSを選びます。確認時点では24系がLTSで、古い講座に登場する20系はサポート終了の表示です。自作・公開用に古い環境を固定し続けないようにします。Node.js公式リリース一覧

対象外になった講座があれば、別途購入する前に、定額プランのコレクション内で同じテーマを検索します。「日本語」「基礎からの説明」「自分のOSの環境構築」「演習」「現在の環境に関する補足」を確認し、表の到達内容を満たす1本に置き換えます。見つからなければ下記の公開教材を使えます。

GはJestを扱います。まず講座の小さな例でテストの考え方を学び、自作のViteアプリにはVitestを使う方針です。設定やモックAPIには違いがあるため、そのままコピーして動くとは扱わず、公式手順で最小構成から確認します。必要なら講座のJest環境を使い続けても構いません。テストツールの数を増やすことが目的ではありません。

各週20時間を基準にしています。「教材」は上のIDです。毎週、作ったものを実行して確認し、学習記録にURL・できたこと・未解決事項を残します。

いずれも「公式資料や自分の短いメモを見る」のは可です。丸暗記を求めません。最初の実装を動画・生成AIへ丸投げせず、後から処理と判断を説明できることを確認します。以下の制限時間は自己評価の目安です。

1. HTML/CSSのサイト：2〜3ページの架空店舗・イベントなど。後半に作品紹介サイトへ発展させてもよい。画面の再現、レスポンシブ、適切なHTMLを示す。
2. JavaScriptの小作品：学習記録、読書管理、持ち物管理など。後でReact・TypeScriptへ発展させ、改善過程を残す。文法だけでなく操作・データ・通信を扱えることを示す。
3. 主力アプリ1つ：自分や身近な人の具体的な不便を減らす。ログイン、データ保存、編集・削除、検索・絞り込み、独自の小さな機能、テスト、改善記録を備える。

巨大なSNSやEC全機能の模倣より、対象者と用途を絞った作品を完成させる計画です。講座の作品は練習として活用し、自作として紹介するものには自分で決めた要件・仕様・改善を入れます。講座コード・画像の公開条件も確認し、参考元と自分の担当範囲を記載します。

想定する利用者は「Udemyと書籍で独学する人」。解決したい課題は「何を勉強したか残せず、復習する内容と時期を忘れる」です。普段の仕事や趣味に、もっと具体的な課題があればそちらを優先します。

最初の版で実装するのは次の範囲です。

• 教材の登録と、日付・学習時間・学んだことの記録。
• 記録の一覧・編集・削除、教材や期間による絞り込み。
• 復習予定日の登録と、今日復習する項目の表示。
• ログインと、自分の記録だけを扱う権限制御。
• 週ごとの合計学習時間。最初は数字や表でよく、グラフは必須にしない。

画面は「一覧」「記録フォーム」「復習一覧」「ログイン」の4つ程度。テーブルは認証用のユーザーに関連付く materials と study_logs から始め、学習記録に復習予定日を持たせれば十分です。チャット、決済、SNS連携、通知配信、AI機能は初版の対象に入れません。

構成は React＋TypeScript＋Vite、Supabaseの認証とPostgreSQL、静的ホスティングを基本案にします。HTTPを理解するために第17週でExpressの小さなAPIを作り、主力作品では保存と認証に既存サービスを使ってフロントエンドの品質に時間を残します。Supabaseを使えることと、バックエンドを自力で設計・運用できることは別の到達段階です。

本番の権限制御はボタンを非表示にするだけでは成立しません。SupabaseのData APIを使う場合は、利用者ごとの読み書きをRLSで制限し、2つのテスト用アカウントで確認します。公開用のキーと管理用の秘密キーを区別し、管理用のキーをブラウザーへ渡さないことも学びます。SupabaseのRLS公式ガイド

主力作品の完成条件は、主要操作が通ること、入力エラーが分かること、別ユーザーの記録へアクセスできないこと、スマホで使えること、公開URLが開くこと、主要な操作をテストで確認できることです。

テストは例として「空の記録を保存できない」「正常な記録を追加すると一覧が変わる」「編集後に再読み込みしても反映される」「通信失敗から再試行できる」「別ユーザーの記録を変更できない」を優先します。テスト本数やカバレッジの数字だけを成果にはしません。

Gitは変更履歴を管理する道具、GitHubはそのコードを共有し、相談・レビューする場所です。第1週から使い、作品を完成してからまとめて上げる方法は避けます。

• 第1〜2週：status、diff、add、commit、push、pull、log。小さな意味のある変更ごとに記録。
• 第3〜4週：ブランチ、PR、マージ、練習用の競合解消。コミット数のノルマは不要。
• 第5週以降：機能やバグをIssueにし、目的・完了条件を書いてから作業。
• 第15週以降：PRで変更理由、確認方法、画面の変更を共有し、GitHub Actionsで型・テスト・ビルドなどを確認。
• 少なくとも一度、他の学習者・エンジニアに小さなPRを見てもらう。相手がいなければ自分でレビューを練習し、実際のチーム開発経験とは区別して説明。

相談するときは、期待した動作、実際の動作、再現手順、エラー全文、試したこと、関係するコードを短くまとめます。要件が不明なら実装前に確認し、遅れそうなら早く共有する練習も、学習課題の一部にします。

PRの記入例：

目的：空の学習記録が保存されてしまう問題を直す
変更：入力チェックを追加し、フォーム内にエラーを表示する
確認：空入力・正常入力・編集時を確認。対応するテストを追加
影響：新規作成と編集フォーム
相談：エラー文が分かりやすいか見てほしい

READMEは、その作品を初めて見る人のために書きます。次の順序で十分です。

1. 何をするアプリか、誰のどんな不便を減らすか。
2. 公開URL、画面画像、短いデモの案内。
3. 主要機能と利用の流れ。
4. 技術構成と、それを選んだ理由。
5. ローカル起動手順、必要な環境変数名、テスト手順。
6. データの関係図、認証・権限の方針。
7. 苦労した問題、原因、解決方法、改善前後。
8. 既知の問題、今後の改善、参考教材、素材の出典、自分が担当した範囲。

環境変数の値や秘密情報は載せず、必要な名前だけを .env.example に示します。第三者が別フォルダーにcloneして起動できるか確認します。

作品紹介サイトのページ構成は次の程度に絞ります。

• 最初に「何を作れる人か」を一文で示す。
• 主力作品を最初に見せ、公開URLとソースへのリンクを付ける。
• 作品ごとに、課題・対象者・自分の実装・工夫・改善を記載。
• 小作品と、使った技術を実例に結び付けて紹介。
• 経歴と応募先に伝えたい強み、連絡手段。

技術ごとの自己評価を根拠のない百分率で表示するより、「Reactで検索・編集画面を実装した」など、確認できる事実を書きます。講座の修了証よりも、自分の判断、動く作品、変更履歴、他者の意見を受けた修正を見せる構成にします。

ログインが必要な作品には、個人情報を含まない読み取り専用デモ画面、または利用者ごとに分離したデモを用意すると確認しやすくなります。管理者アカウントの共有はしません。GitHub Pagesは静的サイトに使い、Express等のサーバープログラムがそのまま動く場所とは考えないでください。GitHub Pagesの案内

求人の技術名を集めるだけでなく、未経験者が実際に担当する業務を確認します。調査時点では、未経験向けにHTML/CSS/JavaScript、React・TypeScript、SQL、GitHub、テストの研修を掲載する求人や、初期業務として既存アプリの改修・簡単な画面実装・API連携を挙げる求人がありました。これは学習範囲を考えるための例で、特定企業への入社推奨や募集継続の保証ではありません。BREXA SOLVIAの掲載例、テイクスの掲載例

• 第2〜4週：希望条件に合う求人を10〜20件読み、勤務地、勤務形態、必須経験、技術、初期業務、研修・レビュー体制を記録。
• 第14〜16週：応募書類とGitHubプロフィールを作成。これまでの仕事での問題解決や協力の経験も、具体例にする。
• 第19週以降：実務未経験・初級者が対象になり得る求人へ、週2〜3件を目安に応募。進行中の主力作品には「開発中」と明記し、完成済みの作品も提示。
• 第23〜26週：選考と並行して改善。書類で止まるなら見せ方と応募先、課題で止まるなら実装とデバッグ、面接で止まるなら説明と志望理由を見直す。

面接や面談では「入社後に担当する開発業務」「コードレビューをする人」「未経験入社者の配属例」「研修後にどのように開発へ進むか」を確認します。応募条件の必須と歓迎は区別し、自分の経験を実務経験として過大に書かないことを守ります。

説明練習には次の質問を使います。

• propsとstateは何が違い、今回の作品ではどこに置いたか。
• async/awaitと通信失敗をどう扱ったか。
• TypeScriptがあっても実行時に検証が必要なのはなぜか。
• 認証と認可は何が違うか。
• なぜそのテーブル構成・コンポーネント分割にしたか。
• もっとも困ったバグを、どう再現して調べたか。
• ユーザーの意見を受け、何を変更したか。

配列・文字列・Map/Set・基本的な探索・計算量の入口は、週2回15〜30分程度で練習します。難しい競技プログラミングを主軸にせず、応募企業の課題に合わせて増減します。

「Principles of Programming」と「Webが動く内容の本」は、正式な書名・版が未確認なので、章番号は指定しません。

• Webの仕組みを扱う本：第1〜2週にブラウザーとサーバー、第8週にHTTP、第17〜20週にAPI・認証・データベースに関係する箇所を読む。DevToolsのNetwork画面と結び付ける。
• プログラミングの原則を扱う本：第6週以降、命名、関数の分割、重複、責務などに関連する箇所を読む。毎週1つ、自分のコードを改善して差分を残す。

読書時間は週の教材・復習枠に含めます。最初から通読して理解し切ることを、制作を始める条件にしません。

週20時間の例は「月〜金2時間ずつ＝10時間、土6時間、日4時間」。休息のために分割し、まとまった制作を土日に置きます。追加の5時間を使えない週があっても、必須20時間の計画で進めます。

2時間の学習例：

1. 10分：前回の内容を見ずに説明し、今日の完了条件を1つ決める。
2. 25分：必要な動画・資料を読む。
3. 60分：一時停止して実装し、題材・仕様を変えた課題を解く。
4. 15分：実行確認、差分の確認、コミット。
5. 10分：できたこと・詰まったこと・次の一手を記録。

20〜30分、同じところで進まなくなったら、エラー・再現条件・試したことを整理して相談します。何時間も考えずに検索し続けることも、すぐ完成コードを受け取ることも避け、仮説を1つ試す単位で進めます。

第1〜9週は、自分で試した後に「答えではなくヒント」「エラーの意味」「理解を確かめる問題」を求める使い方を中心にします。週に1度はAI・講座動画なしで小さな課題を解き、公式資料は参照できます。

第10週以降は、コードレビュー、テストケースの提案、別実装との比較、説明の改善にも使います。生成された変更は差分を読み、動作を確認し、自分で説明できるものだけ採用します。未理解のまま大きな機能を積み上げると、選考での修正課題や説明が難しくなります。

認証・権限、主要操作のテスト、README、エラー対応を削って見かけの完成だけを急がないようにします。判定に届かなければ週数を延ばし、選考は現時点の到達を正確に伝えながら進めます。

7〜9か月目は、Node.js・TypeScriptでAPIを自分で実装する範囲を増やし、SQL、DB設計、認可、トランザクション、結合テストを深めます。10〜12か月目は、Linux、Docker、デプロイ、ログ、障害の調査、バックアップからの復元、パフォーマンスを、小さなサービスの継続運用と結び付けて学びます。進度は就職先で扱う技術と担当業務に合わせます。

発展用Iとして、【Next.js】フルスタック開発基本講座(TypeScript/Prisma/Auth)【脱初心者/わかりやすさ重視】（世界のアオキ、11時間45分、更新表示2026年4月）も候補です。公開ページで個人向け定額プランの案内を確認しました。Reactの基礎ができ、サーバー側とブラウザー側の処理を区別できる段階で、App Router・DB連携・認証を学びます。半年の必須範囲には入れません。

半年の間は、ReactとVueの同時習得、複数のバックエンド言語、大規模なクラウド設計、Kubernetes、複雑な状態管理、資格取得を必須にしません。応募先で必要と分かったものを追加します。

第1週の成果は「自分で作ったHTMLページをGitHubに置き、その構造を説明できること」です。

第○週／日付：
予定時間・実際の時間：
今週の完了条件：
作ったもの・公開URL・GitHub URL：
自分で説明できるようになったこと（3つ）：
詰まったこと／再現方法／試したこと：
テスト・動作確認の結果：
他者やAIから受けた指摘と、自分の判断：
まだ未解決のこと：
次週の最優先（1〜3個）：

この記録とコードを使い、進み具合を「視聴した時間」だけで判断せず、作れること・直せること・説明できることから見直します。