初心者でも簡単！JavaScriptで作るタイピングゲーム

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

皆さん、こんにちは👋！  
今回は、**タイピングスピードテスト**を作成する方法を、HTML・CSS・JavaScript を使ってステップバイステップで解説します。  
本記事は、プログラミング初心者の方でも理解しやすいように、各コード例や図解、そして実際に動作するサンプルコードを交えながら進めていきます。  


---

![スクリーンショット 2025-03-06 9.43.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/2d8747b6-5cf3-4a14-8a8f-c115cdb59e8a.png)


## 目次
- [プロジェクトの概要](#プロジェクトの概要)
- [HTML部分の実装](#HTML部分の実装)
- [CSS部分の実装](#CSS部分の実装)
- [JavaScript部分の実装](#JavaScript部分の実装)
- [動作フローの図解](#動作フローの図解)
- [まとめと今後の展望](#まとめと今後の展望)
- [参考リンク](#参考リンク)

---

## プロジェクトの概要

このタイピングゲームは、ユーザーが表示された日本語の文章をできるだけ速く正確に入力することで、タイピングスピード（文字/分）を計測するシンプルなゲームです。  

**主な機能：**
- **開始ボタン**をクリックすると、テスト用文章が表示されます。  
- 出題された文章を**正確に**タイピングすることで、入力の正確さと速度を測定します。  
- ゲーム終了時には、正確に入力できた文字数とタイピング速度を算出して表示します。

このプロジェクトを通して、以下のことを学びます：
- Webページの基本構造（HTML）
- ユーザーインターフェイスの整え方（CSS）
- イベント駆動型プログラミングとタイマー制御（JavaScript）

---

## HTML部分の実装

まずは、基本のHTMLファイルを作成します。  
HTMLは、各要素（見出し、ボタン、テキストエリア、結果表示領域）を配置し、操作の基盤となる構造を定義します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイピングスピードテスト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>タイピングスピードテスト</h1>
    <button id="start-button">開始</button>
    <div id="text"></div>
    <textarea id="typing-area" placeholder="ここにタイピング"></textarea>
    <div id="result"></div>
    <script src="app.js"></script>
</body>
</html>
```

**ポイント：**  
- ``  
  ゲーム開始のトリガーとなるボタンです。  
- ``  
  出題される文章を表示します。初期状態は非表示にしておき、開始時に表示します。  
- ``  
  ユーザーが実際にタイピングするエリアです。  
- ``  
  タイピング完了後に結果（正解数と文字速度）を表示する領域です。

---

## CSS部分の実装

次に、デザインとレイアウトを整えるためにCSSを設定します。  
以下のコードはシンプルながらも洗練された見た目を実現しており、ユーザビリティを高めています。

```css
/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #555;
}

#start-button {
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

#start-button:hover {
    background-color: #0056b3;
}

#text {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #777;
    display: none; /* 初期状態で非表示 */
    text-align: center;
}

#typing-area {
    width: 80%;
    max-width: 600px;
    height: 100px;
    padding: 15px;
    font-size: 1.2em;
    border: 2px solid #007BFF;
    border-radius: 8px;
    outline: none;
    resize: none;
    transition: border-color 0.3s;
}

#typing-area:focus {
    border-color: #0056b3;
}

#result {
    margin-top: 20px;
    font-size: 1.2em;
    color: #007BFF;
}
```

**ポイント：**  
- すべての要素が中央に配置されるようにして、視認性と操作性を向上。  
- ボタンにはホバー時の配色変更など、インタラクティブな演出を追加しています。  
- `#text` 要素は初期状態で `display: none;` とし、開始時に表示するよう設定しています。

---

## JavaScript部分の実装

JavaScriptでは、ゲームのロジック全般を実装します。  
ここでは、開始ボタンのクリックイベント、タイピング入力の監視、正確性と速度の計算などを実現しています。

```javascript
// app.js
document.addEventListener('DOMContentLoaded', function() {
    const startButton = document.getElementById('start-button');
    const textElement = document.getElementById('text');
    const typingArea = document.getElementById('typing-area');
    const resultElement = document.getElementById('result');

    let startTime, endTime, correctCount = 0;

    // ゲーム開始時の初期設定
    function startTest() {
        correctCount = 0;
        startTime = new Date().getTime();
        textElement.textContent = "日本語のタイピングテストは、あなたのタイピングスキルを測定するためのツールです。以下の文章を正確にタイピングしてください。";
        textElement.style.display = "block"; // テキストを表示
        typingArea.value = '';
        typingArea.focus();
    }

    // ゲーム終了時の処理
    function endTest() {
        endTime = new Date().getTime();
        const elapsedTime = (endTime - startTime) / 1000; // 秒単位
        const wordsPerMinute = (correctCount / elapsedTime) * 60;
        resultElement.textContent = `正解数: ${correctCount}, スピード: ${wordsPerMinute.toFixed(2)} 文字/分`;
    }

    // ユーザー入力の正確さをチェック
    function checkInput() {
        const targetText = textElement.textContent;
        const userText = typingArea.value;
        // 入力が完全に一致している場合、終了処理
        if (userText === targetText) {
            endTest();
        } else {
            correctCount = 0;
            // 入力文と正解文を先頭から順に比較
            for (let i = 0; i  B[タイピングテスト開始]
    B --> C[テキスト表示 & 入力エリアにフォーカス]
    C --> D[ユーザーが文字を入力]
    D --> E[入力内容を逐次チェック]
    E -- 完全一致 --> F[タイマー停止 / 結果計算]
    E -- 部分一致 --> D
    F --> G[結果表示]
```

---

## まとめと今後の展望

今回のプロジェクトでは、HTML、CSS、JavaScript の基本的な要素を実践的に使いながら、シンプルなタイピングゲームを実装しました。これにより、以下の点が学べました：

- **HTML:**  
  ユーザーインターフェイスの基本構造を作成し、各機能の土台を整える。
  
- **CSS:**  
  ユーザーがストレスなく操作できるようなデザインおよびインタラクティブな要素の実装。

- **JavaScript:**  
  ユーザー入力の取得、文字ごとの正誤チェック、タイマー計測を行い、リアルタイムでフィードバックを提供する仕組みの理解。

今後は、さらなる機能追加（例えば、タイピングミス時のハイライト表示やランキング機能）やデザイン改善を試み、より高度なWebアプリケーションの開発にチャレンジしてみてください！🎉

<p class="codepen" data-height="472" data-default-tab="result" data-slug-hash="azbWQog" data-pen-title="タイピングスピードテスト" data-editable="true" data-user="yamamotoyushi" style="height: 472px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/azbWQog">
  タイピングスピードテスト</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


---

## 参考リンク

- [MDN Web Docs - HTML](https://developer.mozilla.org/ja/docs/Web/HTML)  
- [MDN Web Docs - CSS](https://developer.mozilla.org/ja/docs/Web/CSS)  
- [MDN Web Docs - JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript)  

---

### 最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)

🌳 [らくらくサイト](https://rakuraku-site.prodouga.com/)