単語カード・クイズアプリの作り方｜AIに4回頼んで復習機能つき

AI（Claude）が書き、運営者が確認して公開した記事です。分担と確かめたもの →

英単語・歴史の年号・資格試験の用語など、「問題と答え」の組をくり返し覚えたいときの単語カードを、ブラウザで動く小さなアプリにします。AIのチャットに日本語で頼むだけで作れて、インストールは要りません。

デモを開いて試す → 完成版の HTML をダウンロード（MIT）

ダウンロードしたファイル（flashcard-quiz.html）は、パソコンならダブルクリックするとブラウザで開きます。中身を書き換えたいときは、メモ帳などで開いて保存し直します（MIT ライセンス。ライセンスの説明）。

デモには見本の英単語5問が入っています。そのまま「スタート」を押すと動きます。

スマホで読んでいる人へ: このレシピの保存の手順はパソコン向けです。スマホでは、上のデモをそのまま使うか、ブックマークしてください。

このレシピは、AI（Claude）が作って確かめた記録です。AIが「はじめての人がAIに送りそうな文」を想定し、その頼み方どおりにコードを書き、テストとブラウザで確かめて、見つかった不具合を直しました。

先に結論：出題は簡単、手間がかかるのは「貼り付けた文」と「くり返し」

1問ずつ出して「わかった」「わからなかった」を数えるだけなら、AI（Claude）の1回目のコードで動きました。手間がかかったのは、次の2か所です。

• 貼り付けた文の読み取り: 最後の行のあとに改行があるだけで、空っぽの問題が1問増え、答えに「undefined」と出た。答えの中のカンマで、答えが途中で切れた
• わからなかった問題のくり返し: くり返すたびに数え直すので、最後の画面が「1問中 1問わかりました！」になり、最初に何問あったのかが消えた

最後に改行がある文・カンマ入りの答えを貼り、わからなかった問題をくり返すと、2つとも見つかります。見本の5問を1回解くだけでは気づきません（貼って確かめる文は、下の「AIへの頼み方」の各回にあります）。

このレシピでやること

HTML はページの中身、CSS は見た目、JavaScript は動き（ボタンを押したときの処理）を書くための言葉です。この3つを1つのファイルにまとめてもらいます。

AIへの頼み方：4回の文と、そのたびに分かったこと

下の文は、コピーしてそのままAIのチャットに貼り付けられます。AIの答え方は毎回少しずつ違うので、出てくるコードがこのレシピと同じになるとは限りません。違っていても、保存して開き、決めた文を貼り付けて確かめるところは同じです。

AIのチャットをどこで開けるかは「生成AIで何ができる？」にまとめています。

1回目：最小限の単語カードを作ってもらう

単語カードのクイズアプリを作ってください。
「問題,答え」の形で1行に1問ずつ貼り付けると、カードができます。
1問ずつ問題を出して、「答えを見る」を押すと答えが出ます。「わかった」「わからなかった」を押して次の問題に進み、最後に何問わかったかを表示してください。
HTML・CSS・JavaScriptを1つのファイルにまとめて、外部のライブラリやインターネットへの接続は使わないでください。
出題や採点の部分は、画面の処理とは別の関数に分けてください。

最後の1行は、出題や採点の部分だけを取り出して確かめやすくするためのお願いです。関数とは「値を渡すと答えを返す、ひとまとまりの処理」のことです。

答えを保存して開く

AIの答えの中のコード（<!DOCTYPE html> から </html> まで）をコピーし、メモ帳に貼り付けて flashcard.html という名前で保存し、そのファイルをダブルクリックするとブラウザで開きます。Windows のメモ帳と Mac のテキストエディットでの保存手順は、「ポモドーロタイマーの作り方」の「答えをファイルに保存して、ブラウザで開く」に詳しく書いています。

開いたら、この5つを貼り付けてみる

AI（Claude）が1回目のコードで実際に試した入力です。

