英単語難しいなぁ。せや、タイピングゲーム作って練習しよ。

この記事は新歓ブログリレー2024 21日目の記事です。

こんにちは。23B の hayatroid です。普段は競プロをしたり、競プロ以外をしたりします。

英単語を覚えたい !

東工大では、TOEIC 等で一定以上のスコアを取得するとかなりの恩恵を受けられる^[1]ことが知られています。いやー良いスコア取りたい。

そんなわけで、まずは英単語を金のフレーズで勉強。

fmfm、なるほど。いやー †完全に理解した† 。うーん、これで今日も TOEICスコア爆上がりホカホカハッピーday になること間違いナシ !

……とはいかないのが世の常。途中からやる気がなくなってしまい、巻頭の Let's try anyway. は異様に覚えているのに、他の例文は全く覚えていない状態になってしまいがちです。普通に読み進めるのも全然アリではあるのですが、たまには刺激が欲しいです。そんなときには タイピングゲーム を作ることをおすすめします。

タイピングゲームを作ろう !

突然ですが金のフレーズってめちゃくちゃタイピングゲームにしやすそうな見た目をしていませんか ? (読んだことのない人は画像検索をしてみてください。)

というわけで、金のフレーズをタイピングゲームにしてみました。

作りました

英単語の隠された部分をタイピングするゲームです。
プレイするにはこちらから : https://english-typing.trap.show/

上記のサイトおよび画像内で使用されている例文は、金のフレーズに掲載されている例文とは全く関係のないものです。ご了承ください。

作ってよかった

タイピングゲームで英単語学習をしてみて、以下のようなメリットを感じました。

穴があると埋めたくなるので、やる気が続く
スペルが覚えられる

これはもう作るしかありません。

どうやって作るの

今回は Vite + Vue.js + TypeScript で作っていこうと思います。この構成にした理由は

なろう講習会を受講したら Vue 使いたすぎ ! になった
traP 内でよく見かける構成だった
なろう講習会を受講したら Vue 使いたすぎ ! になった
なろう講習会を受講したら Vue 使いたすぎ ! になった

などが挙げられます。それでは早速作っていきましょう。

リポジトリはこちらから : https://github.com/hayatroid/english-typing

環境構築

なろう講習会の資料を見ながら環境構築するとよいです。

ターミナルを使ったことがない人
→ 環境構築 | なろう講習会の「WSL の導入(Windows を使っている人のみ)」「Homebrew の導入(Mac を使っている人のみ)」の項を進めるとよいです。
テキストエディタを使ったことがない人
→ 環境構築 | なろう講習会の「VSCode の導入」の項を進めるとよいです。
npm コマンドを使ったことがない人
→ Vue 入門 | なろう講習会の「Node.jsの導入」の項を進めるとよいです。
Vue を使うのに便利な拡張機能を入れたことがない人
→ Vue 入門 | なろう講習会の「Vue を書く準備」の項を進めるとよいです。

コマンドを叩く

まずは npm create vite@latest をします。

Project name は english-typing などとしておきます。
Select a framework は Vue を選択します。
Select a variant は TypeScript を選択します。

次に

cd english-typing
npm install
npm run dev

