全角・半角、ひらがな・カタカナ変換をする moji.jsの使い方

moji.jsの使い方

半角文字↔全角文字、ひらがな↔カタカナのように文字種を変換することができるJavaScriptライブラリ moji.js の使い方を解説します。

目次

moji.jsとは

moji.jsは、ひらがな↔カタカナのように文字の種類を変換するためのJavaScriptライブラリです。標準で以下の変換に対応しています。

  • 全角英数 → 半角英数
  • 半角英数 → 全角英数
  • 全角スペース → 半角スペース
  • 半角スペース → 全角スペース
  • ひらがな → カタカナ
  • カタカナ → ひらがな
  • 全角カナ → 半角カナ
  • 半角カナ → 全角カナ

上記以外にも、独自に文字種を追加してカスタムの変換パターンを作ることもできます。

動作サンプル

下記のフォームの入力欄に文字列を入力してみてください。文字種が変換されて出力されます。

コピペ用(やさしい): ABC123、ABC123、あいうえお、アイウエオ、アイウエオ

文字種変換フォーム
(全角英数 → 半角英数)
(半角英数 → 全角英数)
(ひらがな → カタカナ)
(カタカナ → ひらがな)
(全角カナ → 半角カナ)
(半角カナ → 全角カナ)

moji.jsのインストール

moji.jsはnpmでインストールできます。また、GitHubからダウンロードすることもできるし、CDNも利用できます。

npmでインストール

npmでインストールする場合は、以下のコマンドを実行します。

npm i @eai/moji

公式パッケージはnpm i mojiでインストールできるのですが、これだと古いバージョン(0.5.1)がインストールされてしまいます。最新バージョン(1.2.0)をインストールしたいならば上記コマンドでどうぞ。

GitHubからダウンロード

下記のリンクへ飛んで、緑色の「Code」ボタンをクリック、「Download ZIP」をクリックです。

CDNを使う

下記のCDNを使うこともできます。

moji.jsの使い方

ライブラリの読み込み

moji.jsを読み込みます。

<!-- npmの場合 -->
<script src="./node_modules/@eai/moji/dist/moji.js"></script>

<!-- GitHubの場合 -->
<script src="./moji-master/dist/moji.js"></script>

<!-- CDNの場合 -->
<script src="https://cdn.jsdelivr.net/npm/@eai/moji/dist/moji.min.js"></script>

文字種の変換

文字種の変換をするときのコードは次のようになります。

<script>
  // 全角英数 → 半角英数
  moji('ABC123').convert('ZEtoHE').toString();
  // → ABC123

  // 半角英数 → 全角英数
  moji('ABC123').convert('HEtoZE').toString();
  // → ABC123

  // 全角スペース → 半角スペース
  moji(' ').convert('ZStoHS').toString();
  // → ' '

  // 半角スペース → 全角スペース
  moji(' ').convert('HStoZS').toString();
  // → ' '

  // ひらがな → カタカナ
  moji('あいうえお').convert('HGtoKK').toString();
  // → アイウエオ

  // カタカナ → ひらがな
  moji('アイウエオ').convert('KKtoHG').toString();
  // → あいうえお

  // 全角カナ → 半角カナ
  moji('アイウエオ').convert('ZKtoHK').toString();
  // → アイウエオ

  // 半角カナ → 全角カナ
  moji('アイウエオ').convert('HKtoZK').toString();
  // → アイウエオ
</script>
  • moji(), convert(), toString()メソッドをチェーンでつなぎます。
  • moji()メソッドの引数には変換前の文字列が入ります。
  • convert()メソッドの引数は変換種別です。
  • 最後はtoString()メソッドで終わります。値を文字列に変換するメソッドです。
  • convert()メソッドは複数つなげることもできます。また、convert()以外にも以下で解説するメソッドをチェーンすることができます。

変換種別をあらわすキーワードは文字種to文字種という形式になっています。以下の文字種を指定できます。

ZE全角英数字、記号(スペースは含まない)
HE半角英数字、記号(スペースは含まない)
ZS全角スペース
HS半角スペース
HGひらがな
KK全角カタカナ
ZK全角カタカナ
HK半角カタカナ

標準メソッドを使う

JavaScriptに組み込まれている標準メソッドを使うには、string('標準メソッド名', [標準メソッド引数])を使います。

moji('   あいうえお   ').string('trim').convert('HGtoKK').toString();
// → 'アイウエオ'

moji('あいうえお').string('replace', 'あい', '愛').convert('HGtoKK').toString();
 // → '愛ウエオ'

文字種の絞り込みと排除

文字列を任意の文字種に絞り込むにはfilter()メソッドを使います。

// ひらがなに絞り込む
let str = moji('今日は New York でカバディをした').filter('HG').toString();
// → はでをした

文字列から任意の文字種を排除するにはreject()メソッドを使います。

// ひらがなを排除する
let str = moji('今日は New York でカバディをした').reject('HG').toString();
// → 今日 New York カバディ

filter()reject()の引数に指定できる文字種は次のとおりです。

ZE全角英数字、記号(スペースは含まない)
HE半角英数字、記号(スペースは含まない)
ZS全角スペース
HS半角スペース(全角スペースも含む)
HGひらがな
KK全角カタカナ
ZK全角カタカナ
HK半角カタカナ

Webフォームでリアルタイム変換する方法

Webフォームで、ユーザが入力した値をリアルタイムで変換する例です。

<input type="text" id="email">

<script>
  const email = document.querySelector('#email');

  email.addEventListener('change', function () {
    let emailConv = moji(email.value).convert('ZEtoHE').toString();
    email.value = emailConv;
  });
</script>

コードの解説

  • 1行目、入力欄に任意のidを指定します。
  • 4行目、入力欄の要素を変数に代入しておきます。
  • 6行目、入力欄の値が変更されたら以下の関数を実行します。
  • 7行目、入力値を変換して変数に代入します。
  • 8行目、入力欄に変換後の値をセットします。

6行目のaddEventListener()で使うイベントの種類は以下の3つが考えられます。

  1. change: 値を入力して、入力欄からフォーカスがはずれたときに発火
  2. keyup: 値を入力して、キーを離したときに発火
  3. input: 値を入力したときに発火

keyupinputを使った場合、かな漢字変換の前に文字列が変換されてしまい、うまく動作しませんでした。changeを使いましょう。

でわでわ

moji.jsの使い方

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメントする

目次