【ITニュース解説】Built a Modern Rice Purity Test Website. Here's My Tech Stack and the Challenges I Faced.

このニュース記事は、Rice Purity Testという自己評価型のアンケートサイトを現代的に作り直した開発者の話を紹介している。Rice Purity Testは、もともとライス大学で生まれたもので、個人の「純粋さ」や人生経験の度合いを測るためのものだ。開発者は、既存のオンライン版が2000年代初頭から変わらない古臭いユーザーインターフェースで、しかも不快な広告がたくさん表示されることに気づいたため、よりモダンでクリーン、そして広告のない新しいバージョンを自ら構築することにした。これは、特に新しい開発者が自分のプロジェクトを始める上で役立つ情報を提供することを目的としている。

このプロジェクトで採用された技術スタックは、シンプルさと効率性を重視したものだ。フロントエンド、つまりユーザーが直接触れる部分には、Vanilla HTML、CSS、そしてJavaScriptが使われた。Vanillaとは、特別なフレームワークやライブラリを使わず、純粋な言語そのものという意味で、このようなシンプルでほとんど静的なサイトには、複雑なフレームワークは不要だと判断された。これにより、サイトは非常に軽量で高速に動作する。スタイリングには、カスタムCSSが用いられ、モバイルファーストのアプローチで設計された。これは、まずスマートフォンなどの小さい画面での表示を最適化し、それからデスクトップなどの大きい画面に対応していく手法である。CSS GridやFlexboxといったCSSの機能がレイアウトに活用され、あらゆるデバイスで適切に表示されるレスポンシブデザインが実現されている。サイトのホスティングにはGitHub Pagesが選ばれた。これは静的なウェブサイトを無料で公開できるサービスであり、設定が簡単で、さらにHTTPS接続が提供されるため、セキュリティ面でも安心だ。ドメイン名はNamecheapを通じて「ricepurity.info」が取得された。

開発中に直面した主な課題はいくつかあったが、それぞれに効果的な解決策が講じられた。一つ目の課題は「スコア状態の永続化」である。テストには100の質問があり、ユーザーが途中でページを更新したり、サイトを離れて後で戻ってきたりしても、それまでの回答状況が失われないようにする必要があった。この問題の解決策として、Webブラウザに組み込まれているlocalStorage APIが利用された。これは、ウェブサイトがユーザーのブラウザ内に少量のデータを保存できる機能だ。ユーザーがチェックボックスをチェックまたはアンチェックするたびに、すべての回答の状態がlocalStorageに保存される。そして、ページが読み込まれる際には、保存されたデータがlocalStorageから読み出され、テストの回答状況が自動的に復元される仕組みになっている。

二つ目の課題は「スコアの動的な計算」だった。ユーザーが回答を進めるにつれて、現在のスコア（0から100の数値）がページをリロードすることなく、リアルタイムで更新される必要があった。これを解決するために、JavaScriptが活用された。開発者は、テストのフォーム全体にイベントリスナーを取り付けた。イベントリスナーとは、特定のイベント（この場合はクリック）が発生したときに、あらかじめ定義された関数を実行するための仕組みである。ユーザーがチェックボックスをクリックするたびに、この関数が実行され、現在チェックされているチェックボックスの数を数える。このテストでは、「はい」と答える（チェックを入れる）ごとにスコアが1点減算されるため、チェックされた数が多いほどスコアは低くなる。計算されたスコアは、即座にページの該当箇所に表示されるように更新される。これにより、ユーザーは自分のスコアがどのように変化していくかをリアルタイムで確認できるようになった。

三つ目の課題は「共有可能な結果の作成」だった。ユーザーがテストの最終スコアを簡単に共有できるようにする機能が必要とされた。この課題に対しては、「スコアを共有」ボタンが実装された。このボタンをクリックすると、navigator.clipboard.writeText() APIというJavaScriptの機能が利用される。このAPIは、指定されたテキストをユーザーのクリップボードにコピーする機能を持つ。具体的には、「I scored a 92/100 on the Rice Purity Test! 🎯 ricepurity.info」といった定型メッセージがクリップボードにコピーされるように設定されている。これにより、ユーザーはコピーしたメッセージをソーシャルメディアやメッセージアプリに簡単に貼り付けて、自分のスコアを共有できるようになった。

このプロジェクトは開発者にとって週末の楽しいプロジェクトだったようで、今後の拡張アイデアもいくつか挙げられている。例えば、匿名で集計されたスコアデータを視覚化するデータビジュアライゼーション機能や、最近のモダンなアプリケーションには欠かせない「ダークモード」の追加。さらには、ユーザーが自分好みの質問リストを作成できる機能なども検討されている。

このニュース記事は、シンプルなプロジェクトであっても、現代のウェブサイトを構築する上で遭遇する具体的な課題と、それを解決するための技術選定やプログラミングの工夫について、システムエンジニアを目指す初心者にも分かりやすく解説している。最小限の技術スタックで、ユーザー体験を向上させるための実践的なアプローチが示されており、小規模なプロジェクトを通じてウェブ開発の基礎を学ぶ良い事例と言えるだろう。