ReactApps

2019年3月7日

入力を半角カタカナに変換する

wuohv-isu

はじめに

ローカル環境でこのサンプルを動かすには以下の手順に従ってください。

$ git close git@github.com:reiwa/reactapps.git
$ cd reactapps
$ yarn
$ yarn workspace kana start

※ $の部分はペーストしないでください。

内容

ユーザが入力した文字を半角カタカナに変換して表示します。
半角カタカナ以外にも空白やアルファベットなど特定の文字を置換しIDを生成するなど考えられます。

コード

import React, { Fragment, FunctionComponent, useState } from 'react'

const App: FunctionComponent = () => {
  const [text, setText] = useState('')

  return (
    <Fragment>
      <input onChange={event => setText(event.target.value)} value={text} />
      <p>{toKatakana(text)}</p>
    </Fragment>
  )
}

const toKatakana = (string: string) => {
  return string
    .replace(/[ぁ-ゔ]/g, s => String.fromCharCode(s.charCodeAt(0) + 0x60))
    .replace(/゙/g, '゛')
    .replace(/゚/g, '゜')
    .replace(/(ウ゛)/g, 'ヴ')
    .replace(/(ワ゛)/g, 'ヷ')
    .replace(/(ヰ゛)/g, 'ヸ')
    .replace(/(ヱ゛)/g, 'ヹ')
    .replace(/(ヲ゛)/g, 'ヺ')
    .replace(/(ゝ゛)/g, 'ヾ')
    .replace(/ゝ/g, 'ヽ')
    .replace(/ゞ/g, 'ヾ')
    .replace(/ゕ/g, 'ヵ')
    .replace(/ゖ/g, 'ヶ')
    .split('')
    .map(key => katakana.get(key) || key)
    .join('')
}

const katakana = new Map([
  ['ア', 'ア'],
  ['イ', 'イ'],
  ['ウ', 'ウ'],
  ['エ', 'エ'],
  ['オ', 'オ'],
  ['カ', 'カ'],
  ['キ', 'キ'],
  ['ク', 'ク'],
  ['ケ', 'ケ'],
  ['コ', 'コ'],
  ['サ', 'サ'],
  ['シ', 'シ'],
  ['ス', 'ス'],
  ['セ', 'セ'],
  ['ソ', 'ソ'],
  ['タ', 'タ'],
  ['チ', 'チ'],
  ['ツ', 'ツ'],
  ['テ', 'テ'],
  ['ト', 'ト'],
  ['ナ', 'ナ'],
  ['ニ', 'ニ'],
  ['ヌ', 'ヌ'],
  ['ネ', 'ネ'],
  ['ノ', 'ノ'],
  ['ハ', 'ハ'],
  ['ヒ', 'ヒ'],
  ['フ', 'フ'],
  ['ヘ', 'ヘ'],
  ['ホ', 'ホ'],
  ['マ', 'マ'],
  ['ミ', 'ミ'],
  ['ム', 'ム'],
  ['メ', 'メ'],
  ['モ', 'モ'],
  ['ヤ', 'ヤ'],
  ['ユ', 'ユ'],
  ['ヨ', 'ヨ'],
  ['ラ', 'ラ'],
  ['リ', 'リ'],
  ['ル', 'ル'],
  ['レ', 'レ'],
  ['ロ', 'ロ'],
  ['ワ', 'ワ'],
  ['ヲ', 'ヲ'],
  ['ン', 'ン'],
  ['ァ', 'ァ'],
  ['ィ', 'ィ'],
  ['ゥ', 'ゥ'],
  ['ェ', 'ェ'],
  ['ォ', 'ォ'],
  ['ッ', 'ッ'],
  ['ャ', 'ャ'],
  ['ュ', 'ュ'],
  ['ョ', 'ョ'],
  ['ガ', 'ガ'],
  ['ギ', 'ギ'],
  ['グ', 'グ'],
  ['ゲ', 'ゲ'],
  ['ゴ', 'ゴ'],
  ['ザ', 'ザ'],
  ['ジ', 'ジ'],
  ['ズ', 'ズ'],
  ['ゼ', 'ゼ'],
  ['ゾ', 'ゾ'],
  ['ダ', 'ダ'],
  ['ヂ', 'ヂ'],
  ['ヅ', 'ヅ'],
  ['デ', 'デ'],
  ['ド', 'ド'],
  ['バ', 'バ'],
  ['ビ', 'ビ'],
  ['ブ', 'ブ'],
  ['ベ', 'ベ'],
  ['ボ', 'ボ'],
  ['パ', 'パ'],
  ['ピ', 'ピ'],
  ['プ', 'プ'],
  ['ペ', 'ペ'],
  ['ポ', 'ポ'],
  ['ヴ', 'ヴ'],
  ['ヷ', 'ヷ'],
  ['ヺ', 'ヺ'],
  ['。', '。'],
  ['、', '、'],
  ['ー', 'ー'],
  ['「', '「'],
  ['」', '」'],
  ['・', '・'],
  ['゛', '゙'],
  ['゜', '゚'],
])

export default App

いくつかポイント

コンポーネントは入力した状態を持ち、入力はtoKatakana関数によって半角カタカナに変換されます。

const [text, setText] = useState('')

return (
    <Fragment>
      <input onChange={event => setText(event.target.value)} value={text} />
      <p>{toKatakana(text)}</p>
    </Fragment>
  )

カタカナを半角カタカナに変換するMapをつくっています。

const katakana = new Map([
  ['ア', 'ア'],
  ['イ', 'イ'],
  ['ウ', 'ウ'],
  ['エ', 'エ'],
  ['オ', 'オ'],
  ['カ', 'カ'],
  ['キ', 'キ']
])

半角カタカナに変換する関数を定義します。

const toKatakana = (string: string) => {
  return string
    .replace(/[ぁ-ゔ]/g, s => String.fromCharCode(s.charCodeAt(0) + 0x60))
    .replace(/゙/g, '゛')
    .replace(/゚/g, '゜')
    .replace(/(ウ゛)/g, 'ヴ')
    .replace(/(ワ゛)/g, 'ヷ')
    .replace(/(ヰ゛)/g, 'ヸ')
    .replace(/(ヱ゛)/g, 'ヹ')
    .replace(/(ヲ゛)/g, 'ヺ')
    .replace(/(ゝ゛)/g, 'ヾ')
    .replace(/ゝ/g, 'ヽ')
    .replace(/ゞ/g, 'ヾ')
    .replace(/ゕ/g, 'ヵ')
    .replace(/ゖ/g, 'ヶ')
    .split('')
    .map(key => katakana.get(key) || key)
    .join('')
}