vanilla-autokanaを使ってみた

はじめに

こんばんは。

今回は vanilla-autokanaを使ってみました。

日本語入力すると、対応するカタカナが該当のフォームに入力される的なやつです。

github.com

今回は vueを使用しているプロジェクトで導入しました。

参考サイト

code-enj.app

本題

コードはざっくりこんな感じ。

<script lang="ts" setup>
import { useForm } from "@inertiajs/vue3";
import * as AutoKana from "vanilla-autokana";
import { onMounted, ref } from "vue";

const form = useForm({
    nameMei: '',
    nameSei: '',
    nameSeiKana: '',
    nameMeiKana: '',
});

const autoKanaSei = ref();
const autoKanaMei = ref();

onMounted(() => {
    autoKanaSei.value = AutoKana.bind("#nameSei", "#nameSeiKana", { katakana: true });
    autoKanaMei.value = AutoKana.bind("#nameMei", "#nameMeiKana", { katakana: true });
});

</script>


<template>
    <main>
        <div>
            <label>姓</label>
            <input
              id="nameSei"
              v-model="form.nameSei"
              type="text"
              @input="form.nameSeiKana = autoKanaSei?.getFurigana()"
            />
        </div>

        <div>
            <label>名</label>
            <input
              id="nameMei"
              v-model="form.nameMei"
              type="text"
              @input="form.nameMeiKana = autoKanaMei?.getFurigana()"
            />
        </div>

        <div>
            <label>姓(カナ)</label>
            <input id="nameSeiKana" v-model="form.nameSeiKana" type="text" />
        </div>

        <div>
            <label>名(カナ)</label>
            <input id="nameMeiKana" v-model="form.nameMeiKana" type="text" />
        </div>
    </main> 
</template>

漢字側のinputの クリックイベントで変換されたカタカナ文字をカタカナ側のv-modalへセットしているformデータに保存するだけです。

終わりに

簡単ですが、以上です。

もうすぐ１２月ですね。

はやいはやい。