npm

wanakana

wanakana.bind() でふりがなフィールドにバインド。ローマ字入力をリアルタイムでひらがなに変換します。氏名からの自動取得ではなく「ふりがな入力補助」用途です。

このページの動作: 氏名フィールドからの自動入力はありません。ふりがなフィールドにローマ字で入力すると、リアルタイムでひらがなに変換されます。

氏名

ふりがな

wanakana

実装コード

pages/auto-kana/wanakana.vue

import * as wanakana from 'wanakana'

const furiganaRef = ref<HTMLInputElement | null>(null)

onMounted(() => {
  if (furiganaRef.value) {
    wanakana.bind(furiganaRef.value, { IMEMode: true })
  }
})

onUnmounted(() => {
  if (furiganaRef.value) {
    wanakana.unbind(furiganaRef.value)
  }
})

// <input ref="furiganaRef" type="text" />

✅ npm install wanakana — 軽量ライブラリ
✅ wanakana.bind() で input にバインドするだけ
⚠️ 氏名フィールドから自動取得ではなく、ふりがなフィールドで手入力
⚠️ IME の compositionupdate は使わない（文字列変換のみ）
ℹ️ wanakana は「ローマ字 → ひらがな変換」の用途。auto-kana とは別の問題を解く

useAutoKana との違い

useAutoKana は氏名フィールドの IME 読み（田中太郎 → たなかたろう）を取得。

wanakana.bind() はふりがなフィールドへのローマ字入力（tanaka → たなか）を変換。

UX が異なる — 前者は完全自動、後者はユーザーがふりがな欄に別途入力が必要。