をします。しばらくすると URL が表示されるのでアクセスします (デフォルトでは http://localhost:5173/) 。以下のような画面が表示されたら OK です。

該当 commit: f8308d4

ファイルを消したり作ったり

src/components/ 内のファイルを全て消します。166cc71

src/components/ 内に Game.vue および Title.vue というファイルを作成します。ファイルの中身は必要最小限のコードにしておきます。6c32dcf

src/App.vue の中身も必要最小限のコードに書き換えておきます。741bea8

このページに全てのソースコードを載せることはしないので、適宜該当 commit から確認してください。

以降、ゲーム画面については Game.vue に、タイトル画面については Title.vue に、その両方を管理するコードについては App.vue に書いていきます。

単語データを生成する

金のフレーズのデータをそのまま使っては著作権的にまずいので、ここでは ChatGPT に代わりのデータを生成してもらうことにします。

まずはイディオムを考えるようお願いしてみます。

考えてくれました。ありがとうございます。

このままだと TypeScript で読み込めないので、JSON 形式に変換してもらいましょう。ここではデータは配列で与えられ、各データは word、idiom_en、idiom_ja というフィールドを持つことにします。具体的な指示を与えるとよさそうです。

JSON 形式に変換してもらえました。ありがとうございます。

生成してもらった JSON ファイルを、src/assets/idioms.json として保存します。bfc183c

生成が上手くいかなかった場合は、リポジトリ内のデータをコピーして使ってください。

イディオムを表示させる

画面に英語のイディオムとその和訳を表示します。src/assets/idioms.json からデータを取り出すには、たとえば以下のようにすればよいです。b9c4ddd

import idioms from '../assets/idioms.json'

const id = 0
const idiom_en = idioms[id].idiom_en
const idiom_ja = idioms[id].idiom_ja

イディオムに色をつけたり伏字にしたり

idiom_en は連続する部分文字列として word を含みます。
idiom_en の中での word の開始位置を $start$ 、終了位置を $end$ とおきます (idiom_en の $[start, end)$ が word に一致するようにします) 。

いま idiom_en の $pos$ 文字目を入力しようとしているとすると、idiom_en の

$[0, start)$ は黒文字
$[start, pos)$ は赤文字
$[pos, end)$ は薄い赤文字かつ伏字
$[end, \infty)$ は黒文字

で表示させたいです (ただし、 $\infty$ は idiom_en の長さを表す) 。つまり、下の表のようにしたいです。

各変数の値	表示
$start = 5, pos = 6, end = 9$	it's r---ing cats and dogs
$start = 5, pos = 7, end = 9$	it's ra--ing cats and dogs
$start = 5, pos = 8, end = 9$	it's rai-ing cats and dogs
$start = 5, pos = 9, end = 9$	it's raining cats and dogs

$start, end$ は indexOf() メソッドを用いて以下のように求められます。また、 $pos$ の初期値は $start + 1$ にしておけばよいです。71c60d8

const start = idiom_en.indexOf(word)
const pos = start + 1
const end = start + word.length

さらに、 $start, pos, end$ を用いると、色付けおよび伏字処理された文字列 idiom_en_converted を以下のように求めることができます。

const idiom_en_converted = () => {
  let res = ''
  res += idiom_en.slice(0, start)
  res += `<span style="color: red">${idiom_en.slice(start, pos)}</span>`
  res += `<span style="color: pink">${'-'.repeat(end - pos)}</span>`
  res += idiom_en.slice(end)
  return res
}

また $pos$ を ref() に、idiom_en_converted を computed() にすると、 $pos$ を変更するだけで idiom_en_converted を再計算させることができます。d68b5e6

キー入力を取得し、判定する

押されたキーが idiom_en の $pos$ 文字目に一致するとき、 $pos$ を $1$ 進めればよいです。リアクティビティにより $pos$ を $1$ 進めるだけで idiom_en_converted の再描画が起こるので、他に何もすることはありません。66ea08f

$pos$ が $end$ に到達したときは、次のイディオムに移るようにしたいです。子コンポーネントで $pos$ が $end$ に到達したことを検知したら、emits で親コンポーネントの変数 $id$ の値を $1$ 増やすなどとすればよいです。e3c65e0

ゲームスタート、ゲームクリアを実装する

Title.vue に「ゲームスタート ! 」と書かれたボタンを追加します。ボタンが押されたら、emits で親コンポーネントの変数 $is_playing$ の値を $true$ にし、 $is_playing$ の値に応じて Game.vue を表示するか Title.vue を表示するか切り替えるなどとすればよいです。5549e32

$id$ が idioms の長さに到達したときは、ゲームクリアと表示し、タイトル画面に戻るようにしたいです。これは、ゲームクリアの表示をしたあと、emits で親コンポーネントの変数 $is_playing$ の値を $false$ にすればよいです。b331ab9

見た目を整える

文字を大きくします。また、等幅フォントを使うことで、文字を入力する度に文字がずれてしまうことを防ぎます。d4d7bd6

完成 !

プレイするにはこちらから : https://english-typing.trap.show/

このゲームあるある

わからない単語が出てきたときにキーボード総当たりするガチャガチャタイムがある
e-mail 等のアルファベットでない文字を含む単語が来ると終わる (実装を工夫しよう)

おわりに

タイピングゲームを作って幸せな英単語学習ライフを送りましょう。

明日は Qro さんの記事です。お楽しみに！

2024 年度の学修案内参照。英検 1 級、TOEIC L&R 875 点以上、TOEFL iBT 100 点以上、IELTS 7.0 以上のうちどれか 1 つでも満たせば、1, 2 年次の必修英語科目 (うち、未修得のもの) の単位を認定してもらえる。認定された科目は満点扱いとなる。 ↩︎