JavaScript

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

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

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

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

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

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

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

どうしたものかと思っていたら、NPMパッケージで素敵なライブラリが配信されていました。

中国語をピンインに変換してくれる…探し求めてたやつですやん…

ということで、早速インストールしてみましょう。

今回は、

  • コマンドラインで使う
  • Nuxt.jsに組み込んで使う

の2通りを紹介します。

コマンドとして使う

これは超簡単。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です!


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

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です