1

JavaScriptの課題でfor文とif文を組み合わせたクイズアプリを製作しています。

処理の流れは以下のようなものを作りたいです。

  1. alertで1から5までの数値を当てるよう指示する(答えは2)
  2. okを押すとpromptで1から5までのどれかを入力するよう出てくる
  3. 外れると、間違っているので再度答えを入力するようにというpromptが出てくる
  4. 当たればalertで「おめでとう!」などのメッセージが現れゲームが終了する

for文についてどうしても理解が追いつかないのですが、for文は繰り返す回数が決まっている時に使うものですよね?この課題の場合確かに選択肢は5つしかないですが、2が当たるまでは無限に続くはずですよね?それをどうやってfor文で表せばいいのかさっぱりわかりません。
またfor/for in/for ofのどれを使うべきなのかも不明です…

そして今のコードのままだと、何を入力しても prompt ('Please guess 1 to 5!') が表示される状況になっています。

いつもはメンターの方がいらっしゃるのですがその方がホリデーでいらっしゃらず、どなたかお力貸していただけると幸いです。よろしくお願いします。

下に自力で書いてみたコードがありますが全然違う気がしてるので都度指摘して頂けると助かります。

// alertで'You got 5 guesses. Guess 1 to 5'と言うメッセージを表示させ、1から5までの数値を当てるよう指示する。
        alert ('You got 5 guesses. Guess 1 to 5');

// 答えの数値を2で用意
        let correctAnswer = 2;
        let wrongAnswers = [1, 3, 4, 5]

// promptで'What do you guess?'と言うメッセージとともに、記入欄を表示させる
        let result = prompt('What do you guess?');
        console.log(result);

// forループで1から5までの数値で、答えの2が当たるまで推測を促すpromptを表示させる。
// ヒント1:if文とも組み合わせて、推測が当たった場合はalertで'Good job! See what happens next :)'を表示。当たったらゲーム終了にする。
// ヒント2:外れたらpromptで'Ops! Maybe, another try?'のメッセージとともに記入欄を表示。

        for (;;) {
            if (result === correctAnswer) {
                alert ('Good job! See what happens next :)');
                break;
            } else if (result === wrongAnswers) {
                prompt ('Ops! Maybe, another try?');
            } else {
                prompt ('Please guess 1 to 5!')
            }
        }

4
  • マルチポスト teratail.com/questions/138468
    – htb
    Commented 2018年7月29日 20:14
  • htbさんこんにちは!はい、いろんな方からアドバイス頂きたくてこちらでも聞いてみました^^おかげさまで解決できましたし、両方のサイトのアドバイスから勉強になることがいくつかあり、大変感謝しております!!
    – mofu
    Commented 2018年7月30日 9:31
  • そうですか。せめて質問同士にリンクを張っていただけると良いです。
    – htb
    Commented 2018年7月30日 14:38
  • 承知しました!以後気をつけます^^
    – mofu
    Commented 2018年7月31日 7:58

2 件の回答 2

4

この課題は、JavaScriptのforを理解するための良い課題だと思います。初心者には「for文は繰り返す回数が決まっている時に使うもの」と思われがちですが、そうではありません。

MDNのforの説明では、以下のようになっています。

for 文はループを作ります。丸括弧で囲まれセミコロンで分けられた、3 つの省略可能な式と、その後にループ内で実行される文が構成されます。

構文
for ([initialization]; [condition]; [final-expression]) statement

それで、for(;;)と式を全て省略すれば、while(true)と同じになるし、for(; a > 0;)と条件のみを記述すれば、while(a > 0)と同じになります。普通に考えているよりもforは弾力的に使うことができます。

forには初期化と条件の式を書くことができるので、次のようなコードにしてみたらどうでしょうか。

alert ('You got 5 guesses. Guess 1 to 5');
let correctAnswer = '2';
let wrongAnswers = ['1', '3', '4', '5'];

for (let result = prompt('What do you guess?'); result !== correctAnswer;) {
    if(result in wrongAnswers) {
        result = prompt('Ops! Maybe, another try?');
    } else {
        result = prompt('Please guess 1 to 5!');
    }
}

alert('Good job! See what happens next :)');

4
  • おぉ・・・まさに私が知りたかったfor文の謎が解明されました・・・!いろんなサイト見たんですが「for文は繰り返す回数が決まっている時に使うもの」「while文は繰り返す回数が決まっていない時に使うもの」と書いているものばかりで、やはりきちんとMDN読むべきですね、反省です・・・。そして書いて頂いたコード、大変スマート・・・forの中に全てぶち込んでしまってもいいんですね!しかし最後にalertがポツン書かれているのは、for文がfalseになりループから
    – mofu
    Commented 2018年7月30日 9:43
  • 外れると自動的にそのalertに行き着くからということですか??(すみませんついエンター押しすぎて編集できなくなりました・・・)
    – mofu
    Commented 2018年7月30日 9:50
  • 1
    そのとおりで、result === correctAnswer になるとループを外れてalertに行き着きます。 Commented 2018年7月30日 10:40
  • なるほどです!!!ありがとうございます!!!^^
    – mofu
    Commented 2018年7月31日 7:59
2

まず、プログラミングのためにやることをきちんと箇条書きするのは良いことなのですが、いくつか気をつけたほうが良いでしょう。

  • 繰り返す範囲は明示する
  • 「主語」を省略しない

あなたの現在のコードにあうように詳細化するとこうなります。

<1>alertで1から5までの数値を当てるよう指示する(答えは2)
<2>okを押すとpromptで1から5までのどれかを入力するよう出てくる
【繰り返しの範囲開始】
    <3><2>で入力した値が外れだと、間違っているので再度答えを入力するようにというpromptが出てくる
    <4><2>で入力した値が当たりだと、alertで「おめでとう!」などのメッセージが現れゲームが終了する
