このユニットのゴール
自分で企画したWebアプリを、設計 → 実装 → テスト → 公開まで完走し、README とポートフォリオにまとめて発表する。
進め方の地図
| 週 | やること | 仕上がるもの |
|---|---|---|
| 1週目 | 授業1: 企画 ― 何を作るか決める | 企画シート1枚 |
| 2週目 | 授業2: 設計 ― 作る前に割る | 画面・データ・週計画の3点 |
| 3〜6週目 | 実装 ― 週ごとのマイルストーン | 毎週、動くデモ |
| 7週目 | 授業3: テストと磨き | 検査済みのアプリ |
| 8週目 | 授業4: README・ポートフォリオ・発表 | 公開URL + 発表。修了! |
授業1: 企画 ― 小さく決める勇気
卒業制作の成否は、企画の大きさでほぼ決まります。合言葉は「最小で動くもの (MVP) をまず作り、余った時間で育てる」です。
例題 (リードつき) | 企画シートを書く
- お題を選ぶ迷ったら、この候補から選んでOKです ― 服薬・体調の記録アプリ / 事業所の作業手順ガイド / 持ち物チェックアプリ / 学習時間の記録と振り返り / 家計のミニ記録帳。自分や身近な人の困りごとが、一番語れる題材です。
- 4行で企画にする「①誰の ②どんな困りごとを ③どう解決する ④完成の証拠は何か」を1行ずつ書きます。例: ①薬を飲み忘れがちな自分の ②飲んだか思い出せない不安を ③朝昼晩のチェックと記録で解決する ④1週間分の記録が見られたら完成。
- 機能を2つの箱に分ける「ないと成立しない機能 (最大3つ)」と「あったらうれしい機能 (いくつでも)」に分けます。前者だけがMVPです。
- スタッフに見せて1回削る企画は必ず膨らみます。第三者に見せて、最初に1回しぼんでおくのが完走の保険です。
技術の制約 (大事): GitHub Pagesで公開するため、データ保存はlocalStorage、外部データは無料の公開APIまで、が今回の道具立てです。ユニット5のサーバーを使いたい場合は、「手元デモ + 画面録画」での提出もOKとします。
授業2: 設計 ― 作る前に割る
例題 (リードつき) | 設計3点セットを作る
- 画面リスト紙に画面の手描きラフを描きます。MVPなら、たいてい1〜3画面に収まります。収まらないなら企画が大きすぎる合図です。
- データ設計アプリが扱うデータを「オブジェクトの形」で先に決めます。例:
{ date: "2026-06-13", time: "朝", taken: true }。データの形が決まると、コードの半分は決まったも同然です。 - 週計画4週の実装期間に機能を割り当てます。定番の順番は「3週目: 画面の骨組みと表示 / 4週目: 追加・保存 / 5週目: 一覧と振り返り / 6週目: 予備週 (遅れの吸収と磨き)」。予備週を必ず置くのがプロの計画です。
- 毎日の回し方を決める「作業の最初にToDoを3つ書く → 終わりに1コミット + 明日の最初の一手をメモ」。明日の自分への申し送りがあると、再開のハードルが激減します。
実装の4週間 ― 完走のための約束
3〜6週目は実装に没頭します。守る約束は4つだけです。
- 週の終わりに、必ず「動くもの」を見せる未完成で構いません。「今週はここまで動く」を毎週スタッフにデモします。動くものを軸に進むと、迷子になりません。
- 15分ルールを使う詰まったら、エラー文とコードをAIに貼って前に進みます。卒業制作は「調べながら作る練習」でもあります。何をAIに聞いたかをメモしておくと、発表の良い材料になります。
- スコープを切る勇気を持つ遅れたら、機能を削ってMVPを守ります。「削る判断ができた」は、発表で堂々と語れる実務スキルです。
- 毎日コミットする区切りごとに
add → commit → push。コミット履歴は、あなたの2ヶ月の航海日誌になります。
授業3: テストと磨き ― 他人の指は最高の検査機
例題 (リードつき) | 出荷前検査をかける
- 検査ケース表ユニット4の型で「正しい操作・変な操作・空っぽの状態」の表を作って全部試します。特に「初めて開いたとき (データゼロ)」の画面は、作者が一番見落とす場所です。
- Lighthouseアクセシビリティ90点以上に整えます。
- 他人テストスタッフか他の利用者さんに、説明なしで2分間使ってもらい、詰まった場所をメモします。1か所だけ選んで直します (全部直そうとしないこと)。
- スマホ実機テスト公開URLを自分のスマホで開き、タップの気持ちよさまで確かめます。
授業4: README・ポートフォリオ・発表
作品は、説明がついて初めて「見てもらえる作品」になります。READMEは、リポジトリの玄関に置く説明書です。
例題 (リードつき) | READMEの定番構成で書く
- README.mdを作るリポジトリ直下に置くと、GitHubが自動で表示してくれます。構成はこの順です ― アプリ名とひとこと / スクリーンショット / 公開URL / 主な機能 (3つ) / 使った技術 / 工夫した点 / 作者。
- スクリーンショットを貼る画像をリポジトリに入れて
と書きます。README に画像があるだけで、読まれる確率が大きく変わります。 - 「工夫した点」は4行の型で課題 → 考えたこと → 工夫 → 結果。デザインコースの作品説明と同じ型 (pd-06 参照) が、コードの世界でも通用します。
- ポートフォリオページを作るこれまでの作品 (模写・3作品のはしご・ToDo・掲示板・卒業制作) をカード一覧にした1ページを作り、GitHub Pagesで公開します。あなたはもう、この程度のページは半日で作れるはずです。
- 5分の発表構成は「①企画 (誰のどんな困りごとか) → ②デモ (2分) → ③工夫と苦労 → ④削った機能と、次にやりたいこと」。④まで話せる人は、現場で計画を任せられる人に見えます。
発表会 ― そして修了へ
卒業制作の提出
発表を終えたら、コースのページの「コース修了のチェック」5項目を確認しましょう。全部にチェックがついたら、フロントエンドコース修了です。10ヶ月前、コピーしたコードを1か所変えるのにも緊張していた自分を思い出してください。いまのあなたは、企画から公開まで一人で運べる人です。おめでとうございます。
修了後の道: Goalページの「卒業後の道」へ。実務未経験可の求人・クラウドソーシングの小さな案件・A型での実案件、どこへ出しても恥ずかしくない「公開URL + README + 緑の草が生えたGitHub」が、もう手元にあります。
つまずきやすいポイント
途中で企画がつまらなく感じたら: 制作の中だるみは全員に来ます。乗り換えたくなった企画のアイデアは「次回作メモ」に書いて、今の企画はMVPまで完走しましょう。「完走したことがある」は、何よりの自信と実績になります。
完成度に自信が持てないとき: 比べる相手は世の中のアプリではなく、10ヶ月前の自分です。そして採用側が見たいのは完成度より「過程を語れるか」です。航海日誌 (コミット履歴) が、あなたの味方です。
発展チャレンジ (余力のある方へ)
発展チャレンジ
- 卒業制作に「あったらうれしい機能」を1つ足して、v2としてリリースしてみましょう (GitHubのRelease機能も調べてみましょう)。
- JavaScriptのフレームワーク (ReactやVue) の入門ページを読んで、「自分の卒業制作をReactで作るとどこが楽になりそうか」を想像メモにまとめてみましょう。次の学習の地図になります。
- TypeScriptという「型のあるJavaScript」を調べてみましょう。求人票によく出てくる名前の正体を知っておくと、進路の解像度が上がります。