インライン

Inline Events

useAutoKana と同じロジックを Composable に分離せず、コンポーネント内に直接書いた版。動作は同じですが、コードの冗長性が増します。

実装コード

pages/auto-kana/inline.vue

const nameRef = ref<HTMLInputElement | null>(null)
const furigana = ref('')

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

const isKana = (s: string) => /^[぀-ゟ゠-ヿㇰ-ㇿー\s　]*$/.test(s)
const flush = () => (furigana.value = [...segments, currentSegment].join(''))

onMounted(() => {
  const el = nameRef.value
  if (!el) return

  el.addEventListener('compositionstart', () => { currentSegment = '' })

  el.addEventListener('compositionupdate', (e: CompositionEvent) => {
    if (isKana(e.data ?? '')) { currentSegment = e.data ?? ''; flush() }
  })

  el.addEventListener('compositionend', () => {
    segments.push(currentSegment); currentSegment = ''; flush()
  })

  el.addEventListener('input', (e) => {
    if ((e as InputEvent).isComposing) return
    if (!el.value) { segments = []; currentSegment = ''; furigana.value = '' }
  })
})

// ↑ composables/useAutoKana.ts に移動したのが Composable 版
  • ✅ 動作は useAutoKana Composable と完全に同じ
  • ⚠️ addEventListener のセットアップを毎回コンポーネントに書く必要がある
  • ⚠️ 複数フォームで使う場合にコピペが発生する
  • ℹ️ このコードをそのまま composables/useAutoKana.ts に移動したのが Composable 版