フォームのふりがなを自動入力する vanilla-autokana #JavaScript

フォームのふりがな自動入力ライブラリとして、最も有名なのはjquery.autokanaだと思います。このライブラリはjQueryプラグインです。2018年現在では、jQueryを使わない開発環境は普通にありますし、ライブラリはscriptタグで読み込むのではなくwebpack等でバンドルするのが一般的になっています。

そこで、jQueryに依存せず、ES Modulesとして使用できるライブラリを作成しました。

vanilla-autokana
https://www.npmjs.com/package/vanilla-autokana

デモ

↓のURLで、vanilla-autokanaを使ったフォームを試すことができます。
http://5ac8f708be40f12ac4c70db9.clever-wiles-e716bc.netlify.com/

インストール

npm install vanilla-autokana でインストールできます。
ライブラリをscriptタグから読み込みたい場合は、GitHubリポジトリのdist/autokana.jsをダウンロードしてください。

基本的な使い方

AutoKana.bind()メソッドを使って、名前のinput要素とふりがなのinput要素のidをAutoKanaに教えてください。
この際、DOM要素があらかじめ存在している必要があるので、AutoKana.bind()の呼び出しがinput要素よりも後に来るように配置するか、DOMContentLoadedイベントのハンドラでAutoKana.bind()を呼び出してください。

<input name="name" id="name">
<input name="furigana" id="furigana">
<script src="autokana.js" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    AutoKana.bind("#name", "#furigana");
  });
</script>

jQuery.autokanaとAPI互換性があります。

// jQuery.autokana
$.fn.autokana('#name', '#furigana', { katakana: true });
// vanilla-autokana
AutoKana.bind('#name', '#furigana', { katakana: true });

JavaScriptフレームワークと組み合わせる

ReactやVueのようなJavaScriptフレームワークでは、input要素のvalueに値を設定するだけでは、フレームワークが保持している状態に変更を加えることができません。
jQuery.autokanaはこれらのフレームワークと連携するようには作られていませんが、vanilla-autokanaはReactやVueとも組み合わせることができます。

以下はVue.jsの単一ファイルコンポーネントです。このままではふりがなの自動入力は行われません。

<template>
<div>
  <input name="name" id="name" v-model="name">
  <input name="furigana" id="furigana" v-model="furigana">
</div>
</template>
<script>
  import * as AutoKana from 'vanilla-autokana';

  export default {
    data() {
      name: '',
      furigana: '',
    },
    mounted() {
      AutoKana.bind('#name', '#furigana');
    }
  }
</script>

ふりがなの自動入力を行うには、AutoKana.bind() の戻り値として取得できるAutoKanaインスタンスのgetFurigana()メソッドを使用するのがお勧めです。

<template>
<div>
  <input name="name" id="name" v-model="name" @input="handleNameInput">
  <input name="furigana" id="furigana" v-model="furigana">
</div>
</template>
<script>
  import * as AutoKana from 'vanilla-autokana';

  let autokana;

  export default {
    data() {
      name: '',
      furigana: '',
    },
    mounted() {
      // ふりがなのinput要素のidは省略可能
      autokana = AutoKana.bind('#name');
    },
    methods: {
      handleNameInput() {
        this.furigana = autokana.getFurigana();
      }
    }
  }
</script>

仕組み

vanilla-autokanaは、jQuery.autokanaと同様、IME変換中のinput要素のvalueを読み取って、ふりがなを取得しています。かな漢字変換の機能を持っているわけではありません。

ライブラリの設計上、コピペに対応できない等の制約があります。より本格的なかな漢字変換が必要な場合、サーバサイドにかな漢字変換APIを用意する方式になると思います。