The Web Developer Bootcamp 2023 セクション53/61
今回は、Webアプリケーションのコードを再構築して、より整理・管理しやすくするプロセスについて説明します。ここでは、アプリケーションのレビュー、ユーザー、キャンプ場のルートに焦点をあてています。講師は、これらのルートの機能を個別のコントローラに抽出し、各ルートのロジックを理解しやすくする方法を示しています。各ルートをテストすることで、変更が正しく行われたことを確認します。
また、Webサイトにスター機能を追加するプロセスについても解説しています。星の実体コードを手動で設定する代わりに、Star Abilityというライブラリを使用することにしたと説明しています。これは、基本的な評価機能のために含めることができる、単なるCSSファイルです。スターレーティングはショーページに表示され、データレーティングプロパティによって制御されます。まず、ユーザーとしてログインし、1つ星のレーティングを残すことで、機能のデモンストレーションを行ないます。
続いて、スライダーで評価を選択する方法から、スター評価システムに変更する方法を説明します。スター評価システムは、JavaScriptを使用せず、フィールドセット要素とラジオボタンのコードをコピーするだけで実現できます。ラジオボタンの値は1～5で、アクセシビリティ属性が追加されています。現在、このフォームにはバリデーションが備わっていますが、星の評価システムには適用されていないことを指摘しています。一時的な解決策として、レーティングが選択されていない場合のデフォルト値を1に設定することを提案しています。
また、フォームを送信する前に、評価が選択されていることを確認するためのバリデーションがあったほうがよいという意見もあります。この場合、ラジアルボタンが選択されたかどうかを確認するために、JavaScriptとDOMの操作が必要になるかもしれないと述べています。しかし、UIの改善は理想的なものではないが、スライダーよりは改善されていると結論づけています。また、今後はレビューやユーザールートについても同様のプロセスを踏んでいく予定であると話しています。
最後に、Webアプリケーションのコードを再構築して、より整理された、作業しやすいコードにするプロセスを紹介しています。また、UIを改善し、ユーザーがレビューを残しやすくするために、ウェブサイトに星の評価システムを追加するプロセスも示しています。改善する余地があることを認めているのですが、それでもこれまでの変更点は、以前のデザインよりも改善されていると言えます。
この記事が気に入ったらサポートをしてみませんか？