# イベントを使ったゲーム作成
ボタンをクリックしたり、テキストボックスに入力したりすると、ウェブサイトがどうやってそれを認識するのか不思議に思ったことはありませんか？それがイベント駆動型プログラミングの魔法です！この重要なスキルを学ぶために、何か役立つものを作りましょう。例えば、あなたのキー入力に反応するタイピング速度ゲームです。
ウェブブラウザがどのようにしてJavaScriptコードと「会話」するのかを実際に体験できます。クリック、入力、マウス移動のたびに、ブラウザは小さなメッセージ（これをイベントと呼びます）をコードに送信し、あなたがその応答を決めるのです！
この講座が終わる頃には、速度と正確さを追跡する本格的なタイピングゲームを作成できるようになります。そして、これまで使ったすべてのインタラクティブなウェブサイトを支える基本的な概念を理解することができます。それでは始めましょう！
## 講義前のクイズ
[講義前のクイズ](https://ff-quizzes.netlify.app/web/quiz/21)
## イベント駆動型プログラミング
お気に入りのアプリやウェブサイトについて考えてみてください。それが生き生きとしていて反応が良いと感じるのはなぜでしょうか？それは、あなたの行動にどのように反応するかにかかっています！タップ、クリック、スワイプ、キー入力のたびに「イベント」と呼ばれるものが発生し、ウェブ開発の本当の魔法がそこにあります。
ウェブプログラミングが面白い理由はここにあります。誰かがボタンをクリックしたり、テキストボックスに入力を始めたりするタイミングは予測できません。すぐにクリックするかもしれないし、5分待つかもしれないし、全くクリックしないかもしれません！この予測不可能性のため、コードの書き方を異なる視点で考える必要があります。
レシピのように上から下へと実行されるコードを書くのではなく、何かが起こるのをじっと待つコードを書くのです。これは、1800年代の電信オペレーターが機械のそばに座り、ワイヤーを通じてメッセージが届く瞬間に応答する準備をしていたのに似ています。
では、「イベント」とは具体的に何でしょうか？簡単に言えば、それは何かが起こることです！ボタンをクリックすること、それがイベントです。文字を入力すること、それもイベントです。マウスを動かすこと、それもまたイベントです。
イベント駆動型プログラミングでは、コードを設定して待機し、応答することができます。特定のことが起こるのを待つ特別な関数、つまり**イベントリスナー**を作成し、それが起こったときにすぐに動作します。
イベントリスナーをコードのためのドアベルのように考えてください。ドアベルを設定します（`addEventListener()`）、どんな音を聞くべきかを伝えます（例えば「クリック」や「キー入力」）、そして誰かが鳴らしたときに何をすべきかを指定します（あなたのカスタム関数）。
**イベントリスナーの仕組み:**
- **特定のユーザーアクション**（クリック、キー入力、マウス移動など）を待機
- **指定されたイベントが発生したときに**カスタムコードを実行
- **ユーザーの操作に即座に反応**し、シームレスな体験を提供
- **異なるリスナーを使用して**同じ要素で複数のイベントを処理
> **NOTE:** イベントリスナーを作成する方法は多数あります。匿名関数を使用したり、名前付き関数を作成したりできます。また、`click`プロパティを設定したり、`addEventListener()`を使用したりするショートカットもあります。この演習では、`addEventListener()`と匿名関数に焦点を当てます。これはウェブ開発者が最もよく使用する技術であり、最も柔軟性が高い方法です。`addEventListener()`はすべてのイベントに対応し、イベント名をパラメータとして提供できます。
### よく使われるイベント
ウェブブラウザは、リスニング可能なイベントを数十種類提供していますが、ほとんどのインタラクティブなアプリケーションはほんの一握りの基本的なイベントに依存しています。これらの主要なイベントを理解することで、洗練されたユーザーインタラクションを構築する基盤を得ることができます。
アプリケーションを作成する際にリスニング可能な[数十種類のイベント](https://developer.mozilla.org/docs/Web/Events)があります。基本的に、ユーザーがページ上で行うすべての操作がイベントを発生させます。これにより、ユーザーが望む体験を提供するための強力な手段が得られます。幸いにも、通常はほんの一握りのイベントだけで十分です。以下は一般的なイベントの例です（ゲーム作成時に使用する2つを含む）:
| イベント | 説明 | 主な使用例 |
|---------|------|-----------|
| `click` | ユーザーが何かをクリックした | ボタン、リンク、インタラクティブ要素 |
| `contextmenu` | ユーザーが右クリックした | カスタム右クリックメニュー |
| `select` | ユーザーがテキストを選択した | テキスト編集、コピー操作 |
| `input` | ユーザーがテキストを入力した | フォームの検証、リアルタイム検索 |
**これらのイベントタイプを理解する:**
- **特定の要素に対するユーザーの操作時にトリガーされる**
- **イベントオブジェクトを通じてユーザーの操作に関する詳細情報を提供**
- **レスポンシブでインタラクティブなウェブアプリケーションを作成可能**
- **異なるブラウザやデバイス間で一貫して動作**
## ゲーム作成
イベントの仕組みを理解したところで、その知識を実践に活かして何か役立つものを作りましょう。イベント処理を示しながら、重要な開発者スキルを身につけるタイピング速度ゲームを作成します。
JavaScriptのイベントの仕組みを探るためにゲームを作成します。このゲームではプレイヤーのタイピングスキルをテストします。タイピングスキルはすべての開発者にとって非常に重要なスキルです。面白い事実として、現在使用しているQWERTYキーボードレイアウトは1870年代にタイプライター用に設計されました。そして、今日でもプログラマーにとって良いタイピングスキルは非常に価値があります！ゲームの一般的な流れは以下のようになります:
```mermaid
flowchart TD
A[Player clicks Start] --> B[Random quote displays]
B --> C[Player types in textbox]
C --> D{Word complete?}
D -->|Yes| E[Highlight next word]
D -->|No| F{Correct so far?}
F -->|Yes| G[Keep normal styling]
F -->|No| H[Show error styling]
E --> I{Quote complete?}
I -->|No| C
I -->|Yes| J[Show success message with time]
G --> C
H --> C
```
**ゲームの仕組み:**
- **スタートボタンをクリックすると開始**し、ランダムな引用を表示
- **プレイヤーのタイピング進捗をリアルタイムで追跡**
- **現在の単語をハイライトしてプレイヤーの集中を促す**
- **タイピングエラーに即座に視覚的フィードバックを提供**
- **引用が完了したら合計時間を計算して表示**
それではゲームを作成し、イベントについて学びましょう！
### ファイル構成
コードを書く前に、整理しましょう！最初からきれいなファイル構成を持つことで、後々の頭痛を防ぎ、プロジェクトをよりプロフェッショナルにすることができます。😊
今回は、`index.html`（ページ構造用）、`script.js`（ゲームロジック用）、`style.css`（デザイン用）の3つのファイルだけでシンプルに進めます。この3つはウェブの大部分を支える基本的な構成です！
**コンソールまたはターミナルウィンドウを開き、以下のコマンドを実行して新しいフォルダを作成してください:**
```bash
# Linux or macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
**これらのコマンドの内容:**
- **プロジェクトファイル用の新しいディレクトリ`typing-game`を作成**
- **作成したばかりのディレクトリに自動的に移動**
- **ゲーム開発のためのクリーンな作業スペースを設定**
**Visual Studio Codeを開く:**
```bash
code .
```
**このコマンドの内容:**
- **現在のディレクトリでVisual Studio Codeを起動**
- **プロジェクトフォルダをエディタで開く**
- **必要な開発ツールにアクセス可能にする**
**Visual Studio Codeで以下の名前の3つのファイルをフォルダに追加してください:**
- `index.html` - ゲームの構造とコンテンツを含む
- `script.js` - ゲームロジックとイベントリスナーを処理
- `style.css` - 視覚的な外観とスタイリングを定義
## ユーザーインターフェースの作成
次に、ゲームのアクションがすべて行われるステージを作りましょう！これは宇宙船のコントロールパネルを設計するようなものです。プレイヤーが必要とするすべてが期待通りの場所にあることを確認する必要があります。
ゲームに実際に必要なものを考えてみましょう。タイピングゲームをプレイするとしたら、画面に何が表示されてほしいですか？以下が必要なものです:
| UI要素 | 目的 | HTML要素 |
|--------|------|---------|
| 引用表示 | タイプするテキストを表示 | `` with `id="quote"` |
| メッセージエリア | ステータスや成功メッセージを表示 | `
` with `id="message"` |
| テキスト入力 | プレイヤーが引用を入力する場所 | `` with `id="typed-value"` |
| スタートボタン | ゲームを開始 | `