娘に「へ」と「え」の使い分けを身につけてもらう為に「へえ」ボタンを作りました 🔘

1️⃣ はじめに
😱 娘が「へ」と「え」を使い分けられないことが発覚
💻 プログラムで問題を量産
🧑‍🏫 使い方
📝 実装方法
🎁 とりあえず娘に与える
🪦 短い役目を終える
💡 気づき
- 子供は親の作ったものを贔屓目で見てくれる
🐙 リポジトリ
📱 テストサイト
🔚 おわりに

1️⃣ はじめに

こんにちは。こそぷろ(子育てプロトタイピング) Advent Calendar 2023 の11日目の記事を担当します、@ki_230 です。フリーランスのウェブフロントエンドエンジニアです。

普段は「ダンボール × スマホでしゃべるゴミ箱」をつくったり、

「娘の書いたメロンをタイミング良くJoy-Conで一刀両断するゲーム」などをつくったりしています。

よろしくお願いします。

😱 娘が「へ」と「え」を使い分けられないことが発覚

今年の年初、小学校の授業参観に行ったときのことです。
参観した授業は「自らが書いた作文をみんなの前で読む」というものでした。

娘の発表を聞き、なかなか良い文章だったな思いながら帰宅したのですが、帰宅後作文の原文を確認すると「え・へ」「は・わ」「お・を」の使い分けがところどころ間違っていることに気づいたのです。

なんてこった。音読のときには気づかなかったですが、これはまずいです。
授業参観の日は午前中で学校が終わったので、娘と一緒に帰宅した後に「え・へ」「は・わ」「お・を」の使い分けを教えることにしました。

💻 プログラムで問題を量産

そこで思いつきました。
「へ」と「え」、「は」と「わ」、「お」と「を」を選択させる問題は、正規表現を使ったプログラムでガンガン生成できそうだな。と。
なので、ささっと作って娘に使ってもらうことにしました。

それが、こちら。

「へ」と「え」の正しい方のボタンを押すクイズ。
名付けて「へえボタン」です。

GIFアニメにしてしまったので、音が出ませんが本当は問題文の読み上げ機能も付いています。

🧑‍🏫 使い方

右上のボタンを押して、

表示されたスペースに文章を打ち込むと問題になります。
「え・へ」「は・わ」「お・を」が検出され、文章内に択一のボタンが生成される感じです。

保存した問題はローカルストレージに保持されるので、他のユーザーに共有されることはありません。
我が子に合わせた問題文を打ち込みましょう。

また、

⏩ 順番通り次の問題へ進むボタン
🔀 ランダムで次の問題に進むボタン
💬 読み上げボタン

も、左上に置いておきました。

📝 実装方法

問題の生成

❶ テキストエリアに入力された文章を改行で区切ります。

const texts = inputText.split(`\n`) || [];

❷ 改行で区切った文章を一文字づつ配列に収納します。

const text = [...texts[0]];

❸ 一文字づつチェックしていって、「へ・え・わ・は・を・お」を見つけた際にボタンをリターンします。

{text.map((text, i) => {
  switch (text) {
    case 'へ':
      return (
        <p key={ i }>
          <button onClick={ handleClickBtnNg }>え</button>
          <button onClick={ handleClickBtnOk }>へ</button>
        </p>
      );
    case 'え':
      return (
        <p key={ i }>
          <button onClick={ handleClickBtnOk }>え</button>
          <button onClick={ handleClickBtnNg }>へ</button>
        </p>
      );
    case 'わ':
      return (
        <p key={ i }>
          <button onClick={ handleClickBtnNg }>は</button>
          <button onClick={ handleClickBtnOk }>わ</button>
        </p>
      );
    case 'は':
      return (
        <p key={ i }>
          <button onClick={ handleClickBtnOk }>は</button>
          <button onClick={ handleClickBtnNg }>わ</button>
        </p>
      );
    case 'を':
      return (
        <p key={ i }>
          <button onClick={ handleClickBtnNg }>お</button>
          <button onClick={ handleClickBtnOk }>を</button>
        </p>
      );
    case 'お':
      return (
        <p key={ i }>
          <button onClick={ handleClickBtnOk }>お</button>
          <button onClick={ handleClickBtnNg }>を</button>
        </p>
      );
  }

  return (
    <p key={ i }>{ text }</p>
  );
})}