はじめに

前回の基礎編では、

変数
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の機能について詳しく知りたい方は、こちらの公式ドキュメントがおすすめです。

おわりに

プログラミングは、知識を覚えること以上に、実際に手を動かして試すことが大切です。

記事のコードを書き換えてみたり、新しいボタンを追加してみたり、自分なりに改造しながら学習を続けてみてください。

「こんな機能を追加したらどうなるんだろう？」

そんな小さな疑問を一つずつ試していくことが、プログラミング上達への近道です。

このシリーズが、みなさんのプログラミング学習の第一歩になれば嬉しいです。

また、「ここが分かりにくかった」「こんな内容も学んでみたい」といったご意見やご感想がありましたら、ぜひコメントで教えてください。今後の記事作成の参考にさせていただきます。