Javascriptで平仮名をカタカナに変換する

こんにちは、ぐっちと申します。

現在アプリ製作中でインクリメンタルサーチを実装したのですが、私の作成中のアプリでは検索対象が全てカタカナで、入力してもカタカナに変換するという一手間が掛かりとても使いにくい。

そこで入力した文字が平仮名でもカタカナとして判定し、検索を出来ないかと思い調べてみるとすぐに見つかり、あっと言う間に実装できてしまった。

function hiraganaToKatakana(str) {

　　return str.replace(/[\u3041-\u3096]/g, function(match) {

　　　var chr = match.charCodeAt(0) + 0x60;

　　　return String.fromCharCode(chr);

　});

}

このコードを貼り付ければ終わり、、、なのですが流石に仕組みを理解しないまま実装する訳にいかないので、どういう方法で変換されているか解読してみました。

＜２行目＞

　引数で渡された str に対して replace メソッドを実行しています。

　replace メソッドは、第一引数にマッチした文字列を、第二引数として指定された文字列や無名関数に変換する もので、今回の場合第一引数に正規表現でUnicode表現で平仮名全てを指定しています。gが付いている為全てを参照します。

　仮に「あい」という文字列が渡されたとすると下図を参照して u3042 u3044 というコードになり、マッチします。

　そして「あい」が何に変化されるかというと、第二引数の無名関数 function(match) が実行されます。

＜３行目＞

　変数 chr を宣言し、そこに match.charCodeAt(0) + 0x60; を代入しています。

　matchは「あい」で、charCodeAt()メソッドは文字列の中の指定された位置にある文字の文字コードを返す、というものなので「あい」の「あ」が u3042 に変換されて + 0x60 されます。

　上図でも分かる様に u3042に0x60を足すとu30A2になり「ア」のコードとなります。（規則性を持って配置されている為、平仮名のコードに16進数の60を足す事でカタカナになる様です）

　そして「い」に対しても同じ様に処理されて、 u30A2 u30A4 というコードが返ります。

＜４行目＞

　String.fromCharCode()メソッドによって今度は、コードを文字列に変換して返しています。

　u30A2 u30A4 が アイ に変換されます。

最終的に「あい」が入力された場合は、'あい'.replace('あい', 'アイ') が実行された事になり、カタカナに変わるという仕組みです。

仕組みが分かるとスッキリしました。逆にカタカナを平仮名にするにはどうすれば良いかも分かりました。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）