undefined は「値が入っていない」という意味で、JavaScript が返す値です。表計算ソフトやメモ帳からコピーすると、最後に改行が付いていることはよくあります。

ほかに2つ見つかりました。

• 問題に <b>bold</b> のような記号を入れると、文字ではなく太字として表示された。記号の並べ方によっては、貼り付けた文の中の命令（スクリプト）が動く。ブラウザの中で、画像の読み込みに失敗したときに動く命令を入れたところ、ページの題名が書き換わった
• スマホの幅（320px）を再現して開くと、ページ全体が980px幅として縮小され、文字が小さく表示された。スマホ向けの幅の指定（viewport）が入っていなかったため

2回目：貼り付けた文を正しく読んでもらう

次の4つを直してください。
1. 最後の行のあとに改行があると、空っぽの問題が出て、答えに「undefined」と出ます。空の行は飛ばしてください。
2. 答えにカンマが入っていると（例: set,置く,設定する）、答えが「置く」だけになります。1つ目のカンマより後ろは全部答えにしてください。全角の「，」や、表計算ソフトから2列をコピーして貼ったとき（タブ区切り）も読めるようにしてください。
3. 問題が1つもないときや、カンマのない行があるときは、スタートせずに何行目がおかしいかを表示してください。
4. 問題に <b>bold</b> と書くと太字で表示されます。書いたとおりの文字で出してください。それと、スマホで開くと文字が小さすぎるので、スマホの幅でも読めるようにしてください。

「1.」〜「4.」の「」の中は、自分の画面に出た表示に書き換えます。何をしたら、どうなったかをそのまま書くと、AIは直す場所を探しやすくなります。

「4.」で直したのは、表示のしかたです。1回目のコードは、貼り付けた文を HTML として画面に入れていました（innerHTML）。2回目では、ただの文字として入れる書き方（textContent）に変わり、<b> も画像の命令も、書いたとおりの文字で出るようになりました。自分で使うだけのアプリでも、人から受け取った問題の一覧を貼ることはあるので、直しておくと安心です。

区切りを日本語の読点「、」にしなかったのは、問題や答えの中に「、」が入ることが多いためです。「こんにちは、元気？,Hello」が「こんにちは」で切れてしまいます。

3回目：わからなかった問題だけをくり返す

次の3つを足してください。
1. 最後まで答えたら、「わからなかった」を押した問題だけをもう一度出すボタンをつけてください。全部わかるまでくり返せるようにしてください。
2. 問題の順番をシャッフルするかどうかを選べるようにしてください。
3. 貼り付けた問題を、次に開いたときも残るようにしてください。保存できないブラウザでも動くようにしてください。

「3.」の保存には、ブラウザの中に小さなデータを残す仕組み（localStorage）が使われました。保存先はそのパソコンのそのブラウザの中だけで、インターネットには送りません。ブラウザの設定によっては保存が止められていて、保存の仕組みを読もうとするだけでエラーになります。エラーが起きると、同じ <script> の中のそれより後ろの処理は動きません。AI（Claude）は保存の部分を「失敗しても無視する」書き方（try/catch）で囲んだコードを返しています。保存の仕組みを読もうとするとエラーになる状態をブラウザの中で再現して開き、エラーが0件で最後まで解けるところまで確かめました。

3回目で見つかった不具合：最後の画面が「1問中 1問」

次の表は、見本の5問で apple と dog を「わからなかった」にして、くり返した結果です。

くり返すたびに、その回の問題数で数え直していました。最後の画面だけを見ると、何問の中から何問覚えたのかが分かりません。

もう1つ、幅320pxで長い英単語（pneumonoultramicroscopicsilicovolcanoconiosis、45文字）を出すと、単語がカードからはみ出し、ページの幅が606pxに広がって横にずれました。英単語は途中で折り返さないのがブラウザのふつうの動きです。

4回目：結果の出し方と、スマホの見た目を直す

