【ドットインストール】JavaScriptで三択クイズを作ろうを受講した感想

JavaScriptで三択ゲームを作ろうの受講が完了しました。

#ドットインストール
JavaScriptで三択クイズを作ってみよう。
いつもどおり完成のページイメージだけみて自分で実装してみて、だいたい3時間で実装完了。

自分で考えて実装して動作させる。
解決できてるからだけど、これマジで楽しい。#プログラミング学習 #駆け出しエンジニアと繋がりたい

— じゅに💻脱サラに命かける人 (@Jyu210) December 31, 2019

学習内容
つまづいた点
- 出題・回答のランダムを表示
感想

学習内容

以下の仕様の三択クイズをを全20回の動画を通して作り上げることになります。

タイピングゲームの仕様

あらかじめ設定された三択クイズが出題
出題の順番はランダム
回答の順番はランダム
正解・不正解をボタンのスタイルをかえて表現する
クイズの結果はポップアップが画面上部から降りてくる
Retryボタンを押すと問題を最初から開始する

今回も最初の完成サイトのWebページを見てから、まずは自分で実装してみました。

つまづいた点

以下つまいずいたポイントや、動画のほうが良いなと思った点です。

出題・回答のランダムを表示

この仕様を見落としてたので、実装が漏れてまいsた。

というか、数十秒の完成図のデモだけで全ての仕様を把握するのは難しいです。

というのは言い訳でしかないですけどね。

今回のシャッフル方法は「フィッシャー・イェーツのシャッフル」が使われています。

「フィッシャー・イェーツのシャッフル」はロナルド・フィッシャーさんとフランク・イェーツさんが公安したシャッフルのアルゴリズムです。

フィッシャー–イェーツのシャッフル (英: Fisher–Yates shuffle) は、有限集合からランダムな順列を生成するアルゴリズムである。言い換えると、有限列をランダムな別の（シャッフルされた）順序の有限列に並べ直す方法である。この名前はロナルド・フィッシャーおよびフランク・イェーツから名付けられた。また、クヌースのシャッフル(ドナルド・クヌースから)とも呼ばれる。フィッシャー–イェーツのシャッフルは、全ての順列の組み合わせが等しく存在しうるため、偏りがない。このアルゴリズムの改良されたバージョンはさらに効果的であり、処理時間はシャッフルされる要素数に比例するのみで、余分な時間はかからず、また追加の保持領域を必要としない。フィッシャー–イェーツのシャッフルの派生にサットロのアルゴリズムがあり、こちらは長さ n のランダムな円順列（英語版）を生成する。

【引用元】ウィキペディア：フィッシャー–イェーツのシャッフル

フィッシャーイェーツのシャッフルの実装方法は以下のようになります。

フィッシャーイェーツのシャッフルの実装方法

配列の値をランダムに1つ取得する
ランダムに取得した配列の値を配列の末尾の値と入れ替え
配列の値をランダムに1つ取得する
ランダムに取得した配列の値を配列の末尾の1つ手前と入れ替え
入れ替え先が配列の先頭になるまでくりかえし

参考ソースは以下の通りです。

const array = ['1', '2', '3'];

// フィッシャー・イェーツのシャッフル
function shuffle(arr) {
    // 配列の末尾から値を取得するためのループ
    for (let i = arr.length - 1; i > 0; i--) {
        // 末尾と入れ替える配列の値をランダムに取得
        const j = Math.floor(Math.random() * (i + 1));
        // 配列の末尾の値を退避
        let tmp = arr[i];
        // ランダムに取り出した配列の値を配列の末尾に代入
        arr[i] = arr[j];
        // 退避していた配列の末尾の値をランダムに選ばれた配列に代入
        arr[j] = tmp;
    }
    return arr;
}

// 実際の値を与える
console.log(shuffle([...array]));
// 引数に値自信を渡しているため、元の配列はシャフルされない
console.log(shuffle([array]));