ChatGPTが頭良くて悔しい
以前の記事でじゃんけんゲームを公開したけど、ほぼChatgptに作ってもらったので自分でも何がどうなっているのか全く分からない。
自分より賢いやつがいたら悔しいじゃないですか。
そこで超初心者の自分にもわかるように、コードの説明を残しておく。
じゃんけんゲームのコード
じゃんけんゲームのコードはこれ。
<div style="text-align:center;">
<h2>じゃんけんゲーム</h2>
<p>手を選んでください</p>
<button onclick="play('グー')">✊ グー</button>
<button onclick="play('チョキ')">✌ チョキ</button>
<button onclick="play('パー')">🖐 パー</button>
<p id="result"></p>
<p id="streak">現在の連勝数: 0</p>
<p id="best">最高連勝数: 0</p>
</div>
<script>
let streak = 0;
let bestStreak = 0;
function play(userHand) {
const hands = ["グー", "チョキ", "パー"];
const compHand = hands[Math.floor(Math.random() * 3)];
let result = "";
if (userHand === compHand) {
result = "あいこ！";
} else if (
(userHand === "グー" && compHand === "チョキ") ||
(userHand === "チョキ" && compHand === "パー") ||
(userHand === "パー" && compHand === "グー")
) {
streak++;
result = `あなたの勝ち！ (${userHand} vs ${compHand})`;
if (streak > bestStreak) {
bestStreak = streak;
}
} else {
result = `あなたの負け… (${userHand} vs ${compHand})`;
streak = 0; // 負けたら連勝数リセット
}
document.getElementById("result").textContent = result;
document.getElementById("streak").textContent = `現在の連勝数: ${streak}`;
document.getElementById("best").textContent = `最高連勝数: ${bestStreak}`;
}
</script>html部分の説明
しつこいかもしれないけど、一行一行自分の理解をメモしていく。
<div style="text-align:center;">divはただの区切りを表す記号で、</div>までを一つのグループとして扱うときに使う。
style=”text-align:center;は中央揃えの意味で、「このdiv内の記述はすべて中央揃えで表示してね」という指示。
卒論書くときにまずWordの書式を整えるように、htmlもとりあえず最初に書式を準備するようだ。
<h>は見出し、<p>は段落
<h2>じゃんけんゲーム</h2>
<p>手を選んでください</p><h2>は見出しを表す。headingのhらしい。
<h1>から<h6>まであり、数字が小さいほうが大きい見出しになる。試しに<h1>～<h6>まで「じゃんけんゲーム」を表示してみる。
<h1>じゃんけんゲーム</h1>
<h2>じゃんけんゲーム</h2>
<h3>じゃんけんゲーム</h3>
<h4>じゃんけんゲーム</h4>
<h5>じゃんけんゲーム</h5>
<h6>じゃんけんゲーム</h6>———————————以下、上のコードの出力———————————
じゃんけんゲーム
じゃんけんゲーム
じゃんけんゲーム
じゃんけんゲーム
じゃんけんゲーム
じゃんけんゲーム
———————————ここまで出力———————————
WordPressだと最後の二つは見た目に違いがなさそうだけど、階層構造はあるみたい。
WordPressでブロックを作るとき、「見出し」とか「段落」とか選ぶと見た目が変わるし階層構造が作れるが、内部では<h1>とか<h2>とかの部分を書き換えているんだな、ととりあえず理解した。
一方で<p>は段落。paragraphのp。本文テキストを表す。
段落って文の一区切りのことを指すので、「本文」のほうが自分の直観に合うのだが、ChatGPT先生が「段落」と説明してくる。
先生のいうことをとりあえず無視して「本文」でいったん理解した。
<button>
<button onclick="play('グー')">✊ グー</button>
<button onclick="play('チョキ')">✌ チョキ</button>
<button onclick="play('パー')">🖐 パー</button>ボタンを表示するときは<button>(ボタンに表示したい文字)</button>と書けばよい。試しに作ってみる。
<button>ボタンだよ</button>———————————以下、上のコードの出力———————————
———————————ここまで出力———————————
これだとボタンを押しても何も起きない。
「ボタンを押したときに何が起こるか」を、onclick=・・・のように書く。このようにするとボタンを押したら”play(‘グー’)”が起こるボタンを作れる。
「ボタンを押したときに何が起こるか」はここにまとめて書くこともできるが、「表示」と「機能」は分けて書くのが一般的のようなので、後で書いている。
本文<p>の表示を、時と場合によって変える方法
<p id="result"></p>
<p id="streak">現在の連勝数: 0</p>
<p id="best">最高連勝数: 0</p><p>は本文を表す。さっき進研ゼミでやった。
しかし今度はid=”result”とか書いてある。
じゃんけんの結果によって表示を変えるために、このように書くようだ。
これでじゃんけんに勝ったら「勝ち」とか、負けたら「負け」と表示されるようにできる。
連勝数も同じ。
まとめ
- <h>は見出し。目立たせたいものに使う。
- <p>は本文。
- <button>はボタン。ゲーム開始とか はい/いいえ とか、プレイヤーに選択してもらうときに使う。
- 最初の<>の中に条件を書けば、表示テキストの表示条件やボタンの機能を追加できる。
思ったより単純で難しくないかも。
深入りしそうになるのを堪えて今あるものだけ勉強していこう。
コメント