WEEK 02
ボタンを押したら数字や状態が変わるアプリを作る週
TODO リストかカウンター、好きな方を 1個
所要時間
Day 1: 30〜45分 / 週合計: 約3時間
ツール
Lovable (無料枠で粘れるが、Pro $25 検討開始)
費用
0〜約3800円
とにおのひとこと
Week 1 は「表示」だけだった。 Week 2 で「機能」を持つ。 ボタン押したら数字が変わる、入力したら下に並ぶ、これが「アプリ」の最小単位。 ここで「あ、コードって裏で動いてるのか」って感覚が初めて出る。 でもまだコードは見ない、Lovable に「こうして」と言うだけ。
なぜ今週これをやるのか
ただ見せるだけのページと「機能のあるアプリ」の差はめちゃくちゃ大きい。 機能を 1個持った瞬間「使える道具」になる。 そして Week 2 で作ったものを実際に毎日使うと、Week 3 以降が現実味を帯びる。 「俺はアプリ作って毎日使ってる人」になる。
始める前に必要なもの
- Week 1 完了 (lovable.dev に Sign in できる、プロジェクト作れる、Preview と Publish できる)
- Lovable 無料枠 5メッセージ/日 で今週いけるか、Pro $25 にするか、自分で決める
今週初めて出てくる言葉
分からない言葉が出てきたら、ここに戻って確認していい。 全部覚えなくていい、使ってるうちに自然に身につく。
アプリ (Web アプリ)
ボタン押すと何か起きる Web ページ。 ホームページが「読むだけ」、アプリは「触ると変わる」。
リロード
ページを再読み込みすること。 ブラウザの↻ボタン、または F5キー。
ローカル保存 (localStorage)
自分のブラウザの中に小さくデータを保存する仕組み。 リロードしても消えない。 ただし別の PC や別のブラウザでは見えない、それは Week 4 で解決する。
TODO アプリ
「やることリスト」を入れて、終わったらチェックして消すアプリ。 アプリ作成の入門の定番。
クレジット (Lovable のクレジット)
Lovable Pro で使える「メッセージ枠」。 月100クレジットで、アプリ 1個 MVP に 150-300クレジット使うのが平均。 Pro に上げる目安。
今週の卒業条件
「ボタン押す → 画面が変わる → リロードしても消えない」アプリを 1個 deploy。 自分用 TODO や、子供のおこづかい記録など、何でも 1個。
日々の進め方
各ステップに「なぜ」「やり方」「こうなれば成功」「詰まったら」がある。 焦らない、1日 1ステップでも OK。
Day 1
30〜45分
カウンターアプリを作る (アプリ作成の入門中の入門)
1
新しいプロジェクトを作る
なぜ
Week 1 のホームページに足してもいいけど、別プロジェクトにすると頭が整理される。 「アプリは個別」と分けるのがコツ。
やり方
lovable.dev で Sign in、New Project。 名前は「counter」「カウンター」「数字いじり」とか何でも。
こうなれば成功
新しい空のプロジェクトが開いた状態。
2
カウンターアプリを作るプロンプト(5分)
なぜ
「数字を増やしたり減らしたりするだけ」のアプリ。 アプリ作成の世界の「Hello World」。 シンプルだけど機能が 4つある (表示、+1、-1、リセット)。
やり方
プロンプト例:
「画面の真ん中に大きな数字 0 を表示。 その下に +1 ボタン、-1 ボタン、リセットボタンを 3つ並べて。 +1 を押すと数字が 1増える、-1 で 1減る、リセットで 0 に戻る。 シンプルでミニマル、フォントは丸ゴシック」
こうなれば成功
画面に大きな 0、その下にボタン 3つ。 押すと数字が変わる。
詰まったら
「数字が変わらない」: もう一度同じプロンプトに「ボタン押しても変わらない、直して」と追加。 たまに 1回目で失敗、2回目で動く。
3
実際にボタンを押して遊ぶ(5分)
なぜ
「動いた」を体感する。 これが Week 2 の本体。
やり方
+1 を 100回連打して 100にしてみる。 -1 で 0 まで戻す。 リセットを押して確認。 子供がいたら見せる、これ俺が作ったって。
こうなれば成功
「あ、本当にアプリだ」って感じる瞬間がある。
4
Publish して URL を持つ
なぜ
Week 1 と同じ手順。 でも今回は「アプリ」の URL。
やり方
Publish ボタン。 URL コピー。 X か LINE で家族に「これ俺が作ったカウンター」と送る。
こうなれば成功
別の端末から URL 開いて、ボタン押せる、これで成功。
成果物: カウンターアプリの URL
Day 2-4
計 2時間 (3日に分けてゆっくり)
TODO リストアプリに昇格させる
1
「入力欄を追加して、入れたタスクが下にリストで出る」プロンプト
なぜ
入力 → 表示の流れを覚える。 アプリの最も基本のパターン。
やり方
同じプロジェクトのまま (または新規プロジェクトで)、プロンプト:
「画面の上に文字を入れる欄と「追加」ボタン。 押すと入れた文字が下にリストで並ぶ。 デザインはミニマル」
こうなれば成功
入力欄が出てる、何か打って追加押すと下に並ぶ。
詰まったら
「並ばない」: 「追加したタスクが下に並ばない、修正して」と再プロンプト。
2
「完了でチェック、押したら消える」追加
なぜ
これで完成形に近づく。 ひとつずつ機能を足す感覚を体験。
やり方
プロンプト:
「各タスクの横にチェックボックスを追加。 チェック入れると線が引かれる。 もう一度押すと消える」
こうなれば成功
タスクにチェック入れたら線が引かれる、消すボタンで消える。
3
「リロードしたらタスクが消える問題」に気付く
なぜ
ここで初めて「データを保存する」概念に出会う。 Web ページは普通、リロードすると全部消える。 これを解決するのが「ローカル保存 (localStorage)」、Week 4 で本格 DB を扱うけど、今週はローカルで足りる。
やり方
タスクを 3個入れて、ページをリロード (F5 か ↻ボタン)。 全部消える。 これが普通の挙動。 これを「保存」したい。
こうなれば成功
「あ、消える、これ困る」と気付く。
4
「ローカル保存」を追加するプロンプト
なぜ
ブラウザに小さくデータを保存する。 「localStorage」という仕組みを使う、でも自分で書かない、Lovable がやる。
やり方
プロンプト:
「リロードしてもタスクが消えないように、localStorage に保存して」
こうなれば成功
タスク入れてリロード、まだ残ってる。 これで「俺の TODO」になる。
詰まったら
「localStorage って何?」: ブラウザの中の小さい保存箱、と覚えていい。 詳しい中身は知らなくていい、Lovable がやる。
成果物: 使える TODO アプリ (リロードしてもタスクが消えない)
Day 5-7
計 30分
実際に自分の生活で使う
1
明日の TODO を実際に入れて、明日 1日使う
なぜ
使わないと意味ない。 「Google Keep でいいじゃん」って声を心の中で潰す。 「俺が作ったアプリで俺が動く」体験が次のモチベ。
やり方
明日やること 3個入れる。 「ジム」「コーヒー豆買う」「英語10分」みたいに何でも。 明日 1日、Google Keep じゃなく自分のアプリを使う。
こうなれば成功
1日使い切れた、または途中で Google Keep に戻った、どっちでも OK、気付きが財産。
2
使ってて気付いた不満を 3個メモる
なぜ
Week 3 のお題に使う。 「時間入れたい」「カテゴリ分けたい」「家族と共有したい」など。
やり方
紙でも Notes でも、3つの不満を書く。 ぐちゃっとした書き方でいい。
こうなれば成功
不満 3個メモがある。
成果物: 不満メモ 3個
つまずきポイント (先回り Q&A)
詰まったらここを読む。 答えがなければ Discord か X で聞いていい。
Q. Lovable の無料枠で Week 2 が終わらない
A. Pro に上げる ($25 ≒ 月3800円)。 ただし「明日まで待てる」なら無料枠は毎日リセットなので焦らない。 焦って Pro に上げる前に、必要メッセージ数を確認する。
Q. プロンプト書いたけど期待と違う画面が出る
A. もう一度同じ意図を別の言い方で書く。 「ボタンを下じゃなく横に並べて」「数字をもっと大きく」など、具体的に。 1回で完璧は AI も無理。
Q. コード見ろって言われたけど読めない
A. 読まなくていい。 Lovable は左に画面、右にコードを表示するが、Week 2 ではコード側は無視。 「結果」だけ見て、結果が違ったらプロンプトで修正。
Q. TODO アプリなんて世の中に腐るほどあるじゃん
A. 腐るほどある、でもそれ「世の中の TODO」、これは「俺の TODO」。 全然違うもの。 Week 5 で英語学習アプリ作るとき、この経験が全部効いてくる。
Q. localStorage で十分なんじゃない?
A. PC 1台で 1人で使うなら十分。 でも別の PC や別のブラウザでは見えない、家族と共有もできない。 それを Week 4 で「本物の DB (Supabase)」で解決する。 今週はローカルで OK。
Q. 「リセットボタン」押したら全タスク消えた、戻せない
A. 戻せない (今は)。 これも普通の挙動。 「リセットは全消し」と覚える。 嫌なら「リセット押す前に確認ダイアログ出して」とプロンプトで追加できる、これも Week 2 の学びになる。
Q. 「機能 1個ずつ追加」って言うけど、めんどくさい
A. めんどくさいけどこれが鉄則。 「TODO + チェック + ローカル保存 + 並び替え + カテゴリ + ダークモード」を 1回でお願いすると、AI が混乱して半分動かないものを作る。 1機能ずつ、確認しながら積む。
Q. Week 2 の卒業ツイートは何書く?
A. 例:「Week 2 終わった。 TODO アプリ作って自分用に使ってる。 ボタン押したら何か起きる、これが「アプリ」って感覚わかった。 URL: [貼る]」
卒業チェック
TODO アプリ (またはカウンター) の URL を X か LINE に貼って、家族か友達 1人に見せた。
週末のとにお
Week 2 終わった人、Week 1 より大きな壁を越えた。 「機能のあるアプリ」を作れる人になった。 ここまで来たら戻れない、戻る必要もない。 Week 3 では「自分の生活で本当に使うツール」を作る。 ここから「俺だけの道具」を作る世界に入る。
次の週に向けて
Week 3 は「自分の生活で 1日1回使うツール」を 1個作る週。 妻にメッセージ自動生成でも、子供の小遣い記録でも、自分が欲しかったツール何でも。