Javascriptで三択ゲーム！(ドットインストール)

最近、ドットインストールを使ってJavascriptの勉強をしているんですが、悩んでるんですよね。

「どこまでできたら学習したと言えるのか」

ある程度理解してあとはググればいいやみたいな考え方から、用意した教材の中で紹介されている問題を何も見ずに実装できるという考え方まで、結構いろんな意見があると思います。

私の考え方は、

「ある程度は自分で実装できて、あとの複雑な処理とかは、そういうことが出来るということを覚えておく」

ぐらいでいいのではと思っています。あまりにも難しいものは覚えてもそんなに使うこともないと思いますし、そういうことが出来るんだな〜って覚えておいて、あとはググればいいと思っています。

逆に、自分では絶対にダメだと思っているのは、

「教材のコードを丸写しして、できたと思い込む」

です。これはマジでやめたほうがいいです。正直、やらない方がいいレベルだと思います。最初のうちの何が出来るのかもさっぱりわからない状態ではこんな風に進めるしか方法がないと思いますが、ある程度勉強を進めたあとは、自分で自力でやってみて、わからなければ答えを見るというステップを踏まないとまったく学んだことが身につかないです。

そうおもいながらドットインストールをやっていて、ドットインストールってすごいわかりやすいんですが、コードをただ写すような勉強になってしまいがちだったんですよね。私の場合。

かと言って、初めからやるにしても正直どこから手をつけていいのかわからないレベルです。

そこで、ちょっと考えました。どうすればドットインストールで効率よく勉強できるか。

で、思いついたのが、以下のやり方です。

動画を見ながらコードを書いて、紹介されているものと同じものを作る
作ったコードのなかで、自分が学びたい部分を削除する
削除したコードを使って自分で実装する

この手順を踏めば、絶対にできるようになると思いました。

そこで、第一弾として、ドットインストールで紹介されている三択クイズを上で紹介したようなやりかたでやってみました。その時に使ったコードは下のコードです。私は今はJavaScriptを勉強しているのでJavaScriptのところは関数の定義だけ残して、中身は削除しました。また、とりあえずはコーディングができるようになりたいので、アルゴリズムに関する部分は記述しておいて、コーディングしやすいようにしておきました。

正解はドットインストールのJavaScriptで三択クイズを作ろうを見て欲しいです。これからもこんな風に自分の勉強記録の意味合いも込めて、勉強に使ったコードを紹介しようと思います。

