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

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

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

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

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

学習内容

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

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

つまづいた点

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

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

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

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

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

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

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

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

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

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

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

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]));

実行結果が見られるようにPaiza.ioでも書いてみました。

こういうのをサッと引き出せるようなシステムを自分の中で構築しておくと良いですね。

感想

今回はシャッフルの仕様の見落とし以外は、ググりながら自分で実装することができました。

この調子で1月中に学習を完了させて、2月からはクラウドソーシングで仕事を受けていきたいと思っています。

そのためにはもっと学習スピードをあげていきたいところですが、焦らずコツコツいきたいと思います。