題材とゴール
この章でわかること: ここまでの知識を総動員して、実際に1つ作って公開します。 一度この流れを最後まで通すと、次からは題材が変わっても自力で進められます。
今回の題材:オリジナル機能つきTODOアプリ
Section titled “今回の題材:オリジナル機能つきTODOアプリ”題材は、シンプルで誰でも作りやすい TODOアプリ(やることリスト)です。ただし ただのリストではなく、自分の「普段のペイン(困りごと)」を解決する機能を1つ 盛り込みます。自分が本当に欲しいものだと、作る手も進み、改善のアイデアも湧きます。
このハンズオンのゴール
Section titled “このハンズオンのゴール”- 基本の TODO(追加・完了・削除)が動く
- 自分で選んだオリジナル機能を1つ入れる
- スマホで使いやすい
- 公開して、URLで誰かに触ってもらえる状態にする
- 環境構築が済んでいること(Node・Git・Claude Code デスクトップ版・ GitHub・Vercel のアカウント)。アカウント作成などの実作業は セットアップ手順にあります
- このハンズオンで使う構成: GitHub / Claude Code / Vercel / Next.js (作り方の路線はプロトタイプの作り方の選択肢参照。ここでは Next.js 構成で進めます)
このページ(題材とゴール)を読んだら、まずは次の基本の2ステップを通します。
基本を通したら、必要に応じて次の発展へ進みます(順不同・やりたいものから)。
- スマホで開く方法 — 実機で見せる・触ってもらうとき
- 発展:みんなで使えるよう保存する — 複数人・複数端末で使うためにDB保存へ
- 発展:提案書から動くPoCを作る — 提案スライドを起点に本格的なPoCを0→1で作る
それでは、作ってみるへ進みましょう。