JavaScriptで三択クイズを作ろうの練習用ソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <style>
    body {
      background: #efdec1;
      font-size: 14px;
      font-family: Verdana, sans-serif;
    }

    .container {
      width: 400px;
      margin: 8px auto;
      background: #fff;
      border-radius: 4px;
      padding: 16px;
      position: relative;
    }

    #question {
      margin-bottom: 16px;
      font-weight: bold;
    }

    #choices {
      list-style: none;
      padding: 0;
      margin-bottom: 16px;
    }

    #choices>li {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    #choices>li:hover {
      background: #f8f8f8;
    }

    #choices>li.correct {
      background: #d4edda;
      border-color: #c3e6cb;
      color: #155724;
      font-weight: bold;
    }

    #choices>li.correct::after {
      content: ' ... correct!';
    }

    #choices>li.wrong {
      background: #f8d8da;
      border-color: #f5c6cb;
      color: #721c24;
      font-weight: bold;
    }

    #choices>li.wrong::after {
      content: ' ... wrong!';
    }

    #btn,
    #result>a {
      background: #3498db;
      padding: 8px;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      color: #fff;
      box-shadow: 0 4px 0 #2880b9;
    }

    #btn.disabled {
      background: #ccc;
      box-shadow: 0 4px 0 #bbb;
      opacity: 0.7;
    }

    #result {
      position: absolute;
      width: 300px;
      background: #fff;
      padding: 30px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      top: 50px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 4px;
      text-align: center;
      transition: 0.4s;
    }

    #result.hidden {
      transform: translateY(-500px);
    }

    #result>p {
      font-size: 24px;
    }

    #result>a {
      display: block;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <section class="container">
    <p id="question">question 1</p>
    <ul id="choices">
      <li>answer 1</li>
      <li>answer 2</li>
      <li>answer 3</li>
    </ul>
    <div id="btn" class="disabled">Next</div>

    <section id="result" class="hidden">
      <p></p>
      <a href="">Replay?</a>
    </section>
  </section>

  <script>

    // 三択クイズ
    // 仕様
    // ・１つの問題文と３つの選択肢を表示
    // ・表示する時の選択肢はシャッフルするが、プログラム内では配列の０番目の要素が正解
    // ・回答するまで次の問題には行けない
    // ・全ての問題が終わったら正答率を表示


    // ここにjavascriptを書いていきましょう！
    'use strict';

    {
      const question = document.getElementById('question');
      const choices = document.getElementById('choices');
      const btn = document.getElementById('btn');
      const result = document.getElementById('result');
      const scoreLabel = document.querySelector('#result > p');

      const quizSet = shuffle([
        { q: '世界で一番大きな湖は？', c: ['カスピ海', 'カリブ海', '琵琶湖'] },
        { q: '2の8乗は？', c: ['256', '64', '1024'] },
        { q: '次のうち、最初にリリースされた言語は？', c: ['Python', 'JavaScript', 'HTML'] },
      ]);
      let currentNum = 0;
      let isAnswered;
      let score = 0;

      function shuffle(arr) {
        // 1番目に実装する関数
        // 配列をシャッフルする関数
        // 戻り値はシャッフルされた配列
        // フィッシャー・イェーツのシャッフルを使う
        // 配列の最後の要素と、ランダムに選択された要素を入れ替えるというアルゴリズム
        // 配列の最後の要素のindex iを取得する
        // 配列の最後の要素までのなかでランダムに１つの要素番号 j を取得する(Math.floor, Math.random()を使う)
        // 入れ替える
      }


      function checkAnswer(li) {
        // ３番目に実装する関数
        // 回答が正しいかどうかをチェックする関数
        // 回答が正しければ選択肢に correct クラスを追加してscoreをインクリメント
        // 回答が間違っていれば選択肢に wrong クラスを追加
        // 回答した後にボタンから disabled クラスを外す
        // 一度回答したら別の回答をクリックできないようにする処理も必要 
      }

      function setQuiz() {
        // ２番目に実装する関数
        // クイズをセット/選択肢をクリックするとcheckAnswer()関数を呼び出す関数
        // currentNum番目のクイズをセット
        // 選択肢をセットする前に、li要素(choices)を全て削除する
        // シャッフル関数を呼んで、選択肢をシャッフルして、li要素に追加
        // 直接配列の中身をshuffle関数に渡してしまうと、大元の配列の順番も変わってしまう。これでは、選択肢の最初の要素を正解にするというアルゴリズムが成り立たなくなってしまう。
        // なぜこのようなことが起きるのか？
        // 参照が渡されてしまうので、元の配列も書き換えられてしまう。
        // 対処方法はコピーを渡す。
        // 今回はスプレッド演算子を使う。
        // 最後の問題の時は、ボタンのテキストを show score にする 
      }

      setQuiz();

      btn.addEventListener('click', () => {
        // ４番目に実装する関数
        // Nextボタンがクリックされた時の処理
        // btn が disabled クラスを含んでいたら、処理できないようにする
        // それ以外では、次の問題が解答されるまでボタンをクリックできないようにするために、disabledクラスを追加する
        // 最後の問題の時には、scoreLabelのtextContentにスコアを代入
        // resultからhiddenクラスを外してスコアを表示するようにする
        // それ以外の場合は、currentNumをインクリメントして、setQuiz関数を呼ぶ
      });
    }


  </script>
</body>

</html>