ふりがな自動入力デモ

composables/useAutoKana.ts に IME イベントをラップしたカスタム Composable。依存ゼロで Vue に完全対応。使う側はたった1行。

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

useAutoKana と同じロジックを Composable に分離せず、コンポーネント内に直接書いた版。動作は同じ、コードの冗長性が増す。Composable の必要性を確認するための比較。

v-model (input event) で値をそのままコピーする誤ったアプローチ。漢字確定後の文字をコピーするため、ふりがなフィールドに「田中太郎」が入ってしまう。なぜ compositionupdate が必要かを確認するための逆説デモ。