本ウェブサイトについて
概要: 関西二府四県の市町村がランダムで表示され、それがどこにあるかを選ぶクイズです。答えを選んだら「確定」を押し、次の問題に進みます。全部で18問あり、最後にスコアと答え合わせの表が表示されます。

使用言語: HTML, CSS, Sass, JavaScript

現在のレベル
スキル: HTML, CSS, Sass, JavaScript

学習歴: 2023年3月末で教職を退職し、そこから育児をしながらプログラミングの学習をしています。使用教材は、ほとんどがUdemyで購入したコースで、ウェブのフロントエンド開発、JavaScript、React、等に関するコースを受講しています。Udemyで得た知識を応用したり復習したりするため、本サイトのような小さなポートフォリオを並行して作成しています。

作成に至った経緯
公立高校で英語の教師をしていた頃から、ExcelVBAでプログラミングをすることで教材を開発していました。もともとExcelで英単語のデータを管理していたことが発端で、そのままExcelを使って教材開発を進めましたが、できることが限られており、より多くのことができる言語、環境で教材を作りたいと思い、ウェブ開発の勉強を開始しました。その一環で、地名クイズを作ってExcelでは実現できなった機能（最後の答え合わせなど）を取り入れたクイズを作成した次第です。

実装時の工夫
・県ごとに、その県のすべての市町村を配列（元データ）に格納し、各都道府県からランダムに3つの市町村を抽出し、問題用の配列（New data）に入れました。その際に、各県によっていくつの市町村が存在するのかにばらつきがあり、その数に合わせて0以上（配列のインデックスナンバーであるため）の乱数を3つ取り出す必要がありました。そのために関数を作成し、「0」～「市町村の数 - 1」の数字を格納する配列を作り、その配列内で要素をシャッフルし、そこから最初の3つ（0,1,2個目）を取り出すようにしました。この際、シャッフルの仕方について調べることが多く、「forEach」「reduce」「sort」など、配列に関わる様々なメソッドを試しましたが、結局「for」が一番無難（使いやすい）だという結論に至りました。配列の頭から順番に「i番目」の要素を見ていき、その度に乱数を発生させ、生じた「x番目」の要素を「i番目」と交換する、という作業です。「Fisher-Yates法」と呼ばれるシャッフル方法だそうです。Excelで教材を作っていた時と同じ発想だったので、難しくは感じませんでしたが、JavaScriptほどメジャーな言語であれば配列をシャッフルする機能はデフォルトで備わっていると思いこんでいたので、「自作しないといけないのか、、、」と、少し驚きました。

・前述の通り、乱数を用いてランダムに都市名を抽出していますが、その際に、都道府県1つあたりに何個の都市を抽出したいか、という数を関数の引数として渡しています。現ファイルだとその引数が「3」であり、3個 × 6都道府県で18問となります。この引数を変えることで、問題の総数を変えることができ（n個 × 6都道府県）、クイズとしての柔軟性を持たせています。

・スマホの画面などのサイズになると、長い名前の市町村は枠からはみ出し、勝手に折り返してしまう現象が発生しました。その際、市町村名を書き込む前に、JavaScript側でテキストの長さと枠の幅を計算し、必要に応じてフォントサイズを小さくする機能を付け加えました。

・2つのボタンを誤って押してしまった際の対応として、フラグをいくつかBoolean型で用意し、実行されてはいけない事項は実行できないように工夫しました。

・自身でも何度もテストをし、使いづらいところがないか確認をしました。また、友人や家族にも見てもらい、「ここをこう変えたら良い」という指摘があるたびに改善をしました。そのひとつが、ボタンのグレーアウトです。押せるボタンが複数あると、ユーザーは誤ってボタンを押してしまったり、そもそも何のボタンを押せば良いのかわからなくなるとの指摘を受けたので、必要なボタンだけをアクティブに、そして不必要な（押されるとバグを生む）ボタンはグレーアウトさせて、クリックできないようにしました。誤ってボタンが押された際の措置としてアラートを表示する"フィルター"のような機能をすでに持たせてはいた（前述の内容）のですが、実質ボタンのグレーアウトを実施した時点でその登場はなくなりました。が、今後のデザイン変更に備えて一応削除せずにコード内にも残しています。

・JavaScriptで記述するうちに、コードが冗長になったため、クラスを用いることで整理しました。

課題
・都道府県の市町村データは、すべてJavaScriptのファイルとして直接書くことで対応しています。データベース等の知識が付けば、データベースから拾ってくるような実装を実現したいです。

・現段階では、ユーザーは問題数や、内容を変えることができません。ローカルストレージやデータベースを使用することで、こういったニーズに合わせた機能を追加したいです。

・制限時間を設けていないため、あまり学習の効果が見込めない可能性があります。今、作成しているもうひとつのサイト（tokugawa_shogun_quiz）で、そういった実装を試みています。※こちらのサイトは試作品です。デザイン等の実装は現在行っています。