みなさん、こんにちは。どんぶラッコです。
今日はNPMパッケージ pinyin の紹介です。
中の人は中国語を勉強中(超初心者)です。
その中で毎回困ることがあります。
それが、中国語を入力するにはピンインが必須であるということ。
日本人である我々は漢字文化なので、なんとなーく読める物もあります。 ですが、結局はピンインに頭の中で変換できないと入力は全くできない…
どうしたものかと思っていたら、NPMパッケージで素敵なライブラリが配信されていました。
中国語をピンインに変換してくれる…探し求めてたやつですやん…
ということで、早速インストールしてみましょう。
今回は、
- コマンドラインで使う
- Nuxt.jsに組み込んで使う
の２通りを紹介します。
コマンドとして使う
これは超簡単。npm install するだけです。
npm i -g pinyinそして、 pinyin ピンインを知りたい中国語 の形で入力しましょう。
わかりやすいですね！
Nuxt.js で pinyinプラグインを使う
Nuxt.jsで使う場合には、plugins に設定を記述してあげる必要があります。といっても超簡単ですけどね！
まずはプロジェクト内に pinyin をインストールします。
npm i pinyin
# or
yarn add pinyin次に、 plugins ディレクトリ内に pinyin.js を作成します。
import pinyin from 'pinyin'
import Vue from 'vue'
export default () => {
Vue.prototype.$pinyin = pinyin
}そして、 nuxt.config.js に下記を追記。
plugins: [
'~/plugins/pinyin'
],以上で設定は完了です！
あとはpinyin を使いたいVue Componentで
<template>
{{ $pinyin('你好') }}
</template>の形式で呼び出してあげればOKです！
中国語学習の心強い味方！皆さんも使ってみましょー
