JavaScriptで三択ゲームを作ろうの受講が完了しました。
#ドットインストール
JavaScriptで三択クイズを作ってみよう。
いつもどおり完成のページイメージだけみて自分で実装してみて、だいたい3時間で実装完了。自分で考えて実装して動作させる。
解決できてるからだけど、これマジで楽しい。#プログラミング学習 #駆け出しエンジニアと繋がりたい— じゅに💻脱サラに命かける人 (@Jyu210) December 31, 2019
学習内容
以下の仕様の三択クイズをを全20回の動画を通して作り上げることになります。
- あらかじめ設定された三択クイズが出題
- 出題の順番はランダム
- 回答の順番はランダム
- 正解・不正解をボタンのスタイルをかえて表現する
- クイズの結果はポップアップが画面上部から降りてくる
- Retryボタンを押すと問題を最初から開始する
今回も最初の完成サイトのWebページを見てから、まずは自分で実装してみました。
つまづいた点
以下つまいずいたポイントや、動画のほうが良いなと思った点です。
出題・回答のランダムを表示
この仕様を見落としてたので、実装が漏れてまいsた。
というか、数十秒の完成図のデモだけで全ての仕様を把握するのは難しいです。
というのは言い訳でしかないですけどね。
今回のシャッフル方法は「フィッシャー・イェーツのシャッフル」が使われています。
「フィッシャー・イェーツのシャッフル」はロナルド・フィッシャーさんとフランク・イェーツさんが公安したシャッフルのアルゴリズムです。
フィッシャー–イェーツのシャッフル (英: Fisher–Yates shuffle) は、有限集合からランダムな順列を生成するアルゴリズムである。言い換えると、有限列をランダムな別の（シャッフルされた）順序の有限列に並べ直す方法である。この名前はロナルド・フィッシャーおよびフランク・イェーツから名付けられた。また、クヌースのシャッフル(ドナルド・クヌースから)とも呼ばれる。フィッシャー–イェーツのシャッフルは、全ての順列の組み合わせが等しく存在しうるため、偏りがない。このアルゴリズムの改良されたバージョンはさらに効果的であり、処理時間はシャッフルされる要素数に比例するのみで、余分な時間はかからず、また追加の保持領域を必要としない。フィッシャー–イェーツのシャッフルの派生にサットロのアルゴリズムがあり、こちらは長さ n のランダムな円順列（英語版）を生成する。
【引用元】ウィキペディア：フィッシャー–イェーツのシャッフル
フィッシャーイェーツのシャッフルの実装方法は以下のようになります。
- 配列の値をランダムに1つ取得する
- ランダムに取得した配列の値を配列の末尾の値と入れ替え
- 配列の値をランダムに1つ取得する
- ランダムに取得した配列の値を配列の末尾の1つ手前と入れ替え
- 入れ替え先が配列の先頭になるまでくりかえし
参考ソースは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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月からはクラウドソーシングで仕事を受けていきたいと思っています。
そのためにはもっと学習スピードをあげていきたいところですが、焦らずコツコツいきたいと思います。
