feature image

2024年3月28日 | ブログ記事

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

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

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

英単語を覚えたい !

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

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

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

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

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

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

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

作りました

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

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

作ってよかった

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

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

どうやって作るの

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

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

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

環境構築

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

コマンドを叩く

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

次に

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 形式に変換してもらいましょう。ここではデータは配列で与えられ、各データは wordidiom_enidiom_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 の開始位置を 、終了位置を とおきます (idiom_enword に一致するようにします) 。

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

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

各変数の値 表示
it's r---ing cats and dogs
it's ra--ing cats and dogs
it's rai-ing cats and dogs
it's raining cats and dogs

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

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

さらに、 を用いると、色付けおよび伏字処理された文字列 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
}

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

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

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

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

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

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

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

見た目を整える

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

完成 !

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

このゲームあるある

おわりに

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

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


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

hayatroid icon
この記事を書いた人
hayatroid

23B Rustで競技プログラミングをします

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2024年3月22日
traPグラフィック班の活動紹介2024
haru10 icon haru10
2024年3月17日
⑨でもわかる8bitアレンジ講習会
vPhos icon vPhos
2024年3月15日
個人開発として2週間でWebサービスを作ってみた話 〜「LABEL」の紹介〜
Natsuki icon Natsuki
2024年3月11日
思想の強いゲーム制作をしよう!
Kirby0717 icon Kirby0717
2023年10月20日
DIGI-CON HACKATHON 参加記事「Comic DoQ」
mehm8128 icon mehm8128
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記