はじめに
普段は英語学習関係の仕事をしているのですが、「英語学習をもっとゲーム感覚で楽しめないか？」と思い、ほぼ未経験の状態から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 日でゲームをリリースできる」ということを実感しました。
これを皮切りに、また新たなゲーム作りに挑戦します。
質問やアドバイスなどあれば、気軽にコメントください！