はじめに

普段は英語学習関係の仕事をしているのですが、「英語学習をもっとゲーム感覚で楽しめないか？」と思い、ほぼ未経験の状態からChatGPTに教えてもらいながらミニゲームを自作してみました。

結果、1日で「英単語しりとりゲーム」をリリースできました。

使った技術は最小限です。

HTML/CSS/JavaScript
ChatGPT
VS Code（Live Server）
Netlify（無料デプロイ）
dictionary.txt（英単語データ）

同じように「何か作ってみたい」「AIに教えてもらいながら開発したい」という方の参考になれば嬉しいです。

完成したゲーム

英単語しりとりゲーム
https://english-words-shiritori.netlify.app/

30秒以内に英単語を答えるシンプルなミニゲーム
英単語辞書として dictionary.txt を使用
PC・スマホどちらでも遊べます

開発に使ったもの

ChatGPT（完全にメイン講師）
VS Code
Live Server
HTML / CSS / JavaScript
dictionary.txt
Netlify（デプロイ）

開発の流れ

1. HTML を作る（ChatGPTに書いてもらう）

まず ChatGPT に
「英単語しりとりゲームのHTMLを書いて」
とお願いして、基礎部分を作成してもらいました。

以下が最初に作った HTML です。

index.html

<body>
  <h1>英単語しりとりゲーム</h1>

  <div id="question"></div>
  <input id="answer" type="text" placeholder="英単語を入力">
  <button id="okBtn">OK</button>

  <div id="result"></div>

  <script src="script.js"></script>
</body>

2. CSS が反映されない → `<link>` 抜けが原因

初心者あるあるですが、最初 CSS が反映されず苦戦しました。

原因は単純で、HTML の <head> に以下が抜けていたためでした。

index.html

<link rel="stylesheet" href="style.css">

3. JavaScript でゲームロジックを書く

以下は ChatGPT に作ってもらった初期のロジックです。

script.js

const q = document.getElementById("question");
const a = document.getElementById("answer");
const ok = document.getElementById("okBtn");
const res = document.getElementById("result");

let correctAnswer = "";

function setQuestion() {
  const w = words[Math.floor(Math.random() * words.length)];
  correctAnswer = w;
  q.textContent = w;
}

ok.addEventListener("click", () => {
  if (a.value === correctAnswer) {
    res.textContent = "正解！";
  } else {
    res.textContent = "不正解…";
  }
});

4. dictionary.txt を読み込む

fetch() を使ってテキストを読み込む処理も、ChatGPT に書いてもらいました。

script.js

let words = [];

fetch("dictionary.txt")
  .then(res => res.text())
  .then(text => {
    words = text.split("\n").map(w => w.trim());
    setQuestion();
  });

5. Netlify にデプロイ（初心者に超優しい）

Netlifyは、フォルダをそのままドラッグ＆ドロップするだけで公開できます。

git 不要
コマンド不要
数秒でデプロイ完了

スマホでゲームURLを開いて動いた瞬間、やはり嬉しかったです。まだまだヒヨコですが、全くやったことがないのと1個作れたのとではゲーム作りへの気持ちのハードルが全然違います。

学んだこと（初心者目線）

ChatGPTがあると「何を知らない、分からない状態」からでも作れる
とはいえ最初から全文を書いてもらうと、中身がチンプンカンプンで修正の仕方がわからない。「コードが書ける人はこれをどうやって書いていく？」と質問すると、一つ一つ咀嚼しながら進められる。
動くものを作ると理解が一気に深まる
Netlifyの手軽さは初心者にとって神

今後予定している改善

スコアランキングの実装
UI・デザイン改善
音声付きゲーム化
英語学習 × ゲームのシリーズ化

ゲームURL

おわりに

今回、「初心者でも AI と一緒なら 1 日でゲームをリリースできる」ということを実感しました。

これを皮切りに、また新たなゲーム作りに挑戦します。

質問やアドバイスなどあれば、気軽にコメントください！