次の3つを直してください。
1. 最後の結果が「1問中 1問わかりました！」になり、最初に何問あったのかが分かりません。最初の問題数と、1回目でわかった数、全部わかるまでに何回かかったかを表示してください。
2. スマホの幅で長い英単語（例: pneumonoultramicroscopicsilicovolcanoconiosis）を出すと、カードからはみ出して画面が横にずれます。カードの中で折り返してください。
3. 「わかった」「わからなかった」のボタンの幅がばらばらです。スマホでも押しやすいように、同じ大きさで横いっぱいに並べてください。

AI（Claude）は、回ごとの結果を順にためておき、最後にまとめて出す作りに変えました。さっきと同じ答え方をすると、最後の画面は次のようになります。

全5問中、1回目でわかったのは 3問。3回目で全部わかりました！
1回目: 5問中 3問わかった
2回目: 2問中 1問わかった
3回目: 1問中 1問わかった

長い単語はカードの中で3行に折り返し、ページの幅は320pxのままになりました。ボタンは幅130px・高さ48pxの2つが横に並びます。頼んでいない変更として、「わかった」を緑・「わからなかった」を赤の枠にする色分けと、暗い画面設定（ダークモード）への対応も入りました。

できたもの

完成品は /demos/flashcard-quiz/ で実際に動かせます。出題と採点のテストは quiz.test.mjs です。

• 「問題,答え」を1行に1問ずつ貼り付けて「スタート」を押すと、1問ずつ出る
• 区切りは半角の「,」、全角の「，」、タブ（表計算ソフトから2列を貼った形）のどれでも読める。答えの中のカンマはそのまま残る
• 「答えを見る」→「わかった」「わからなかった」で次へ進む
• 最後に「わからなかった問題だけもう一度」を押すと、その問題だけでもう1回まわる。全部わかるとボタンが消える
• 順番のシャッフルを選べる（最初は「シャッフルする」にチェックが入っている）
• 貼り付けた問題は、そのブラウザの中に保存され、次に開いたときも残る
• 欄の下に、いま読める問題が何問あるか（「20問」など）と「欄を空にする」ボタンが出る（スマホで見本を消しやすくするために 2026年10月23日に追加。保存が変わるのは「スタート」を押したときだけ）
• 1つの HTML ファイル（約13KB）だけで動き、入れた問題はインターネットに送らない

確かめたこと

完成版を確かめた方法は、次の2つです。

• 出題と採点のテスト 19件: Node.js（JavaScript をブラウザの外で動かす道具。v24.19.0）の標準のテスト機能で実行し、19件すべて合格しました。テストは HTML ファイルの中の出題・採点の部分をそのまま読み込むので、置いているファイルそのものを検査しています
• 読み取り: 最後の改行・空行・前後の空白、答えの中のカンマ、全角の「，」、タブ、Windows の改行、区切りの無い行（何行目かを示すエラー）、空欄、<b> などの記号
• 出題: シャッフルしないと貼った順、シャッフルしても問題の数と中身が変わらない（乱数を変えて200回）
• くり返し: わからなかった問題だけが次の回に出る、3回目で全部わかったときの結果の文、1回目で全部わかったら「もう一度」を出さない、答え終わる前は次の回を作らない
• 総当たり: 1〜8問それぞれで、わかった・わからなかったの全組み合わせ（510通り）をくり返し、毎回最後に「全部わかった」で終わり、最初の問題数が結果に残ることを確認
• ブラウザで操作: アプリ内ブラウザ（Chromium 152 系）でスマホの幅320pxと375pxを再現し、見本の5問を「2問わからない → 1問わからない → 全部わかった」の3回で解きました。どの画面でも横にはみ出す表示はなく、ページのエラーは0件でした。保存が止められた状態の再現でも、エラー0件で最後まで解けました

テストのファイルは、Node.js が入っていれば node --test quiz.test.mjs で動きます（完成品の HTML と同じフォルダに置いた場合）。AIが書いたコードが違う形なら、このテストはそのままでは使えません。その場合は上の「5つの貼り付け」と、くり返しの3回を手で試してください。

