JavaScript

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

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

学習内容

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

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

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



つまづいた点

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

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

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

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

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

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

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

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

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

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

フィッシャーイェーツのシャッフルの実装方法
  1. 配列の値をランダムに1つ取得する
  2. ランダムに取得した配列の値を配列の末尾の値と入れ替え
  3. 配列の値をランダムに1つ取得する
  4. ランダムに取得した配列の値を配列の末尾の1つ手前と入れ替え
  5. 入れ替え先が配列の先頭になるまでくりかえし

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

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

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



感想

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

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

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

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す