ラッコWeb 
追記: Webアプリにしました！
ぜひ使ってみてください♪
全角←→半角 を変換！
みなさん、こんにちは。どんぶラッコです。
今日は、全角カタカナを半角カタカナに変換する方法についてお話しします。
先日たまたま半角カタカナを入力しなければいけない機会があったのですが、macでどうやって半角カナを入力すればいいのかがわからなかったので（！）アプリを作ってしまいました笑
使い方は至ってシンプルで、上のテキストフィールドに入力をしてもらい、変換したい対象を選択する (全角カタカナにする or 半角カタカナにする)と、対象を変換してくれるツールです。
この記事ではこの全角←→半角 の変換ロジック部分についてお伝えします！
実際のアプリではVue.jsを使っていますが、JavaScriptに直してお伝えします
デモ & ソースコード
See the Pen 全角カタカナを半角カタカナに変換する by cha1ra (@cha1ra) on CodePen.
HTML
<section>
<div>
全角カタカナ→半角カタカナ に変換
</div>
<input type="text" id="input">
<button id="henkan">変換</button>
</section>
<section>
<p>結果</p>
<p id="result"></p>
</section>JavaScript
const charDict = {
zenkaku: [
'ア', 'イ', 'ウ', 'エ', 'オ', 'カ', 'キ', 'ク', 'ケ', 'コ', 'サ', 'シ', 'ス', 'セ', 'ソ',
'タ', 'チ', 'ツ', 'テ', 'ト', 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ', 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ',
'マ', 'ミ', 'ム', 'メ', 'モ', 'ヤ', 'ユ', 'ヨ', 'ラ', 'リ', 'ル', 'レ', 'ロ', 'ワ', 'ヲ', 'ン',
'ァ', 'ィ', 'ゥ', 'ェ', 'ォ', 'ッ', 'ャ', 'ュ', 'ョ', 'ー', '。', '、', '「', '」',
'ガ', 'ギ', 'グ', 'ゲ', 'ゴ', 'ザ', 'ジ', 'ズ', 'ゼ', 'ゾ', 'ダ', 'ヂ', 'ヅ', 'デ', 'ド',
'バ', 'ビ', 'ブ', 'ベ', 'ボ', 'パ', 'ピ', 'プ', 'ペ', 'ポ', 'ヴ', 'ヷ', 'ヺ',
'０', '１', '２', '３', '４', '５', '６', '７', '８', '９',
'Ａ', 'Ｂ', 'Ｃ', 'Ｄ', 'Ｅ', 'Ｆ', 'Ｇ', 'Ｈ', 'Ｉ', 'Ｊ', 'Ｋ', 'Ｌ', 'Ｍ', 'Ｎ',
'Ｏ', 'Ｐ', 'Ｑ', 'Ｒ', 'Ｓ', 'Ｔ', 'Ｕ', 'Ｖ', 'Ｗ', 'Ｘ', 'Ｙ', 'Ｚ',
'ａ', 'ｂ', 'ｃ', 'ｄ', 'ｅ', 'ｆ', 'ｇ', 'ｈ', 'ｉ', 'ｊ', 'ｋ', 'ｌ', 'ｍ', 'ｎ',
'ｏ', 'ｐ', 'ｑ', 'ｒ', 'ｓ', 'ｔ', 'ｕ', 'ｖ', 'ｗ', 'ｘ', 'ｙ', 'ｚ'
],
hankaku: [
'ｱ', 'ｲ', 'ｳ', 'ｴ', 'ｵ', 'ｶ', 'ｷ', 'ｸ', 'ｹ', 'ｺ', 'ｻ', 'ｼ', 'ｽ', 'ｾ', 'ｿ',
'ﾀ', 'ﾁ', 'ﾂ', 'ﾃ', 'ﾄ', 'ﾅ', 'ﾆ', 'ﾇ', 'ﾈ', 'ﾉ', 'ﾊ', 'ﾋ', 'ﾌ', 'ﾍ', 'ﾎ',
'ﾏ', 'ﾐ', 'ﾑ', 'ﾒ', 'ﾓ', 'ﾔ', 'ﾕ', 'ﾖ', 'ﾗ', 'ﾘ', 'ﾙ', 'ﾚ', 'ﾛ', 'ﾜ', 'ｦ', 'ﾝ',
'ｧ', 'ｨ', 'ｩ', 'ｪ', 'ｫ', 'ｯ', 'ｬ', 'ｭ', 'ｮ', 'ｰ', '｡', '､', '｢', '｣',
'ｶﾞ', 'ｷﾞ', 'ｸﾞ', 'ｹﾞ', 'ｺﾞ', 'ｻﾞ', 'ｼﾞ', 'ｽﾞ', 'ｾﾞ', 'ｿﾞ', 'ﾀﾞ', 'ﾁﾞ', 'ﾂﾞ', 'ﾃﾞ', 'ﾄﾞ',
'ﾊﾞ', 'ﾋﾞ', 'ﾌﾞ', 'ﾍﾞ', 'ﾎﾞ', 'ﾊﾟ', 'ﾋﾟ', 'ﾌﾟ', 'ﾍﾟ', 'ﾎﾟ', 'ｳﾞ', 'ﾜﾞ', 'ｦﾞ',
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
]
}
const regExp = new RegExp(`(${charDict.zenkaku.join('|')})`, 'g')
document.querySelector('#henkan').addEventListener('click', () => {
const value = document.querySelector('#input').value
const result = value.replace(regExp, match => {
const index = charDict.zenkaku.indexOf(match)
return charDict.hankaku[index]
})
document.querySelector('#result').innerHTML = result
})解説
実は、全角や半角の定義ブロック, DOM操作の行を除けば、変換の処理は4行で完結してしまいます。
const regExp = new RegExp(`(${charDict.zenkaku.join('|')})`, 'g')ここでまず正規表現を定義しています。結果、 /(ア|イ|ウ|エ|オ| .... |ｚ)/g となります。
続いて、実際に変換処理をしているパートです。
const result = value.replace(regExp, match => {
const index = charDict.zenkaku.indexOf(match)
return charDict.hankaku[index]
})inputの値を取得した value 文字列に対して replace メソッドを使っています。
replaceは
"文字列".replace("文字", "数")
// "数列" になるのように第１引数に検索する文字、第２引数に置換する文字を入力することで対象の文字を置き換えることができます。
この第１引数に正規表現を、第２引数に replacerFunction を取ることもできます。
"ラッコがラッコに恋をする".replace(/ラッコ/g, match => {
return match + "さん"
})
// ラッコさんがラッコさんに恋をする上記の例であれば、/ラッコ/g で、全てのラッコという文字列に対する指定を書きます。 matchにはマッチした文字列が入ってきます(今回の場合は “ラッコ”)。
そして、return に置換後の文字列を記入します。
この仕組みを使えば絶対に敬語に変換してくれるbotなんかが作れますね！笑
ということで、改めてコード内容を見てみましょう。
const result = value.replace(regExp, match => {
const index = charDict.zenkaku.indexOf(match)
return charDict.hankaku[index]
})regExp には先ほど指定した正規表現が、 match には一致した文字列が入ってくるんでしたね。
なので例えば ネコかわいい という文字列を入力したら match には
"ネ" "コ" が順番に match に入ってきます。
あとは、indexOf を使って配列の何番目であるかを算出し、 return で 半角文字をリターンしています。
この記事のまとめ
以上、ロジックの解説でした！みなさんもチャレンジしてみてください♪
