【Phase 2】3作目完成：タイピングゲームで学ぶ配列とランダム処理

Phase 2の3作目。YouTubeで見つけたタイピングゲームを作成しました。配列、ランダム処理、inputイベントなど、新しい技術を習得した記録です。

公開URL: https://dondokoboy.github.io/typing-game/

きっかけ：YouTubeで面白いものを発見
1. 新しい学習方法の実践
2. 発見した動画
シンプル版から始める判断
1. 動画の機能は豊富だが…
タイピングゲームシンプル版の仕様
1. 機能
2. 画面構成
作成過程
新しく学んだ技術
完成したコードの全体像
クリックカウンターからの成長
1. クリックカウンター（2作目）
2. タイピングゲーム（3作目）
GitHubにアップロード・公開
1. コマンド実行
2. GitHub Pages有効化
Phase 2の成果物（3つ）
学んだこと
1. 技術面
2. 学習方法
感想
次のステップ

きっかけ：YouTubeで面白いものを発見

新しい学習方法の実践

Phase 2から始めた「3本柱」の学習方法：

Progate（体系的な基礎）
YouTube/Qiita（情報収集）← 今回使った
AI（サポート）

YouTube で「面白そう」を探す習慣が身についてきました。

発見した動画

URL: https://youtu.be/nE_ZIGhTlrQ

視聴した感想:

id/classの使い分けに気づいた
配列で問題文を管理していた
今までの応用でできそう
大枠は理解できた

「これ作りたい！」と思えた。

シンプル版から始める判断

動画の機能は豊富だが…

動画では色々な機能がありましたが、まずはシンプル版から作ることに決定。

理由:

小さく始めて、徐々に拡張する
基本機能が動けば、追加は後からできる
Phase 2の方針「完璧を求めず、まず作る」

タイピングゲームシンプル版の仕様

機能

✅ ランダムに単語が表示される
✅ 入力欄にタイプする
✅ 正解したら次の単語
✅ 正解数をカウント
✅ リセットボタン

画面構成

+---------------------------+
|    タイピングゲーム          |
+---------------------------+
|                           |
|   apple                   | ← ランダムな単語
|                           |
|   [入力欄_______]         | ← ここにタイプ
|                           |
|   正解数: 0               | ← スコア
|                           |
|   [リセット]               |
+---------------------------+

作成過程

Step 1: ファイル準備

typing-game/
  ├── index.html
  ├── style.css
  └── script.js

クリックカウンターと同じ構成。

Step 2: HTML作成

ポイント:

1. 単語表示エリア

<p class="word-display" id="wordDisplay">apple</p>

2. 入力欄（新要素）

<input 
  type="text" 
  id="inputField" 
  placeholder="ここにタイプしてください"
  autocomplete="off"
>

type="text": テキスト入力
placeholder: ヒント表示
autocomplete="off": 自動補完を無効化

3. スコア表示

正解数: <span id="scoreDisplay">0</span>

Step 3: CSS作成

特徴:

紫のグラデーション背景（クリックカウンターと統一）
大きな単語表示（48px）
入力欄のフォーカス効果（クリックすると青く光る）
等幅フォント（タイピングゲームらしく）

入力欄のフォーカス効果:

.input-field:focus {
  border-color: #764ba2;
  box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}

Step 4: JavaScript実装

ここが本番。新しい技術がたくさん登場します。

新しく学んだ技術

1. 配列（単語リスト）

配列とは、複数のデータをまとめて保存できる仕組み。

const words = [
  'apple',
  'banana',
  'orange',
  'grape',
  'lemon',
  'melon',
  'peach',
  'cherry',
  'kiwi',
  'mango'
];

アクセス方法:

words[0]  // 'apple'
words[1]  // 'banana'
words.length  // 10（配列の長さ）

クリックカウンターとの違い:

クリックカウンター: 1つの数値を管理
タイピングゲーム: 複数の単語を管理

2. ランダム処理

ランダムに単語を選ぶ仕組み:

function showRandomWord() {
  const randomIndex = Math.floor(Math.random() * words.length);
  currentWord = words[randomIndex];
  wordDisplay.textContent = currentWord;
}

Math.random(): 0〜1のランダムな小数を生成
Math.floor(): 小数点以下を切り捨て

動作の流れ:

Math.random() → 0.7362
0.7362 * 10 → 7.362
Math.floor(7.362) → 7
words[7] → 'cherry'

3. inputイベント（リアルタイム入力検知）

クリックカウンターとの違い:

