【タイピングゲーム第3回】Composition APIで整理する - スマレジエンジニアyushiのブログ

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

yushi-dev.hatenablog.com

今回は、Composition APIを導入します。

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

Vue.js3
Vite

Composition APIについて

Composition APIについては、過去記事で言及しています。
Vue3の目玉機能の一つかなと思います。

yushi-dev.hatenablog.com

composableの実装

2つのcomposableを作成しました。

1. use-text-generator

import { ref, computed } from 'vue'

const DUMMY_TEXTS = [
  // サンプルデータ.
  'inu',
  'tako',
  'saru',
  'kuni',
  'kutsu',
  'kusa',
  'matsu',
  'kame',
  'tai',
  'teko',
  'tora',
  'gyuunyuu',
  'mitsubachi',
  'rakko',
  'koara',
  'ramune',
  'neko',
  'koshiann',
  'amaguri',
]

export default function useTextGenerator(texts: string[] = DUMMY_TEXTS) {
  const usedIndexes = ref<number[]>([])

  const remainingIndexes = computed(
    () => [...Array(texts.length).keys()]
      .filter((i) => !usedIndexes.value.includes(i))
  )

  const generate = () => {
    const index = remainingIndexes.value[
      Math.floor(Math.random() * remainingIndexes.value.length)
    ]
    usedIndexes.value.push(index)

    if (remainingIndexes.value.length === 0) {
      reset()
    }

    return texts[index]
  }

  const reset = () => {
    usedIndexes.value = []
  }

  return {
    generate,
    reset,
  }
}

ソースにハードコードしたテキスト（DUMMY_TEXTS）を、ランダム順で返却する機能です。
現在のロジックでは、ローマ字にのみ対応しています。

2. use-text-typer

import { ref, computed } from 'vue'

export default function useTextTyper() {
  const text = ref('')
  const input = ref('')

  const remainingText = computed(() => text.value.slice(input.value.length))

  const set = (_text: string) => {
    text.value = _text
    input.value = ''
  }

  const type = (key: string) => {
    if (key !== remainingText.value.slice(0, 1)) {
      return false
    }

    input.value += key

    return true
  }

  return {
    // data
    text,
    input,

    // computed
    remainingText,

    // methods
    set,
    type,
  }
}

こちらは、一つ一つのテキストについて、その入力状況を管理する機能です。

Pull Request

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

まとめ

やっぱり、vueファイルからロジックを独立させられるのは可読性が高まって便利です。