英単語の意味がわかればプログラミングは読める！初心者向けHTMLゲーム解説

英単語の意味がわかればプログラミングは読める！初心者向けHTMLゲーム解説

ChatGPTに日本語でお願いしたらコードを書いてくれますが、どうしても自分でコードを書いてみたいという人に向けてシリーズの番外編で作成しています。

サムネイルはCANVAで作成しております。

はじめに
目標
完成するゲームのイメージ
ゲームのHTMLコード（全体）
英単語を一つずつ解説
たとえば、このコードを読み解いてみよう
1. 英単語で見てみると：
プログラムは「読む力」が第一歩！
まとめ

はじめに

プログラミングは英語ばかりで難しそうに見えますよね？
でも実は、「英単語の意味」がわかると、コードの意味もスッと頭に入ってくるようになります！

今回は、じゃんけんゲームを題材にしながら、英語と一緒にプログラミングを読み解いていきます。
「英語もプログラムもよくわからない…」という方も安心して読み進めてください！

目標

英語がわからなくても、英単語の意味からコードを理解できるようになる
HTMLとJavaScriptを使ったシンプルなじゃんけんゲームを完成させる

完成するゲームのイメージ

「グー」「チョキ」「パー」のボタンをクリックするだけで遊べる！
自分の手とコンピュータの手が表示されて、勝敗がわかる！

ゲームのHTMLコード（全体）

html

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>じゃんけんゲーム</title>

</head>

<body>

  <h2>じゃんけんゲーム</h2>

  <button onclick="play('グー')">グー</button>

  <button onclick="play('チョキ')">チョキ</button>

  <button onclick="play('パー')">パー</button>

  <p id="result"></p>
  <script>

    function play(playerHand) {

      const hands = ['グー', 'チョキ', 'パー'];

      const computerHand = hands[Math.floor(Math.random() * 3)];
      let result = "";

      if (playerHand === computerHand) {

        result = "あいこです！";

      } else if (

        (playerHand === "グー" && computerHand === "チョキ") ||

        (playerHand === "チョキ" && computerHand === "パー") ||

        (playerHand === "パー" && computerHand === "グー")

      ) {

        result = "あなたの勝ち！";

      } else {

        result = "あなたの負け！";

      }

document.getElementById("result").innerHTML = "あなた: " + playerHand + "<br>コンピュータ: " + computerHand + "<br>" + result; } </script> </body> </html>

英単語を一つずつ解説

英単語・コード	英語の意味	プログラムとしての意味
`Math`	数学	数学的な計算をするための道具
`random()`	ランダム（でたらめ）	0以上1未満の小数をでたらめに出す
`* 3`	かける3	0〜3未満の数字（例: 0.4 × 3 = 1.2）になる
`Math.floor()`	床／切り捨て	小数点以下を切り捨てて整数にする（例: 1.9 → 1）
`function`	機能・関数	命令のかたまりを作る言葉
`if`	もし〜なら	条件が合えば、ある動きをする
`else`	そうでなければ	`if` に合わなかったときの別の動き
`document.getElementById`	ドキュメントからIDで取る	画面の中のID付きの場所に文字を入れる
`innerHTML`	中のHTML	表示する文字の内容を変える

たとえば、このコードを読み解いてみよう

英単語で見てみると：

Math → 数学
random() → でたらめな数を出す
* 3 → 3をかける（0〜3の間の数を作る）
floor() → 小数点以下を切り捨てる

→ つまり「0, 1, 2」の中からランダムに1つ選ぶ！

これを hands の配列（[‘グー’, ‘チョキ’, ‘パー’]）の中から選ぶと…

という形になります。

プログラムは「読む力」が第一歩！

日本語でもそうですが、「知らない単語」は読めません。
プログラミングも同じです。
でも、単語の意味がわかれば、読むことも真似することもできるようになります！

まとめ

プログラムに出てくる英単語は、辞書のように調べながら覚えればOK
Math.floor(Math.random() * 3)は、0〜2の数字をランダムに出す式
コードはまず読む！次に書く！