色もLEARNに加える。
文字や九九に続いて、色の名前を練習する Colors を作った。色を大きく表示し、名前を見て、読み上げを聞く。「おぼえる」と「クイズ」の2つのモードを切り替えながら使える。
対象は50色。あか、あお、きいろのような基本色から、そらいろ、やまぶきいろ、ラベンダー、ターコイズなどまでまとめた。
50色を順番に見る。
「おぼえる」では、1色ずつ大きな色見本と色名を表示する。「前へ」「次へ」で50色を順番に移動でき、現在位置は「01 / 50」のように表示する。
色データは src/data/learn-cards.mjs に色名とHEX値の組み合わせとしてまとめた。画面側へ50色を直接書き並べず、一覧表示やクイズでも同じデータを使う。
白やアイボリー、クリームのように背景と近くなる色もあるため、色見本には境界線を付けて形が分かるようにした。画面によって色の見え方が異なることや、きんいろ・ぎんいろは光沢を再現したものではないこともページ内に記載している。
色の名前を聞く。
色名の読み上げには、ひらがな・カタカナで使っているブラウザのSpeech Synthesisを利用する。
「音をきく」を押したときだけ日本語音声で色名を読み上げる。ページを開いたときや、色を切り替えたときには自動再生しない。端末内で利用できる日本語音声が見つからない場合はボタンを無効にし、色を見る練習だけ続けられる。
外部の音声APIや音声ファイルは追加していない。実際に使われる声はブラウザとOSの音声機能に依存する。
10問の色クイズにする。
「クイズ / 10もん」では、大きな色見本を表示して「これはなにいろ？」と4択で答える。
50色をシャッフルして10色を選ぶため、同じセットの中で正解になる色は重複しない。各問題の選択肢は、正解1色と別の3色を組み合わせてランダムに並べる。同じ選択肢が重複することもない。
回答すると、その問題のボタンをすべて無効にして二重採点を防ぐ。正しければ「せいかい！」、間違っていれば正しい色名を表示する。色だけで正誤を示さず、文字でも結果が分かるようにした。
クイズ中に色名を読み上げると答えが分かってしまうため、Colorsではクイズ中の「音をきく」を表示しない。
10問を終えて、もう一度。
問題画面には「1 / 10 もん」と現在の正解数を表示する。回答後に「つぎへ」を押して進み、10問目では「けっかを見る」に切り替わる。
結果画面には「8 / 10」のように正解数を表示する。「もういちど」を押すと新しい10問を作り直し、得点も0から始まる。
出題や採点の共通処理は src/scripts/learn-quiz.mjs に分けた。Colorsだけでなく、同時に作ったMusic Notesでも同じ4択クイズの仕組みを利用する。
ブラウザだけで完結させる。
ColorsとMusic Notesの共通画面は src/components/LearnCards.astro、ブラウザ側の動作は src/scripts/learn-cards.ts にまとめた。
色、現在位置、クイズの問題、正解数はページを開いている間だけ扱う。アカウントや回答送信用のAPI、localStorageへの学習履歴保存はない。ページを閉じたり再読み込みしたりすれば結果は消える。
テストでは50色あること、色名とHEX値が重複していないこと、10問の正解が重複しないこと、4択が重複しないこと、回答が一度だけ採点されることを確認している。
Learnの5本目として公開する。
Colors は、Hiragana Trace、Katakana Trace、Alphabet Trace、Kuku Drillに続くLEARNの5本目。
2026年9月11日の追加コミットで、Music Notesと一緒にページ、学習データ、共通クイズ処理、テスト、Learn一覧への導線を追加した。文字、計算に続いて、見て覚える色の学習をLEARNに加えた。