6月10日、Moh Kohnが「How building an HTML-first site doubled our users overnight」と題した記事を公開した。この記事では、HTML中心の設計でWebアプリケーションを構築した結果、ユーザー数が一夜にして2倍に増加した実例について詳しく紹介されている。以下に、その内容を紹介する。
失敗したReactアプリが引き起こした問題
著者のクライアントは英国の公益事業会社で、サービス申請フォームに大きな問題を抱えていた。顧客満足度が96%を下回ると数百万ポンドの罰金が科される規制下で、これまでに2度の高額な開発プロジェクトが失敗に終わっていた。
最新の試みでは、海外の請負業者がReactアプリを開発したが、わずか3日間でオンラインから撤去される事態となった。著者が確認したところ、そのアプリは無数のローディングスピナーとグローバルJavaScript状態で構成されており、アクセシビリティにも対応していなかった。さらに重要な画像アップロード機能では、5MBの制限があるlocalStorageにすべてのフォームデータを保存しようとするという設計上の欠陥があった。
HTML-firstアプローチの採用
著者は大胆な決断を下し、**Astroを使用してHTML中心のサイト**を新たに構築した。JavaScriptはWebコンポーネントとして存在するが、JavaScript無しでも完璧に動作するサイトを漸進的に拡張する目的のみに限定した。
この判断の根拠として、著者は以下の原則を掲げた：
- これは公共サービスである
- 可能な限りすべての機器で動作すべき
- 接続状況が悪い環境でも動作すべき
- 一度入力されたフォームデータは絶対に失われてはならない
著者の設計思想に大きな影響を与えたのは、Terence Edenの逸話だった。その中で、ロンドンの住宅手当事務所で、PlayStation Portableの貧弱なブラウザを使ってGOV.UKの住宅手当ページを閲覧する女性の姿が描かれている。
PSPのWebブラウザは、控えめに言っても悲惨だ。動作が遅く、頻繁にメモリ不足になり、同時に開けるタブは3つまでしか対応していない。しかしGOV.UKのページはシンプルなHTMLで書かれている。軽量に設計されており、劣悪なブラウザでも動作する。そうでなければならないのだ。これはすべての人のためのものだから。
技術的実装の詳細
著者が導き出した要件は以下の通りだった：
- フォームの各セッションに一意のIDを付与
- フォームウィザードの各ステップで、アップロードを含むすべてのデータをバックエンドに保存
- JavaScript無しでのフォーム完了を可能に
- 旧式で性能の劣るWebブラウザでの完了を可能に
- WCAGアクセシビリティ基準（AA）への準拠
- JavaScriptとモダンCSSによる体験の向上
基本的な構成では、フォームウィザードの各ステップを独立したページとして実装した。ユーザーが次へボタンをクリックすると、フォームが送信される。APIがデータを有効と判断した場合、ブラウザは次のステップにリダイレクトされる仕組みだ。
Remixによって小さな現代的復活を遂げたフォーム送信とリダイレクトのパターンは、クライアントサイド重視のWebアプリケーションに慣れた同僚たちには説明に時間を要した。
HTMLバリデーションWebコンポーネント
著者が特に力を入れたのは、フォームバリデーションの実装だった。Reactバリデーションライブラリとの格闘に何人月もの工数を費やすチームを数多く見てきた経験から、すべてのブラウザに標準搭載されているバリデーションシステムの貧弱な模倣品に必要以上の時間をかけることの無駄を指摘している。
そこで著者はHTMLWebコンポーネントを構築した。既存のHTMLを包み込んで機能を拡張するシンプルなカスタム要素で、Shadow DOMは使わず、JavaScriptでのHTML描画も最小限に留めた。
開発されたコンポーネントは任意のHTMLフォームを包み込み、HTMLバリデーションを取得してモダンな外観にする。HTMLバリデーションのポップアップツールチップを防ぎ、代わりにフィールドに関連付けられたaria-describedby要素にエラーを配置する仕組みだ。
<validation-enhancer>
<form>
<label for="my-email">Email</label>
<input type="email" name="my-email" aria-errormessage="my-email-error" required />
<div id="my-email-error"></div>
<button type="submit">Submit</button>
</form>
</validation-enhancer>
このコンポーネントは1KB未満で動作し、失敗時にはブラウザ内蔵のバリデーションにフォールバックする。著者は後に汎用利用を目的とした新バージョン「validation-enhancer」を一から書き直し、20年以上の業界経験の中で最高のフォームバリデーションライブラリだと自負している。
劇的な成果と示唆
新しいHTML-firstサイトのリリース後、フォーム完了者数が2倍に増加した。分析チームは、これらのユーザーがどこから来たのかさえ把握できなかった。JavaScriptベースの分析パッケージでは、JavaScript障害により離脱したユーザーを捕捉できないためだ。
「バックエンドセッション保持、ユーザーデータ絶対保護」のアプローチも成果を示した。1か月前に開始したフォームを完了したユーザーも記録された。
著者は最後に重要な警告を発している。後任者がこの設計について「JavaScript無しでも動作するのは我々にとって多くの作業を意味する」と批判したという。しかし、旧式ブラウザ、悪いネットワーク接続、支援技術を使用するユーザーを排除することは受け入れられない。特に独占的公共サービスにおいては尚更だ。
PlayStation Portableの3G接続で動作するWebアプリケーションを構築すれば、すべてのユーザーに対応し、30年後でも動作し続けるものになるという。
詳細はHow building an HTML-first site doubled our users overnightを参照していただきたい。
