🚀
実践プロジェクト
2週間 中級学んだことを総動員して、1つの作品を作る。
概要
これは何？
HTML、CSS、JavaScriptを組み合わせて1つのWebアプリを作る。
なぜ重要？
実践で身につく。ポートフォリオに。
何を学ぶか
- プロジェクト設計
- 段階的実装
- 公開方法
詳細解説
設計の考え方
何を作るか→機能リスト→優先順位→小さく作る。
公開の方法
GitHub Pages、Netlify、Vercelで無料公開。
実践手順
- 1 要件とワイヤーフレームを紙に描く 10分
いきなりコードを書かず、「何ができるか」「どんな画面か」を整理します。
- 作るアプリ（例：ToDoリスト）を決める
- 必要なデータ（タスク名、完了フラグなど）を書き出す
- 紙に画面のラフ画（箱とボタンの配置）を描く
- 2 最小限のHTML/CSSモックを作り機能を入れる 数時間
デザインに凝る前に、データが動くかどうかを優先的に実装します。
- 最初はボタンがダサくてもいいのでHTMLとJSを繋ぐ
- データの追加・表示・削除のコア機能だけをJSで完成させる
- Consoleへのエラーが出なくなってから、CSSで本番の装飾を行う
- 3 インターネットに公開する（デプロイ） 15分
完成した作品を、自分以外の人（世界中）が見られるようにサーバーに乗せます。
- GitHubにアカウントを作る
- ファイルをGitHubの「リポジトリ」にアップロードする
- 「GitHub Pages」機能のSettingsからデプロイをONにする
- 発行されたURLをスマホで開いてみる
よくある質問
- 最初のポートフォリオって何作ればいいの？
- 初心者のド定番は「ToDoリスト」「タイマー」「天気表示（API連携）」あたり。定番すぎ？って思うかもだけど、大事なのは「コードの綺麗さ」とか「スマホでも崩れないか」なので、奇をてらわなくても基礎力は十分アピールできます！
- エラー出た時、どうやってググるのが正解？
- 「JS ボタン 押せない」みたいなポエムで検索するのはNG！「JavaScript addEventListener function null」みたいに、赤い文字のエラーログをそのままコピペして検索するのがプロの技。最近はChatGPTに丸投げしちゃうのが一番手っ取り早いです！
- 作ったアプリをサクッと公開できる無料の神サービスある？
- GitHub Pages、Netlify、Vercelあたりが現代の三種の神器ですね。「独自ドメイン（おれの名前.com みたいな）」を買わない限り、一生無料で爆速の公開環境を維持してくれるバグレベルの神サービスです。
- ここまで終わった！フロントエンド極めるなら次はどれ？
- お疲れ様です！次は「React」か「Vue.js」っていう流行りのフレームワークに手を出すか、型安全の神である「TypeScript」を学ぶのが王道ルート。あとはチーム開発必須スキルの「Git/GitHub」ですね。ようこそ地獄へ！
① 解説を読んだ。次は② 演習する。
おめでとうございます！実務レベルまで到達しました。
React、TypeScriptなど次の技術に進みましょう。