【繰り返しの範囲終了】

あなたのコードでは変数resultの値が<2>の後、2度と書き換えられませんから、常に<2>のpromptで入力した値が正解かどうか判定しようとしています。

<1>alertで1から5までの数値を当てるよう指示する(答えは2)
<2>okを押すとpromptで1から5までのどれかを入力するよう出てくる
【繰り返しの範囲開始】
    <3>最後に入力した値が外れだと、間違っているので再度答えを入力するようにというpromptが出てくる
    <4>最後に入力した値が当たりだと、alertで「おめでとう!」などのメッセージが現れゲームが終了する
【繰り返しの範囲終了】

promptを呼び出すたびにその値でresultを置き換えれば、resultが「最後に入力した値」として使えるはずです。(なかなか微妙な変数名ですが、話が長くなりすぎるので、そこは置いておきます。)


さらにJavaScriptでの基本テクニックとしていくつかの問題点があります。

  • 文字列(promptの戻り値)と数値(2)とを===(型変換のない厳密比較)で比較している

    (結果は常にfalseになる。)

  • 配列のどれかに一致するかの判定に===を用いている

    (これまた常にfalseです。日本語の「〜が〜である」的な文がいつでも===で表現できるわけではありません。)

    「配列の中のどれかに一致」には、indexOfがよく使われます。使い方はコード参照。

==比較(文字列と数値の比較の時、自動的に数値型に変換してくれる)とか、文字列を数値型に変換する方法なんかも覚えておくと良いのですが、ここでは元の答えを全部文字列型で用意しておく、という形にしてみました。

// alertで'You got 5 guesses. Guess 1 to 5'と言うメッセージを表示させ、1から5までの数値を当てるよう指示する。
alert ('You got 5 guesses. Guess 1 to 5');

// 答えの数値を2で用意
//### `prompt`の結果は文字列なので答えも文字列で用意しておく。
let correctAnswer = '2';
let wrongAnswers = ['1', '3', '4', '5'];

// promptで'What do you guess?'と言うメッセージとともに、記入欄を表示させる
let result = prompt('What do you guess?');
console.log(result);

// forループで1から5までの数値で、答えの2が当たるまで推測を促すpromptを表示させる。
// ヒント1:if文とも組み合わせて、推測が当たった場合はalertで'Good job! See what happens next :)'を表示。当たったらゲーム終了にする。
// ヒント2:外れたらpromptで'Ops! Maybe, another try?'のメッセージとともに記入欄を表示。

for (;;) {
    if( result === correctAnswer ) {
        alert('Good job! See what happens next :)');
        break;
    } else if( wrongAnswers.indexOf(result) >= 0 ) {
        //###`result`が常に「最後に入力した値」になるよう更新する
        result = prompt('Ops! Maybe, another try?');
    } else {
        //###`result`が常に「最後に入力した値」になるよう更新する
        result = prompt('Please guess 1 to 5!');
    }
}


なんでこれがfor文の課題なのかとか、コメント中の「forループで1から5までの数値で、…」については、出題者の意図が全然理解できないので、出題者の思っている通りの回答になっているかどうかは全然自信がないのですが、あなたの現在の意図に沿った動きにはなっているのではないかと思います。

6
  • 箇条書きの部分丁寧に直してくださりありがとうございます><な、なるほど・・・<2>で入力した値をずっと判定していたのですね・・・目からウロコすぎます。教えていただいたことそれぞれ書くと:promptの戻り値は常に文字列、配列のどれに一致するかはindexOf使う、==比較の場合「2 == '2'」も成り立つ、文字列を数値型に変換→parseInt(str, int) でしょうか?そして無事正常にクイズが動くようになりましたありがとうございます!私の書いたコードに沿って加筆して頂いた形なので大変わかりやすく感謝です!!
    – mofu
    Commented 2018年7月30日 9:39
  • すみません一つ聞きたいことがあったのですが忘れておりました。indexOfを使う場面で wrongAnswers.indexOf(result) >= 0 と書かれていますが >=0 の部分は該当の文字列が見つからなかった場合-1が返るのを防止するため?でしょうか??
    – mofu
    Commented 2018年7月30日 9:53
  • @FumiKuranishi さん、そうです。indexOfをあるなしだけの判定に使いたい場合、「-1がない」「0以上がある」を表します。「防止する」と言うより、単にあるかないか判定している、と思ってください。ただletが使えるようなJavaScriptならinも当然使えるでしょうから、Yasuhiro Nijiさんの回答のように書くほうがずっとスマートですね。
    – OOPer
    Commented 2018年7月30日 11:30
  • なるほど!あるかないかを表しているのですね。勉強になりました!!スマートですけど多分いきなりあれは私書けないので、OOPerさんが書いてくださったコードは私にわかりやすく、理解しやすかったです^^ありがとうございます!!
    – mofu
    Commented 2018年7月31日 8:01
  • @mofu さん、わかりやすいというご評価をいただけることは回答者にとってこの上ない喜びです、ありがとうございます。同様にわかりにくい部分についてはどんどんご指摘いただけると、今後良い回答を書くための参考となりますので、それについてもご遠慮なく。さて、このサイトでは質問された課題を解決するのに最も役立った回答を「承認」するのが習わしです。Yasuhiro Niji さんの回答はあなたのメインの疑問に答えてくれていますので、十分資格があるかと思います。そちらもよろしくお願いします。
    – OOPer
    Commented 2018年7月31日 11:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。