カタカナ単語をア段に変換するJavaScript

こんにちは！今日は、カタカナ単語を「ア段」に変換する面白いJavaScriptスクリプトを紹介します。例えば「ミスタードーナツ」が「マサターダーナタ」に、「オートミール」が「アータマーラ」に変換されるというものです。

ここをクリックするとサンプルページにとびます

これを参考にしました！

スクリプトの概要

このスクリプトでは、ユーザーが入力したカタカナ文字列を、各文字を「ア段」に変換して出力します。以下の仕組みで動作します：

1. 入力フォームでユーザーがカタカナ文字列を入力します。
2. 変換ボタンを押すと、JavaScriptの関数が各文字を対応する「ア段」の音に置き換えます。
3. 結果がテキストエリアに表示されます。

実装コード

以下がスクリプトのコードです。このコードをHTMLファイルに埋め込むだけで、動作するシンプルな作りになっています。

// HTML構造
const appHTML = `
<div>
  <label for="inputKatakana">カタカナ単語を入力してください:</label>
  <input type="text" id="inputKatakana" placeholder="例: ミスタードーナツ">
</div>
<div>
  <button id="convertButton">変換</button>
</div>
<div>
  <label for="outputResult">変換結果:</label>
  <textarea id="outputResult" rows="3" readonly></textarea>
</div>
`;

document.body.innerHTML = appHTML;

// JavaScriptロジック
const katakanaToA = (input) => {
  const kanaMap = {
    "ア": "ア", "イ": "ア", "ウ": "ア", "エ": "ア", "オ": "ア",
    "カ": "カ", "キ": "カ", "ク": "カ", "ケ": "カ", "コ": "カ",
    "サ": "サ", "シ": "サ", "ス": "サ", "セ": "サ", "ソ": "サ",
    "タ": "タ", "チ": "タ", "ツ": "タ", "テ": "タ", "ト": "タ",
    "ナ": "ナ", "ニ": "ナ", "ヌ": "ナ", "ネ": "ナ", "ノ": "ナ",
    "ハ": "ハ", "ヒ": "ハ", "フ": "ハ", "ヘ": "ハ", "ホ": "ハ",
    "マ": "マ", "ミ": "マ", "ム": "マ", "メ": "マ", "モ": "マ",
    "ヤ": "ヤ", "ユ": "ヤ", "ヨ": "ヤ",
    "ラ": "ラ", "リ": "ラ", "ル": "ラ", "レ": "ラ", "ロ": "ラ",
    "ワ": "ワ", "ヲ": "ワ", "ン": "ン",
    "ガ": "カ", "ギ": "カ", "グ": "カ", "ゲ": "カ", "ゴ": "カ",
    "ザ": "サ", "ジ": "サ", "ズ": "サ", "ゼ": "サ", "ゾ": "サ",
    "ダ": "タ", "ヂ": "タ", "ヅ": "タ", "デ": "タ", "ド": "タ",
    "バ": "ハ", "ビ": "ハ", "ブ": "ハ", "ベ": "ハ", "ボ": "ハ",
    "パ": "ハ", "ピ": "ハ", "プ": "ハ", "ペ": "ハ", "ポ": "ハ",
    "キャ": "カ", "キュ": "カ", "キョ": "カ",
    "シャ": "サ", "シュ": "サ", "ショ": "サ",
    "チャ": "タ", "チュ": "タ", "チョ": "タ",
    "ニャ": "ナ", "ニュ": "ナ", "ニョ": "ナ",
    "ヒャ": "ハ", "ヒュ": "ハ", "ヒョ": "ハ",
    "ミャ": "マ", "ミュ": "マ", "ミョ": "マ",
    "リャ": "ラ", "リュ": "ラ", "リョ": "ラ",
  };

  return input.split('').map(char => kanaMap[char] || char).join('');
};

const inputKatakana = document.getElementById('inputKatakana');
const outputResult = document.getElementById('outputResult');
const convertButton = document.getElementById('convertButton');

convertButton.addEventListener('click', () => {
  const input = inputKatakana.value;
  const result = katakanaToA(input);
  outputResult.value = result;
});

実行手順

1. 上記のコードをHTMLファイルにコピーして保存します。
2. ブラウザでHTMLファイルを開きます。
3. 入力フォームにカタカナ単語を入力し、「変換」ボタンを押すと変換結果が表示されます。

実例

このスクリプトは、教育用やゲーム開発、または単に楽しいプロジェクトとして利用できます。ぜひ試してみてください！