カスタム★ 推奨

useAutoKana Composable

composables/useAutoKana.ts composables/useAutoKana.ts に IME の compositionupdate イベントをラップ。依存ゼロ・Vue ネイティブ。使う側はたった1行。

出力形式:
実装コード

composables/useAutoKana.ts

export function useAutoKana(
  inputRef: Ref<HTMLInputElement | null>,
  options: { output?: MaybeRef<'hiragana' | 'katakana'> } = {}
) {
  const kana = ref('')
  const isKana = (s: string) => /^[぀-ゟ゠-ヿㇰ-ㇿー\s　]*$/.test(s)

  let segments: string[] = []
  let currentSegment = ''

  const handlers = {
    compositionstart: () => { currentSegment = '' },
    compositionupdate: (e: CompositionEvent) => {
      if (isKana(e.data ?? '')) { currentSegment = e.data ?? ''; flush() }
    },
    compositionend: () => { segments.push(currentSegment); currentSegment = ''; flush() },
    input: (e: Event) => {
      if ((e as InputEvent).isComposing) return
      if (!(e.target as HTMLInputElement).value) {
        segments = []; currentSegment = ''; kana.value = ''
      }
    },
  }

  onMounted(() => { if (inputRef.value) attach(inputRef.value) })
  onUnmounted(() => { if (inputRef.value) detach(inputRef.value) })

  return { kana: readonly(kana) }
}

pages/auto-kana/composable.vue

const outputMode = ref<'hiragana' | 'katakana'>('hiragana')
const nameRef = ref<HTMLInputElement | null>(null)

const { kana } = useAutoKana(nameRef, { output: outputMode })

// <input ref="nameRef" type="text" />
// <input :value="kana" readonly />
  • ✅ 依存ゼロ — npm インストール不要
  • ✅ compositionupdate で IME 読みを取得（漢字確定前のひらがな）
  • ✅ 候補選択で漢字になっても読みは上書きされない（isKana チェック）
  • ✅ output オプションがリアクティブ（MaybeRef 対応）
  • ✅ 複数セグメント（名前を複数回変換しても結合）
  • ✅ 入力クリアで自動リセット