中国語を入力するとピンインに変換！ npm パッケージ pinyin を コマンドラインとNuxt.js で使う

みなさん、こんにちは。どんぶラッコです。

今日はNPMパッケージ pinyin の紹介です。

中の人は中国語を勉強中(超初心者)です。

Macで３カ国言葉の入力を切り替えたい時は？ - Karabiner を使って 日本語 / 英語 / 中国語 を切り替える 第２外国語学習者必見です！ 皆さん、こんにちは。どんぶラッコです。 最近、日本語英語に加えて中国語を記載する機会が増えてき...

その中で毎回困ることがあります。

それが、中国語を入力するにはピンインが必須であるということ。

日本人である我々は漢字文化なので、なんとなーく読める物もあります。 ですが、結局はピンインに頭の中で変換できないと入力は全くできない…

どうしたものかと思っていたら、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です！

中国語学習の心強い味方！皆さんも使ってみましょー