【タイピングゲーム第4回】ひらがなに対応する - スマレジエンジニアyushiのブログ

タイピングゲームを作っています。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

Vue.js3
Vite

前回までは英字のみに対応していましたが、今回はひらがな対応をします。

ひらがな対応

ひらがなのローマ字打ちに対応していくのですが、重要なポイントは、ひらがなの打ち込み方は一意ではない、ということです。

例えば、

し -> si, shi
つ -> tu, tsu

など、複数の入力方式があります。これへの対応は結構大変です。

今回は対応Mapを作ることで対応していきます。

const LETTER_MAP = {
  'あ': ['a'],
  'い': ['i'],
  'う': ['u'],
  'え': ['e'],
  'お': ['o'],
  'か': ['ka'],
  'き': ['ki'],
  'く': ['ku'],
  'け': ['ke'],
  'こ': ['ko'],
  'さ': ['sa'],
  'し': ['si', 'shi'],
  'す': ['su'],
  'せ': ['se'],
  'そ': ['so'],
  'た': ['ta'],
  'ち': ['ti', 'chi'],
  'つ': ['tu', 'tsu'],
  'て': ['te'],
  'と': ['to'],
  'な': ['na'],
  'に': ['ni'],
  'ぬ': ['nu'],
  'ね': ['ne'],
  'の': ['no'],
  'は': ['ha'],
  'ひ': ['hi'],
  'ふ': ['hu', 'fu'],
  'へ': ['he'],
  'ほ': ['ho'],
  'ま': ['ma'],
  'み': ['mi'],
  'む': ['mu'],
  'め': ['me'],
  'も': ['mo'],
  'や': ['ya'],
  'ゆ': ['yu'],
  'よ': ['yo'],
  'ら': ['ra'],
  'り': ['ri'],
  'る': ['ru'],
  'れ': ['re'],
  'ろ': ['ro'],
  'わ': ['wa'],
  'を': ['wo'],
  'ん': ['nn'],
}

前回までは、入力値は

  const input = ref('')

という一つの変数で管理していましたが、今回以降は、

  const inputTextArray = ref<string[]>([])

では、ひらがなの単位で管理し、

  const inputCurrentLetter = ref('')

では、ひらがな一語内のローマ字を管理します。

他にも色々追記していますが、あとは地道にロジックを書いていく感じでした。

Pull Request

https://github.com/nek0meshi/typing/pull/4

まとめ

今回で一番基本的な平仮名には対応しましたが、"ん"や、撥音、拗音への対応はさらに複雑です。

引き続き頑張ります。