はじめに
前回の基礎編では、
- 変数
- if文
- for文
- 関数
- HTMLとの連携
- Consoleを使ったデバッグ
を学びました。
今回は、それらを組み合わせてじゃんけんゲームを作ってみます。
この記事では新しい文法をたくさん覚えることよりも、
「今まで学んだ知識をどう組み合わせるのか」
を意識して読んでみてください。
完成イメージ
完成すると、
- グー・チョキ・パーのボタンを押す
- コンピューターがランダムに手を出す
- 勝ち・負け・あいこが表示される
というシンプルなゲームになります。
HTMLを作成しよう
まずは画面を用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>じゃんけんゲーム</title>
</head>
<body>
<h1>じゃんけんゲーム</h1>
<button onclick="play('グー')">グー</button>
<button onclick="play('チョキ')">チョキ</button>
<button onclick="play('パー')">パー</button>
<h2 id="result"></h2>
<script src="script.js"></script>
</body>
</html>
ランダムに手を決める
コンピューターの手は毎回ランダムに決めます。
const hands = ["グー", "チョキ", "パー"];
const cpu = hands[Math.floor(Math.random() * 3)];
ここで初めて登場した Math.random() は、0以上1未満のランダムな数値を返します。
Math.floor() を組み合わせることで、0〜2の整数を作っています。
勝敗を判定する
関数を作成します。
function judge(player, cpu){
if(player === cpu){
return "あいこ";
}
if(
(player === "グー" && cpu === "チョキ") ||
(player === "チョキ" && cpu === "パー") ||
(player === "パー" && cpu === "グー")
){
return "勝ち";
}
return "負け";
}
if文を組み合わせることで勝敗を判定できます。
ボタンと連携する
function play(player){
const hands = ["グー","チョキ","パー"];
const cpu =
hands[Math.floor(Math.random()*3)];
const result =
judge(player,cpu);
document.getElementById("result").textContent =
`あなた：${player}
コンピューター：${cpu}
結果：${result}`;
}
ボタンを押すだけでゲームが動くようになりました。
Consoleで確認してみよう
思った通りに動かない場合は、
console.log(player);
console.log(cpu);
console.log(result);
を追加してみましょう。
Consoleを見ることで、
- playerは何になっている？
- cpuは何になっている？
- judgeは何を返した？
を確認できます。
プログラムが思った通りに動かないときは、
Consoleで値を確認する
という習慣を付けることが大切です。
完成！
ここまでで、
- HTML
- JavaScript
- ボタン
- 関数
- if文
- ランダム
- DOM操作
を組み合わせたWebアプリが完成しました。
これまで学んだ内容だけでも、ここまで作れるようになります。
発展課題
ここからはぜひ自分でも挑戦してみてください。
★☆☆ 初級
- 勝った回数を表示する
- 負けた回数を表示する
- あいこの回数を表示する
★★☆ 中級
- リセットボタンを追加する
- 5回勝負にする
- 勝率を表示する
★★★ 上級
今回学んだ知識を使えば、じゃんけん以外にもさまざまなアプリが作れます。
例えば、
- おみくじ
- BMI計算機
- 消費税計算機
- 数当てゲーム
- 簡単なクイズ
などです。
どれも今回と同じように、
- ボタンを押す
- 入力を受け取る
- 条件分岐する
- 結果を画面へ表示する
という流れで作ることができます。
ぜひ、自分なりのアイデアでアプリ作りに挑戦してみてください。
まとめ
このシリーズでは、
- 構想編：学習環境と考え方
- 基礎編：JavaScriptの基本文法
- 応用編：知識を組み合わせてWebアプリを作る
という流れで、環境構築なしでプログラミングを学んできました。
もちろん、プログラミングの世界はここがスタートラインです。
しかし、「自分で考えたコードを書き、思い通りに動かす」という経験は、どんな言語を学ぶときにも役立つ大切な基礎になります。
ぜひ今回作成したプログラムを改良したり、新しいアプリに挑戦したりしながら、プログラミングを楽しんでください！
さらに学んでみたい方へ
ここまで読んでいただき、ありがとうございました！
このシリーズでは、環境構築をできるだけシンプルにしながら、HTMLとJavaScriptを使ってプログラミングの基礎を学んできました。
今回学んだ内容は、プログラミングの入口です。興味を持った方は、ぜひ次のサイトも活用しながら学習を続けてみてください。
JavaScript（MDN Web Docs）
JavaScriptの文法や組み込み関数、サンプルコードなどがまとめられている公式リファレンスです。分からないことがあったら、まずはこちらを調べる習慣を付けるのがおすすめです。
HTML（MDN Web Docs）
HTMLタグの役割や使い方を調べることができます。
CSS（MDN Web Docs）
文字の色や大きさ、レイアウトなど、Webページの見た目を変更したいときに役立ちます。
VS Code
ブラウザ版だけでなく、デスクトップ版のVS Codeを使って開発してみたい方はこちらからダウンロードできます。
VS Code for Web
今回のシリーズで使用したブラウザ版のVS Codeです。
Chrome DevTools
Developer Toolsの機能について詳しく知りたい方は、こちらの公式ドキュメントがおすすめです。
おわりに
プログラミングは、知識を覚えること以上に、実際に手を動かして試すことが大切です。
記事のコードを書き換えてみたり、新しいボタンを追加してみたり、自分なりに改造しながら学習を続けてみてください。
「こんな機能を追加したらどうなるんだろう？」
そんな小さな疑問を一つずつ試していくことが、プログラミング上達への近道です。
このシリーズが、みなさんのプログラミング学習の第一歩になれば嬉しいです。
また、「ここが分かりにくかった」「こんな内容も学んでみたい」といったご意見やご感想がありましたら、ぜひコメントで教えてください。今後の記事作成の参考にさせていただきます。