⚠️ 実機のスマホ（iPhone・Android）では試していません。スマホの幅を再現したブラウザで確かめたところまでです。Safari・Firefox でも開いていません。暗い画面設定の見た目は、CSS の指定を入れたところまでで、画面は確かめていません。

つまずいたこと

4回のやりとりで実際に出た不具合と、気づいたきっかけをまとめます。

見つけにくかったのは、最後の「1問中 1問」です。1回目で全部わかると出ませんし、くり返したあとも、その回の数としては正しいので、エラーにはなりません。「最初に何問あって、何回で覚えたか」を知りたい、という使う人の目で結果を読んで、はじめて足りないと分かりました。

残りは、貼り付ける文を少し変えるだけで見つかります。最後に改行を付ける、答えにカンマを入れる、全角のカンマにする、空欄にする、記号を入れる、の5つです。

自分で変えてみる

変えたいところを、AIに続けて頼みます。次の文は、AI（Claude）は試していません。直してもらったら、上の「5つの貼り付け」と、くり返しの3回をもう一度試してください。

問題と答えを入れ替えて出す

「答え」を先に見せて「問題」を当てる向きでも出題できるように、切り替えのチェックをつけてください。

英単語なら、日本語を見て英語を思い出す練習になります。

途中でやめるボタンをつける

完成版には、解いている途中で問題の編集に戻るボタンがありません。戻るにはページを開き直します（貼り付けた問題は保存されているので消えません）。

出題中に「やめて問題を編集する」ボタンをつけてください。

気をつけること

• AIが書いたコードには間違いが入ることがあります。このレシピでも、1回目は空の問題が出たり、答えが途中で切れたりしました。Claude のヘルプセンターも、Claude が間違った答えを出すことがあり、唯一の情報源として頼らないよう案内しています（Claude is providing incorrect or misleading responses）。できたら、決めた文を貼り付けて確かめてください。
• AIに送る文に、個人情報を書かないでください。問題の一覧を作るのに、名前・住所・電話番号などは要りません。個人情報保護委員会も、生成AIサービスの利用について注意喚起を出しています。
• 人が作った問題集や教科書の文章を、そのまま貼って公開しない。自分の勉強のために手元で使うのと、問題の一覧ごとインターネットに公開するのとは別の話です。公開するなら、自分で作った問題だけにします。
• 共用のパソコンでは、保存が残ることに注意。貼り付けた問題は、そのブラウザの中に残ります。問題の欄を空にしてもスタートできないので、保存は上書きされません。消したいときは、ブラウザの設定でこのページのデータ（サイトデータ）を消します（ブラウザごとの手順は確かめていません）。

次にやること

できたアプリは、今は自分のパソコンの中だけで動いています。通学・通勤中にスマホで解くには、ファイルをインターネット上に置いて公開します。HTML ファイル1つだけのアプリなら、無料の置き場で公開できることが多いです。どこに置けばいいかは「AIで作ったものを無料で公開する方法」で比べています。

デモをそのまま自分の単語帳にすることもできます。デモは MIT ライセンスで、個人で使ってかまいません。問題の欄に自分の「問題,答え」を貼って「スタート」を押すだけです（貼った問題は、そのブラウザの中にだけ保存されます）。

同じ「AIに頼む → 保存して開く → 試して確かめる → 直してもらう」の流れで、別のアプリも作れます。時間を扱うアプリなら「ポモドーロタイマーの作り方」、数字の計算なら「割り勘・会費計算アプリの作り方」が近い題材です。

作ったものを人に見てもらうなら → Cloudflare Workers で独自ドメインで公開する

「つくる（アプリ）」のレシピ

• おこづかい帳アプリを作る
• 単語カード・クイズアプリを作る（いま読んでいる記事）
• スマホだけで自分の単語帳を作る
• ポモドーロタイマーを作る
• 割り勘・会費計算アプリを作る

作るのページで、ほかのカテゴリも見る →