switch文ですっきり書く
いきなりですがコードからはじめましょう。
ここで新たしく習う文法はswitchです。
<!DOCTYPE html>
<html>
<title>じゃんけんゲーム</title>
<body>
<script>
let player = window.prompt('じゃんけんしましょ！\nグーなら１\nチョキなら２\nパーなら３\nを半角で入力してください。')
let comHandName = ''; //変数の定義をswitch文の中でする。後で書く。
//Math.floorで整数値を出す。Math.random()*3で０以上３未満の数値をランダムに出す。
//+1までいれて、全体で１か２か３を出す。
let com = Math.floor(Math.random()*3)+1
//switchの便利な使い方
switch (com) {
case 1: //変数comの値が1の時
comHandName = 'グー';
break;
case 2:
comHandName = 'チョキ';
break;
case 3:
coomHandName = 'パー';
break;
}
window.alert('あなたの手は' + player + 'です。こちらの手は' + comHandName + 'です。')
</script>
</body>
</html>switch文が何を表すか、switch文はどのように書かなくてはコンピューターが理解できないか、わかりますか？
上のコードを実行すると・・・・
ん？
ダメですね。
いろいろと書き直してみました。
<!DOCTYPE html>
<html>
<title>じゃんけんゲーム</title>
<body>
<script>
let playerInput = window.prompt('じゃんけんしましょ！\nグーなら１\nチョキなら２\nパーなら３\nを半角で入力してください。')
/*
//定数を使って数値に文字列を対応させてもよい。
//constはletの名前で変数の種類をしていいします。constはconstantの意味で、定数を意味します。プログラムを通じて値が変わらない対応を表現します。
//慣例として、定数を定義するときには大文字を使います。
const GU = 1;
const CYO = 2;
const PA = 3;
*/
let playerHandName = "";
switch (playerInput) {
case 1: //変数playerInputの値が1の時
playerHandName = 'グー';
break;
case 2:
playerHandName = 'チョキ';
break;
case 3:
playerHandName = 'パー';
break;
}
//Math.floorで整数値を出す。Math.random()*3で０以上３未満の数値をランダムに出す。
//+1までいれて、全体で１か２か３を出す。
let com = Math.floor(Math.random()*3)+1
let comHandName = ''; //変数の定義をswitch文の中でする。後で書く。
//switchの便利な使い方
switch (com) {
case 1: //変数comの値が1の時
comHandName = 'グー';
break;
case 2:
comHandName = 'チョキ';
break;
case 3:
coomHandName = 'パー';
break;
}
window.alert('あなたの手は' + playerHandName + 'です。こちらの手は' + comHandName + 'です。')
</script>
</body>
</html>それでもうまく、いきません・・・・
あ、もしかして、文字列と数値を勘違いしていないかとおもいました。
そして次のコード。
<!DOCTYPE html>
<html>
<title>じゃんけんゲーム</title>
<body>
<script>
let playerInput = window.prompt('じゃんけんしましょ！\nグーなら１\nチョキなら２\nパーなら３\nを半角で入力してください。')
let playerNumber = Number(playerInput)
/*
//定数を使って数値に文字列を対応させてもよい。
//constはletの名前で変数の種類をしていいします。constはconstantの意味で、定数を意味します。プログラムを通じて値が変わらない対応を表現します。
//慣例として、定数を定義するときには大文字を使います。
const GU = 1;
const CYO = 2;
const PA = 3;
*/
let playerHandName = "";
switch (playerNumber) {
case 1: //変数playerNumberの値が1の時
playerHandName = 'グー';
break;
case 2:
playerHandName = 'チョキ';
break;
case 3:
playerHandName = 'パー';
break;
}
//Math.floorで整数値を出す。Math.random()*3で０以上３未満の数値をランダムに出す。
//+1までいれて、全体で１か２か３を出す。
let com = Math.floor(Math.random()*3)+1
let comHandName = ''; //変数の定義をswitch文の中でする。後で書く。
//switchの便利な使い方
switch (com) {
case 1: //変数comの値が1の時
comHandName = 'グー';
break;
case 2:
comHandName = 'チョキ';
break;
case 3:
coomHandName = 'パー';
break;
}
window.alert('あなたの手は' + playerHandName + 'です。こちらの手は' + comHandName + 'です。')
</script>
</body>
</html>定数constを使わないといけないのかなぁとおもいつつ、そんなはずはないとおもい、はたと思い当たったデータ型。
promptというメソッドは、入力する値（引数）が文字列、出力される値の型は「ユーザーによって入力されたテキストの文字列、またはnullが返されます。 」ということです。参考http://js.studio-kingdom.com/javascript/window/prompt
メソッドがどのデータ型を引数にして、戻り値にしているのか（出力してるのか）でコンピューターが理解の仕方が変わるのですね。
エラー、エラー。。。うーん。
次に、じゃんけんの結果、どちらが勝ったかを表示したいとおもい、コードを書きました。
<!DOCTYPE html>
<html>
<title>じゃんけんゲーム</title>
<body>
<script>
let playerInput = window.prompt('じゃんけんしましょ！\nグーなら１\nチョキなら２\nパーなら３\nを半角で入力してください。')
let playerNumber = Number(playerInput)
let playerHandName = "";
switch (playerNumber) {
case 1: //変数playerNumberの値が1の時
playerHandName = 'グー';
break;
case 2:
playerHandName = 'チョキ';
break;
case 3:
playerHandName = 'パー';
break;
}
//Math.floorで整数値を出す。Math.random()*3で０以上３未満の数値をランダムに出す。
//+1までいれて、全体で１か２か３を出す。
let com = Math.floor(Math.random()*3)+1
let comHandName = ''; //変数の定義をswitch文の中でする。後で書く。
//switchの便利な使い方
switch (com) {
case 1: //変数comの値が1の時
comHandName = 'グー';
break;
case 2:
comHandName = 'チョキ';
break;
case 3:
coomHandName = 'パー';
break;
}
window.alert('あなたの手は' + playerHandName + 'です。こちらの手は' + comHandName + 'です。')
if (playerNumber === com) {
let msgResult = "あいこです！"
} else if (com === 1 $$ player === 3 || com === 2 $$ player === 1 || com === 3 $$ player === 2){
let msgResult = "あなたの大勝利！！！"
} else {
let msgResult = "あなたの負けです。。。"
}
window.alert('msgResult')
</script>
</body>
</html>そしてエラー。
さて、どこがまちがっているでしょうか？
こちらが正しいCode。
<!DOCTYPE html>
<html>
<title>じゃんけんゲーム</title>
<body>
<script>
//相手の入力
let playerInput = window.prompt('じゃんけんしましょ！\nグーなら１\nチョキなら２\nパーなら３\nを半角で入力してください。')
let playerNumber = Number(playerInput)
// 入力された数値を文字にする
let playerHandName = "";
switch (playerNumber) {
case 1: //変数playerNumberの値が1の時
playerHandName = 'グー';
break;
case 2:
playerHandName = 'チョキ';
break;
case 3:
playerHandName = 'パー';
break;
}
//こちらのお手を決める
let com = Math.floor(Math.random()*3)+1
// こちらの手を文字に置き換える。
let comHandName = ''; //変数の定義をswitch文の中でする。後で書く。
switch (com) {
case 1: //変数comの値が1の時
comHandName = 'グー';
break;
case 2:
comHandName = 'チョキ';
break;
case 3:
coomHandName = 'パー';
break;
}
//表示する
window.alert('あなたの手は' + playerHandName + 'です。こちらの手は' + comHandName + 'です。')
// 結果の表示。
let msgResult = "";
if (playerNumber === com) {
msgResult = "あいこです！"
} else if ((com === 1 && playerNumber === 3) || (com === 2 && playerNumber === 1) || (com === 3 && playerNumber === 2)){
msgResult = "あなたの大勝利！！！"
} else {
msgResult = "あなたの負けです。。。"
}
window.alert(msgResult)
</script>
</body>
</html>
コードを書き直すと「変数を変えていない」ことが原因でエラーがでることがあります。
switchでreturnする
return 文は、関数の実行を終了して、関数の呼び出し元に返す値を指定します。
return - JavaScript | MDN
return 文は関数の実行を終了して、関数の呼び出し元に返す値を指定します。
developer.mozilla.org
というわけでswitchは関数として扱われているようです。ifも同様だそうです。
別の書き方をすると、なぜかエラーが出て困りました。
書き直したコードがこちらです。
何が違うかわかりますか？
<!DOCTYPE html>
<html>
<title>じゃんけんゲーム</title>
<body>
<script>
//相手の入力
let playerInput = window.prompt('じゃんけんしましょ！\nグーなら１\nチョキなら２\nパーなら３\nを半角で入力してください。')
let playerNumber = Number(playerInput)
// 入力された数値を文字にする
let playerHandName = (playerNumber) => {
switch (playerNumber) {
case 1: //変数playerNumberの値が1の時
return 'グー';
case 2:
return 'チョキ';
case 3:
return 'パー';
}
}
//こちらのお手を決める
let com = Math.floor(Math.random()*3)+1
// こちらの手を文字に置き換える。
let comHandName = (com) => {
switch (com) {
case 1: //変数comの値が1の時
return 'グー';
case 2:
return 'チョキ';
case 3:
return 'パー';
}
}
//表示する
//comHandName(com)にして函数を動かさないといけない？？？？
window.alert('あなたの手は' + playerHandName(playerNumber) + 'です。こちらの手は' + comHandName(com) + 'です。')
// 結果の表示。
let msgResult = "";
if (playerNumber === com) {
msgResult = "あいこです！"
} else if ((com === 1 && playerNumber === 3) || (com === 2 && playerNumber === 1) || (com === 3 && playerNumber === 2)){
msgResult = "あなたの大勝利！！！"
} else {
msgResult = "あなたの負けです。。。"
}
window.alert(msgResult)
</script>
</body>
</html>
returnを使わなかったときと違う場所をマーカーで塗ってみました。
<!DOCTYPE html>
<html>
<title>じゃんけんゲーム</title>
<body>
<script>
//相手の入力
let playerInput = window.prompt('じゃんけんしましょ！\nグーなら１\nチョキなら２\nパーなら３\nを半角で入力してください。')
let playerNumber = Number(playerInput)
// 入力された数値を文字にする
let playerHandName = (playerNumber) => {
switch (playerNumber) {
case 1: //変数playerNumberの値が1の時
return 'グー';
case 2:
return 'チョキ';
case 3:
return 'パー';
}
}
//こちらのお手を決める
let com = Math.floor(Math.random()*3)+1
// こちらの手を文字に置き換える。
let comHandName = (com) => {
switch (com) {
case 1: //変数comの値が1の時
return 'グー';
case 2:
return 'チョキ';
case 3:
return 'パー';
}
}
//表示する
//comHandName(com)にして函数を動かさないといけない？？？？
window.alert('あなたの手は' + playerHandName(playerNumber) + 'です。こちらの手は' + comHandName(com) + 'です。')
// 結果の表示。
let msgResult = "";
if (playerNumber === com) {
msgResult = "あいこです！"
} else if ((com === 1 && playerNumber === 3) || (com === 2 && playerNumber === 1) || (com === 3 && playerNumber === 2)){
msgResult = "あなたの大勝利！！！"
} else {
msgResult = "あなたの負けです。。。"
}
window.alert(msgResult)
</script>
</body>
</html>
なんと・・・returnを使わないで
let playerHandName = “”;
と書いたときは
window.alert(‘あなたの手は’ + playerHandName +
でよかったのが、
let playerHandName = (playerNumber) => {
とかいたときは
window.alert(‘あなたの手は’ + playerHandName(playerNumber) +
とかかなくては動かない！という現象がおきました。
なぜだろう・・・
どんなしくみか、分かったら書きますね。
皆さんも調べて教えてください！
コメント