段階的向上による堅牢なフロントエンド構築
(gov.uk)堅牢なフロントエンドを構築する方法: 段階的向上
-
HTMLから始める
- 政府サービスはHTMLだけでも機能するべき
- HTMLレイヤーはフォールトトレラントであり、古いブラウザーでも動作可能
- 正しいセマンティックマークアップを使い、文書構造を論理的に組み立てる必要がある
-
CSSを使う
- CSSを使ってサービスをスタイリングできる
- CSSレイヤーは個々の宣言を無視できるフォールトトレラント性を持つ
CSS-in-JSのような技術は避けるべき
-
JavaScriptを使う
- JavaScriptはインタラクティブな要素を追加するために使われる
- JavaScriptレイヤーはフォールトトレラントではなく、エラーが発生しうる
- ブラウザーAPIに対する機能検出、ポリフィルの導入、トランスパイルなどによって互換性を高められる
- JavaScriptはHTMLとCSSを補完する役割を担うべき
-
JavaScriptの代替
- JavaScriptなしでもユーザー要件を満たせるシンプルな解決策を検討するべき
- 代替として、データテーブル表示、データのエクスポート、グラフの画像への事前レンダリングなどがある
-
クライアントサイドJavaScriptフレームワークを使う
- 複雑なユーザーインターフェースでない場合は、フレームワークの使用を避けるべき
- フレームワークを使うと、コードベースの肥大化、性能問題、サードパーティーコードへの依存といった問題が発生しうる
- フレームワークを使う場合は、各ユーザーインターフェースを個別のコンポーネントとして設計するべき
-
CSSまたはJavaScriptが読み込まれない、または実行されない理由
- ネットワークエラー、ブラウザー拡張機能、サードパーティーベンダーのダウンタイム、DNSルックアップ失敗、ブラウザー更新によるバグなどが原因になりうる
- 一部のユーザーはブラウザー機能を意図的に無効化している場合がある
-
シングルページアプリケーション（SPA）
- シングルページアプリケーションでサービスを構築するべきではない
- SPAはアクセシビリティを損ない、ページ間移動時のフォーカス処理の問題、戻る/進むボタンが使えないなどの問題を引き起こす可能性がある
-
サービスのテスト
- JavaScriptまたはJavaScriptフレームワークに大きく依存するコンポーネントは、さまざまなブラウザーやデバイスで動作しなければならない
- アクセシビリティのためのテストを行うべき
-
事例研究および関連ガイド
- なぜ段階的向上を使うのか
- さまざまなデバイス向けのデザイン
- フロントエンド性能のテスト方法
- WCAG 2.2 を理解する
GN⁺の要約
- 段階的向上は、HTML、CSS、JavaScriptの順でウェブサイトを構築する方法
- この方法はサービスのフォールトトレラント性を高め、さまざまなブラウザーやデバイスで動作可能にする
- JavaScriptは補完的な役割を担うべきであり、代替ソリューションを検討する必要がある
- シングルページアプリケーションはアクセシビリティの問題があるため避けるべき
- サービスのテストでは、さまざまな環境でのアクセシビリティを保証する必要がある
1件のコメント
Hacker Newsの意見
JavaScriptフレームワークを使うときは、ユーザーにどんな利点があるのかを証明できるべき
SPAの欠点として指摘されている点
インターネット全体がこの助言に従ってほしい
シンプルな解決策を優先すべき
Linuxが一覧にない理由が気になる
多くの人がこのアプローチを気に入っているようだ
HTMLとサーバーで事前取得したデータを使い、クライアントでできる作業はクライアントで処理する
多くのSPAには問題があるが、すべてのSPAに問題があるわけではない
サーバーサイドレンダリングも無条件によいわけではない