ReactにautoKanaをいれてみた。

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を用意する方式になりそうです。

参考文献