AIで英単語学習Webゲームを作ってみた！

今回はAIを使ってみます

子どもに英単語の勉強をさせようと思うのですが、なかなかやってくれないんです。。。

まっ親である自分達も勉強は嫌いだったしと思いながら「勉強しなさい」と言っているのですが＾＾；

少しでも興味を持たせるため、あの手この手と試行錯誤してます

今回は、子どもと一緒にAIを使って自分たちでゲームを作ってしまえば興味を持つんじゃないかと言うことでAIを使て作ってみることにしました

今回使ったのは「Claude(クロード)」というAIツールです

claude.ai

Anthropic（アンソロピック）という会社が作っているものです

詳しい内容はWebで調べてください＾＾；

私より詳しく解説している方々がいっぱいいます

最初に入るとこんな画面になります

私はGmailアカウントでログインをしました

続いて、電話番号を使って認証を行います

名前を登録します

この名前後からでも変更できますのであまり悩まなくても大丈夫です

承認をして、いよいよチャット画面に移動します

こんな感じの画面です

早速チャットで作りたいものを入力

「ランダムで中学１年生程度の英単語を学習するWebゲームを作って」

としました

すると

　　　　途中省略します

とWebゲームのHTMLとJavaScriptのコードを作成してくれました

これを全部コピーしてテキスト張り付けて、ファイル名を「word_game.html」として保存

このファイルをWクリックで開くと
こんな感じになります

これが出来上がるまでに５分ぐらい

単語は増やすことができるので、今後カスタマイズしていこくと思います！

ぜひ一度試してみてください！

下記が今回Claude(クロード)が作ったコードです

---------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中学1年生英単語ゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#word {
font-size: 24px;
margin-bottom: 20px;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>中学1年生英単語ゲーム</h1>
<div id="word"></div>
<input type="text" id="answer" placeholder="日本語の意味を入力">
<button onclick="checkAnswer()">回答</button>
<div id="result"></div>
<button onclick="nextWord()">次の単語</button>
<div id="progress"></div>

let currentWord;
let remainingWords = [...words];

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

function nextWord() {
if (remainingWords.length === 0) {
remainingWords = [...words];
shuffleArray(remainingWords);
alert("全ての単語が終わりました。もう一度最初から始めます。");
}

currentWord = remainingWords.pop();
document.getElementById("word").textContent = currentWord.en;
document.getElementById("answer").value = "";
document.getElementById("result").textContent = "";
updateProgress();
}

function checkAnswer() {
const userAnswer = document.getElementById("answer").value.trim();
if (userAnswer === currentWord.ja) {
document.getElementById("result").textContent = "正解!";
} else {
document.getElementById("result").textContent = `不正解。正解は「${currentWord.ja}」です。`;
}
}

shuffleArray(remainingWords);
nextWord();
</script>
</body>
</html>

もる家のブログ

子どもと一緒にデジタルコンテンツを触っていきます

AIで英単語学習Webゲームを作ってみた！