会員登録フォーム等でよく見るふりがなフォーム。名前の入力した後に再度ふりがなで名前を入力って面倒くさいですよね。
そこで、vanilla-autokana を使って、名前の入力文字を自動でふりがな変換し、補完させる機能の実装方法を紹介します。
npm もしくは yarn で vanilla-autokana をインストールします。
vanilla-autokana | npm (opens new window)
npm install vanilla-autokana # or yarn add vanilla-autokana
まずはフォームを実装します。会員登録にあるような氏名とふりがなを想定したフォームです。
特に特記すべき点はありませんが、input 要素には必ずidを付与してください。
<template>
<div class="vanilla-autokana">
<div class="form">
<div class="form__contents">
<label for="name" class="form__label">
氏名
</label>
<input id="name" class="form__input" v-model="name" />
</div>
<div class="form__contents">
<label for="kana" class="form__label">
氏名（ふりがな）
</label>
<input id="kana" class="form__input" v-model="kana" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
kana: ""
};
}
};
</script>
ここからふりがなを自動補完させる為、vanilla-autokana を導入します。
まずは vanilla-autokana をインポートします。
<script>
import * as AutoKana from "vanilla-autokana";
export default {
data() {
return {
name: "",
kana: ""
};
}
};
</script>
次に、autokanaという変数を定義（変数名は任意で OK）し、DOM 要素を参照できるようになるmountedで氏名とフリガナの input 要素を bind させます。
AutoKana.bind() の戻り値として取得できる AutoKana インスタンスを定義した autokanaに代入しておきます。
<script>
import * as AutoKana from "vanilla-autokana";
let autokana;
export default {
data() {
return {
name: "",
kana: ""
};
},
mounted() {
autokana = AutoKana.bind("#name", "#kana");
},
};
</script>
そして、名前フォームの入力を検知させる為に名前の input 要素に@input="handleNameInput"を追記し、handleNameInputメソッドで AutoKana インスタンスのgetFurigana()メソッドを使用し、名前の入力値をふりがな変換させ、data プロパティのkanaに代入してあげれば完成です。
<template>
...
<label for="name" class="form__label">
氏名
</label>
<input id="name" class="form__input" v-model="name" @input="handleNameInput" />
</div>
...
</template>
<script>
...
methods: {
handleNameInput() {
this.kana = autokana.getFurigana();
},
...
};
</script>
また、ふりがながひらがなではなく、カタカナのケースの場合は、独自でカタカナ変換用のメソッドを用意し、getFurigana()で取得したふりがなをカタカナ変換してあげると実現できます。
<script>
...
methods: {
handleNameInput() {
this.kana = this.convertKatakana(autokana.getFurigana());
},
convertKatakana(str) {
return str.replace(/[\u3041-\u3096]/g, function(match) {
const chr = match.charCodeAt(0) + 0x60;
return String.fromCharCode(chr);
});
}
}
};
</script>
以下、今回実装したコードと実際に動作確認ができるプレビューです。
<template>
<div class="vanilla-autokana">
<div class="form">
<div class="form__contents">
<label for="name" class="form__label">
名前
</label>
<input
id="name"
class="form__input"
v-model="name"
@input="handleNameInput"
/>
</div>
<div class="form__contents">
<label for="kana" class="form__label">
フリガナ
</label>
<input id="kana" class="form__input" v-model="kana" />
</div>
</div>
</div>
</template>
<script>
import * as AutoKana from "vanilla-autokana";
let autokana;
export default {
data() {
return {
name: "",
kana: ""
};
},
mounted() {
autokana = AutoKana.bind("#name", "#kana");
},
methods: {
handleNameInput() {
this.kana = this.convertKatakana(autokana.getFurigana());
},
convertKatakana(str) {
return str.replace(/[\u3041-\u3096]/g, function(match) {
const chr = match.charCodeAt(0) + 0x60;
return String.fromCharCode(chr);
});
}
}
};
</script>
<style lang="stylus" scoped>
.vanilla-autokana
.form
width 100%
max-width 400px
&__contents
margin-bottom 16px
&__label
display: block
margin-bottom 4px
font-weight 700
&__input
width 100%
padding 8px
border-radius 4px
border 1px solid #cfcfcf
box-sizing border-box
&:focus-visible
outline: none
</style>