Reactで全角ひらがなをキーで押したとき、TextFieldに半角カナを入力する実装を作ってみた

背景

• 全角ひらがな入力をキーボードでした際、入力欄に半角カナ入力として出力できないかをいろいろ調べた
• 「IMEで全角ひらがなを選択しているとき、半角カナを選択して入力などできないか」と調べたところ、「ReactやNextだと直接IME制御はできない」とのこと
• 「入力しているタイミングで全角ひらがなから半角カナに変換する実装をすればいいのでは」といろいろ格闘してみた

結果できたコード

import React, { useState } from 'react';

const ZenkanaToHankanaConverter = () => {
  //入力、出力のための状態を定義
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  //ひらがなからカタカナに変換する関数を定義
  const hiraganaToKatakana = (str) => {
    // ひらがなのUnicode範囲を表す正規表現
    return str.replace(/[\u3041-\u3096]/g, function (match) {
      //match: replaceメソッドで見つかったひらがなの文字列を示す
      //+ 0×60: Unicode値にこの値(16新数で言うところの96に該当)を加えることで、
      // 対応するカタカナのUnicode値を得ることができる
      let chr = match.charCodeAt(0) + 0x60;
      // fromCharCode: 指定したUnicodeの値を表す文字列を返すJSの組み込み関数
      return String.fromCharCode(chr);
    });
  };

  // 全角から半角に変換する関数を定義
  //マッピングを1文字1文字する必要がある(スマートではない)
  const fullToHalf = (str) => {
    let kanaMap = {
      ガ: 'ｶﾞ',
      ギ: 'ｷﾞ',
      グ: 'ｸﾞ',
      ゲ: 'ｹﾞ',
      ゴ: 'ｺﾞ',
      ザ: 'ｻﾞ',
      ジ: 'ｼﾞ',
      ズ: 'ｽﾞ',
      ゼ: 'ｾﾞ',
      ゾ: 'ｿﾞ',
      ダ: 'ﾀﾞ',
      ヂ: 'ﾁﾞ',
      ヅ: 'ﾂﾞ',
      デ: 'ﾃﾞ',
      ド: 'ﾄﾞ',
      バ: 'ﾊﾞ',
      ビ: 'ﾋﾞ',
      ブ: 'ﾌﾞ',
      ベ: 'ﾍﾞ',
      ボ: 'ﾎﾞ',
      パ: 'ﾊﾟ',
      ピ: 'ﾋﾟ',
      プ: 'ﾌﾟ',
      ペ: 'ﾍﾟ',
      ポ: 'ﾎﾟ',
      ヴ: 'ｳﾞ',
      ヷ: 'ﾜﾞ',
      ヺ: 'ｦﾞ',
      ア: 'ｱ',
      イ: 'ｲ',
      ウ: 'ｳ',
      エ: 'ｴ',
      オ: 'ｵ',
      カ: 'ｶ',
      キ: 'ｷ',
      ク: 'ｸ',
      ケ: 'ｹ',
      コ: 'ｺ',
      サ: 'ｻ',
      シ: 'ｼ',
      ス: 'ｽ',
      セ: 'ｾ',
      ソ: 'ｿ',
      タ: 'ﾀ',
      チ: 'ﾁ',
      ツ: 'ﾂ',
      テ: 'ﾃ',
      ト: 'ﾄ',
      ナ: 'ﾅ',
      ニ: 'ﾆ',
      ヌ: 'ﾇ',
      ネ: 'ﾈ',
      ノ: 'ﾉ',
      ハ: 'ﾊ',
      ヒ: 'ﾋ',
      フ: 'ﾌ',
      ヘ: 'ﾍ',
      ホ: 'ﾎ',
      マ: 'ﾏ',
      ミ: 'ﾐ',
      ム: 'ﾑ',
      メ: 'ﾒ',
      モ: 'ﾓ',
      ヤ: 'ﾔ',
      ユ: 'ﾕ',
      ヨ: 'ﾖ',
      ラ: 'ﾗ',
      リ: 'ﾘ',
      ル: 'ﾙ',
      レ: 'ﾚ',
      ロ: 'ﾛ',
      ワ: 'ﾜ',
      ヲ: 'ｦ',
      ン: 'ﾝ',
      ァ: 'ｧ',
      ィ: 'ｨ',
      ゥ: 'ｩ',
      ェ: 'ｪ',
      ォ: 'ｫ',
      ッ: 'ｯ',
      ャ: 'ｬ',
      ュ: 'ｭ',
      ョ: 'ｮ',
      '。': '｡',
      '、': '､',
      ー: 'ｰ',
      '「': '｢',
      '」': '｣',
      '・': '･',
　　　'＊': '*',
    };
    var reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g');
    return str
      .replace(reg, function (match) {
        return kanaMap[match];
      })
      .replace(/゛/g, 'ﾞ')
      .replace(/゜/g, 'ﾟ');
  };

  //   const handleInputChange = (event) => {
  //     setInput(event.target.value);
  //     var katakana = hiraganaToKatakana(event.target.value);
  //     setOutput(fullToHalf(katakana));
  //   };
  //   入力が変更されたときのイベントハンドラ
  const handleInputChange = (event) => {
    var inputVal = event.target.value;
    var katakana = hiraganaToKatakana(inputVal); //ひらがなをカタカナに変換
    var hankana = fullToHalf(katakana); //全角カタカナを半角カタカナに変換
    setInput(hankana); // 入力フィールドを返還後の値で更新
    setOutput(hankana); // 出力状態も入力フィールドと同様、変換後の値で更新
  };

  return (
    <div>
      <TextField
        type="text"
        value={input}
        onChange={handleInputChange}
        //下記のIMEモードをオフにする設定は、
        //ブラウザによってはサポートされていないので多分意味がない
        sx={{ imeMode: 'inactive' }}
      />
      <p>{output}</p>
    </div>
  );
};

export default ZenkanaToHankanaConverter;

【ボツ案】半角カナ以外の入力を無視する制御

import { Formik, Field, Form } from 'formik';
import { TextField } from '@mui/material';
import { Button } from '@mui/material';
import * as Yup from 'yup';

import React, { useState } from 'react';
// import TextField from '@material-ui/core/TextField';

const MyForm = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    const newValue = event.target.value;
    if (/^[ｦ-ﾟ]*$/.test(newValue)) {
      setValue(newValue);
    }
  };

  return <TextField value={value} onChange={handleChange} label="半角カナ" />;
};

export default MyForm;

感想

• 全角から半角に変換する際、1文字1文字マッピングしないといけない部分がとても美しくない