Reactで作成したフォームにカタカナ自動入力の機能を実装することになった。
今回はvanilla-autokanaというライブラリを使用した。
インストール
npm install vanilla-autokana
実装方法
①AutoKana.bind()メソッド
を使って、名前のinput要素とフリガナのinput要素のidをAutoKanaに教える。
②AutoKana.bind()メソッド
の戻り値をgetFurigana()メソッド
で取得する。
personName.tsx
import React, { ChangeEvent, useEffect, useRef } from "react";
import * as AutoKana from 'vanilla-autokana';
const PersonName = (() => {
const personNameRef = useRef<HTMLInputElement>(null);
const personNameKanaRef = useRef<HTMLInputElement>(null);
let autokana: any;
// []を渡し、最初の一回しかレンダリング走らせない
useEffect(() => {
autokana =
AutoKana.bind('#personName', '#personNameKana', { katakana: true }); -①
}, []);
const onChangeEvent = (e: ChangeEvent<HTMLInputElement>) => {
let name = personNameRef.current;
let kana = personNameKanaRef.current;
if (!name) return;
name.value = e.target.value;
if (!kana) return;
kana.value = autokana.getFurigana(); -②
}
return (
<>
<input
type='text'
id='personName'
placeholder='名前'
onChange={onChangeEvent}
ref={personNameRef}
/>
<input
type='text'
id='personNameKana'
placeholder='カナ'
ref={personNameKanaRef}
/>
</>
);
})
export default PersonName;
仕組み
vanilla-autokanaは、jQuery.autokanaと同様、IME変換中のinput要素のvalueを読み取って、ふりがなを取得しています。
かな漢字変換の機能を持っているわけではないので注意です。
またライブラリの設計上、コピペに対応できない等の制約あり。
より本格的なかな漢字変換が必要な場合、サーバサイドにかな漢字変換APIを用意する方式になりそうです。
参考文献