本ページはHIGA TSUBASAが属する個人プロジェクト「COFUS」内のBLOGコンテンツです。

ふりがな入力支援が実現できるjQueryプラグインautokanaのPure JS版「vanilla-autokana」が良い感じ

ふりがな入力支援が実現できるjQueryプラグインautokanaのPure JS版「vanilla-autokana」が良い感じ

HIGA TSUBAS

Frontend Engineer HIGA TSUBAS

1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。

フォームの入力時に入力した名前を元にふりがなを自動で入力してくれる入力支援(あるいは補完)を実現してくれる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をデフォルトで使用しても良さそうですね。