ふりがな入力支援が実現できるjQueryプラグインautokanaのPure JS版「vanilla-autokana」が良い感じ
フォームの入力時に入力した名前を元にふりがなを自動で入力してくれる入力支援（あるいは補完）を実現してくれるjQueryのプラグインautokanaは有名だと思います。
非常に簡単に利用できる事と、EFO施策の一環としても利用されているフォームも多いわけですがこのautokana、jQueryプラグインなので基本jQueryが必要になります。
昨今だと一切jQueryを使わない開発を行う案件も多く、私個人的にもわざわざautokanaの為だけにjQuery読むのもな、、となっておりました所、vanilla-autokanaなる名前からしてjQueryが不要そうなプラグインを見つけ利用してみた所特に問題もなく便利に利用できましたのでご紹介してみます。
特徴はjQuery依存が無いのでPure JS開発時にも気兼ねなく導入できる点です。npmから追加してあげるだけでインストール可能です。
npm i -D vanilla-autokana使い方もautokanaと同じで、第一引数に入力元、第二引数に出力先を指定するだけです。
import * as AutoKana from 'vanilla-autokana';
// ふりがな自動入力.
AutoKana.bind('#name', '#furigana');
// カタカナにしたい場合.
AutoKana.bind("#name", "#furigana", { katakana: true });当サイトのトップページ下部にあるお問い合わせフォームでも実際に使用していますが問題なく動いているのでこれからはvanilla-autokanaをデフォルトで使用しても良さそうですね。