クリックカウンター	タイピングゲーム
`'click'` イベント	`'input'` イベント
ボタンをクリックしたとき	文字を入力するたびに

inputField.addEventListener('input', checkInput);

文字を入力するたびに checkInput 関数が実行される

4. 入力値の取得と比較

入力された文字を取得:

const typedWord = inputField.value;

表示されている単語と比較:

if (typedWord === currentWord) {
  // 正解！
}

===: 完全一致で比較（文字列の比較）

5. 入力欄のクリア

正解したら入力欄を空にする:

inputField.value = '';

新しい単語を表示:

showRandomWord();

完成したコードの全体像

// 1. 配列で単語リスト
const words = ['apple', 'banana', ...];

// 2. HTML要素を取得
const wordDisplay = document.getElementById('wordDisplay');
const inputField = document.getElementById('inputField');
const scoreDisplay = document.getElementById('scoreDisplay');

// 3. 変数
let currentWord = '';
let score = 0;

// 4. ランダムに単語を表示
function showRandomWord() {
  const randomIndex = Math.floor(Math.random() * words.length);
  currentWord = words[randomIndex];
  wordDisplay.textContent = currentWord;
}

// 5. 入力チェック
function checkInput() {
  const typedWord = inputField.value;
  
  if (typedWord === currentWord) {
    score++;
    scoreDisplay.textContent = score;
    inputField.value = '';
    showRandomWord();
  }
}

// 6. イベントリスナー
inputField.addEventListener('input', checkInput);

// 7. ゲーム開始
showRandomWord();

クリックカウンターからの成長

クリックカウンター（2作目）

使った技術:

getElementById
addEventListener（click）
変数の増減（count++）
textContent

タイピングゲーム（3作目）

使った技術:

getElementById ✅
addEventListener（input ← 新）
変数の増減 ✅
textContent ✅
配列 ← 新
ランダム処理 ← 新
input.value（入力値取得） ← 新
文字列比較（===） ← 新
関数の定義 ← 新

新しい技術が5つも増えた！

GitHubにアップロード・公開

コマンド実行

クリックカウンターと同じ流れ：

git init
git remote add origin https://github.com/dondokoboy/typing-game.git
git branch -M main
git add .
git commit -m "タイピングゲーム完成"
git push -u origin main

スムーズに実行できた。慣れてきた証拠。

GitHub Pages有効化

Settings → Pages → main/root → Save

公開URL: https://dondokoboy.github.io/typing-game/

Phase 2の成果物（3つ）

作品	公開日	主な技術
自己紹介ページ	3/14	HTML/CSS
クリックカウンター	3/15	JavaScript基礎、DOM
タイピングゲーム	3/18	配列、ランダム、input

3作品すべて公開中！

学んだこと

技術面

配列の便利さ:

複数のデータをまとめて管理
ランダムにアクセスできる
リストを簡単に扱える

ランダム処理の仕組み:

Math.random()で乱数生成
Math.floor()で整数に変換
配列と組み合わせて使う

inputイベントの違い:

clickイベント: 1回の動作
inputイベント: リアルタイムで反応

関数の定義:

処理をまとめて名前をつける
何度でも呼び出せる
コードが整理される

学習方法

YouTube → 作るの流れが確立:

YouTubeで面白いものを見つける
「作りたい！」と思う
シンプル版から始める
AIと一緒に作る
公開する

この流れが自然になってきた。

感想

「作りたい」から始められた

今回は自分で見つけたものを作りました。

Phase 1: Progateの課題をこなす
Phase 2初期: AIが提案したものを作る
Phase 2今回: 自分で見つけたものを作る ← New!

主体性が出てきた。

新しい技術も怖くない

配列、ランダム、inputイベント…

Phase 1の頃なら「難しそう」と思ったかもしれません。

でも、小さく分解して、1つずつ理解すれば作れることが分かってきました。

成果物が増える喜び

自己紹介ページ
クリックカウンター
タイピングゲーム

3つのサイトが公開されているという事実。

これがポートフォリオになっていく。

次のステップ

タイピングゲームの拡張（やりたければ）

制限時間の追加
タイプ速度の計算
間違えた回数のカウント
難易度選択（簡単な単語/難しい単語）
ランキング機能

または次の作品へ

じゃんけんゲーム
簡単な計算機
その他、YouTubeで見つけたもの

Week 3（3/21〜）の予定

当初の計画：

Git & Command Line（Progate）

選択肢:

計画通りGitを学ぶ
もう1つ作品を作る

Phase 2、順調に進んでいます。

「教材に沿う」から「自分で作る」への転換、成功しています。