WEEK 05
英単語フラッシュカードアプリを作る週 (前半)
自分専用の英語学習アプリ MVP を deploy
所要時間
Day 1: 45分 / 週合計: 約5時間
ツール
Lovable Pro + Supabase
費用
約3800円
とにおのひとこと
ここから「英語学習アプリ」のシリーズ。 これがこの教材の差別化軸。 他の教材じゃ作らない、「英語学習者でもある俺」だから作る角度。 まず Week 5 で MVP、Week 6 で AI 添削とかの高度機能を足す。
なぜ今週これをやるのか
英語学習アプリは Anki も Duolingo もいっぱいある。 でも「俺が作って俺が使う」だけで違うものになる。 自分が覚えたい単語、自分が見やすい UI、自分が続けたい仕組み。 そして Week 6 で AI 入れた瞬間「市販と並ぶ何か」になる。 Week 5 はその土台。
始める前に必要なもの
- Week 1-4 完了 (Supabase 接続 + 認証ができる状態)
- 自分が「今 覚えたい英単語」を 20個メモる準備。 本やニュース・ドラマで遭遇した単語
今週初めて出てくる言葉
分からない言葉が出てきたら、ここに戻って確認していい。 全部覚えなくていい、使ってるうちに自然に身につく。
フラッシュカード
片面に英語、裏に日本語が書いてあるカード。 めくって覚える、紙でやる人もいる。
学習履歴
いつ・どの単語を・正解したか/間違えたかの記録。 これがあると「忘れかけ単語を優先表示」できる。
スキーマ
DB のテーブル構造。 「単語テーブルにはこんなカラム」と決めること。 Lovable が決めてくれる。
CRUD (クラッド)
「作成・読込・更新・削除」の頭文字。 アプリの基本機能 4つ。 Week 5 で全部やる。
今週の卒業条件
自分の覚えたい英単語を Supabase に保存して、フラッシュカード式で復習できるアプリ。 自分が毎日 5分使える状態。
日々の進め方
各ステップに「なぜ」「やり方」「こうなれば成功」「詰まったら」がある。 焦らない、1日 1ステップでも OK。
Day 1
45分
アプリの「型」を Lovable で生成
1
新規プロジェクトを作る
なぜ
Week 4 のアプリに足してもいいが、英単語アプリは別物として独立させる方が頭が整理される。
やり方
Lovable で New Project、名前は「flashcard」「english-cards」など。
こうなれば成功
空のプロジェクト + 既存の Supabase 接続情報を Lovable に貼り直す。
2
フラッシュカードアプリのプロンプト(5分)
なぜ
一気に書く、Lovable が「型」を作ってくれる。 後で 1個ずつ調整する。
やり方
プロンプト:
「英単語フラッシュカードアプリを作って。
- 表側に英単語、裏側に日本語訳
- 画面をタップするとカードが裏返る
- 下に「知ってる」「知らない」の 2ボタン
- 単語追加ページを別に作る (英語入力欄 + 日本語入力欄 + 保存)
- データは Supabase に保存 (URL: [貼る]、anon key: [貼る])
- Google ログイン必須
- 過去 7日で「知らない」が多い単語を優先表示
- デザインは紙の単語帳っぽく、温かい色」
こうなれば成功
画面に最初のバージョンが出る。 Lovable が SQL も生成、Supabase に貼って実行。
成果物: カードめくれる画面 + 単語追加ページ
Day 2-3
計 1.5時間
自分の単語を 20個入れる
1
自分が「今 1番覚えたい英単語」を 20個書き出す
なぜ
汎用 TOEIC 単語帳じゃない、「俺がハマってる単語」が core。 これが Anki/Duolingo との最大の差別化。
やり方
本・ニュース・ドラマで遭遇したけど思い出せない単語、20個。 例:「procrastinate」「ambivalent」「reluctant」「inevitable」など。 思いつかないなら、最近読んだ英語記事を見返して引っかかった単語を集める。
こうなれば成功
20単語のリストがある。
2
アプリの「単語追加」ページから 20個入れる
なぜ
実際に入れる作業 = アプリの最初のテスト。 ここで「入力が面倒だな」と気付いたら、それが Week 5 の修正ポイント。
やり方
アプリで Google ログイン → 単語追加ページ → 20個ひたすら入れる。 約 30分。
こうなれば成功
20単語が Supabase に入った。 Table Editor で確認。
詰まったら
入力が遅い・面倒: 「単語追加ページで Tab キーで次の欄に移動できるようにして」など UX 改善プロンプト。
成果物: 20単語入った DB
Day 4-5
計 1.5時間
「学習履歴」機能を足す
1
学習履歴を記録するプロンプト
なぜ
「知ってる」「知らない」ボタン押したときに、その記録を保存する。 これで「最近間違えた単語」を割り出せる。
やり方
プロンプト:
「フラッシュカードで「知ってる」「知らない」ボタン押したときに、Supabase に study_records テーブルを作って記録して。 カラムは: user_id, word_id, result (correct/incorrect), created_at。 アプリ起動時に過去 7日で「知らない」回数が多い単語を優先表示」
こうなれば成功
学習履歴が記録される、優先順位が変わる。
2
5分使ってみて履歴を作る
なぜ
使ってみないと挙動が分からない。
やり方
20単語をカードめくって、「知ってる」「知らない」を全部押してみる。 Supabase Table Editor で study_records テーブルを見る、20件記録が入ってる。
こうなれば成功
記録が入ってる、優先表示が動いてる。
成果物: 学習履歴ありフラッシュカード
Day 6-7
計 1時間
毎日 5分使う + UI 仕上げ
1
毎日 5分そのアプリを使う
なぜ
実際に英語勉強する。 自分が作ったツールで自分が学ぶ、これ初体験のはず。
やり方
通勤・休憩・寝る前 5分。 自分のアプリで自分の単語を回す。
こうなれば成功
3日連続で 5分使えた。
2
使ってて引っかかった UI を直す
なぜ
実使用での気付きが最高の修正ネタ。
やり方
「カードめくる時の動きをもうちょっとゆっくり」「ボタンを下じゃなく横に」など、細かい修正。 1日 1個ずつでいい。
こうなれば成功
2-3回修正できた。
3
Week 5 卒業ツイート
なぜ
区切り。 「英語学習アプリを自作した」事実を残す。
やり方
例:「Week 5 終わった。 英単語アプリ自作した、毎日 5分使ってる: [URL]。 不格好だけど、俺の単語、俺の UI、俺のアプリだ」
こうなれば成功
X 投稿。
成果物: 毎日使える単語アプリ
つまずきポイント (先回り Q&A)
詰まったらここを読む。 答えがなければ Discord か X で聞いていい。
Q. アプリに入れる単語をどこから持ってくる?
A. 初日は手入力。 自分が「英語ニュース読んでて止まった単語」「ドラマで聞いて分からなかった単語」を 20個メモから入れる。 Week 6 で AI 自動抽出を追加する。
Q. これって Anki と何が違う?
A. 違う、で正解。「Anki でいいじゃん」って思った瞬間に Week 5 は失敗。 「俺が作った」が違い。 そして Week 6 で AI 添削入れた瞬間 Anki にない機能になる。
Q. デザインがダサい
A. 「Cinema っぽく」「江戸時代の本っぽく」「Notion っぽく」みたいに参考を具体的に Lovable に。 自分の好きな世界観で。
Q. 動作が遅い
A. Supabase 無料枠は十分速い。 遅いとしたら Lovable のプロンプト後の再生成中。 待つ。
Q. 単語数を 100、500 と増やしたい
A. OK、Supabase 無料枠で 10万単語くらいは入る。 ただし最初は 20個から始めて、毎日 5個ずつ追加するペースが続く。 一気に 500 入れても消化できない。
Q. 優先順位 (「忘れかけ単語」を上に) が動いてない
A. 「優先順位ロジックが効いてない、最近「知らない」を 3回押した単語が次に出るように直して」と再プロンプト。
Q. カードめくるアニメーションがダサい
A. 「カードめくりのアニメをもっと滑らかに、本物の紙っぽく」とプロンプト。 Framer Motion か CSS transition が使われる、Lovable がやる。
卒業チェック
自作の英単語アプリで実際に英語勉強した、3日以上連続で使った。
週末のとにお
Week 5 終わった人は「自分用学習ツールを作れる人」になった。 これ世の中の英語学習者の 0.1% もできない。 ここまで来たら「商売の種」が見えてくる。 ただし焦らない、Week 6 で AI 入れてからが本番。
次の週に向けて
Week 6 で AI 機能を追加。 例文を ChatGPT に作らせる、英作文を AI が添削、こういう「AI 連携機能」を 1〜2個足す。