Frontend Bootcamp

フロントエンド戦力化

ゴール 一人で画面実装 / React + API / コンポーネント設計 / テスト / GitHub公開
期間目安 1週間 = 1成果物(現場稼働は1ヶ月 = 1成果物)
スタイル 作りながら学ぶアウトプット型。課題ごとに「学ぶこと・やること・完了条件」を提示。

📦 モジュール一覧

ロードマップ順に学習

HTML / CSS

セマンティクスとモダンCSS(flex / grid / clamp / responsive)。

UIの基礎レイアウト

JavaScript

DOM操作・イベント・非同期処理を実装しながら理解。

ES202xfetch

React (UI)

コンポーネント設計・状態管理・アクセシビリティを学ぶ。

HooksDesign System

React (API)

データ取得・エラーハンドリング・テストまで含む実戦演習。

API連携E2E

🗺 進め方

迷わない7ステップ
1. 指示書を読むゴールと完了条件を把握
2. 学習内容を理解必要な知識を一気にキャッチアップ
3. 課題を実装手を動かすことを最優先
4. セルフチェックチェックリストで品質を確認
5. 提出GitHubに成果物を公開
6. 必要なときだけ質問効率よくブロッカーを外す
7. 週1レビューフィードバックで改善サイクルを回す

🧭 学習スタイル

アウトプット駆動

✔ 1週間 = 1成果物

  • 勉強ではなく「作る」が中心
  • 毎週アウトプットを提出
  • 現場稼働中は 1ヶ月 = 1成果物

✔ 課題は3点セット

  • 学ぶこと
  • やること
  • 完了条件

🧱 最初にやること

Kickoff

まずはWeb基礎モジュールから開始してください。 すでにHTML/CSSの経験がある場合は、JavaScriptまたはReactから着手してOKです。

🆘 詰まったとき

質問の前に

解決の手順

  1. エラー内容を確認
  2. 該当箇所を特定
  3. 公式ドキュメントを確認
  4. サンプルと比較
  5. それでも無理なら質問

質問テンプレ

  • やりたいこと
  • 現在の状況
  • エラー内容
  • 試したこと
  • わからない点