State of HTML 2023という年次レポートがあります。Webに関する技術について、JavaScriptではなくHTMLの側面から利用状況をアンケートし、その結果をまとめたものです。

世界各国でどういった技術が利用されているのか学ぶことで、今後のWeb開発の方向性を知ることができます。今回は、このレポートから気になるデータをまとめて紹介します。

フォーム用APIの利用状況

フォーム関連のAPIでは、以下のような利用状況となっています。

• FormData: 50.7%
• autocomplete: 47.9%
• datalist: 22.6%
• HTML Media Capture: 16.5%
• contenteditable="plaintext-only": 9.5%
• input.showPicker(): 7.7%
• selectlist: 2%

さらに入力種別での利用状況は以下のようになっています。

• number: 94%
• email: 89%
• file: 88%
• date: 83%
• tel: 70%
• range: 68%
• time: 56%
• url: 50%
• color: 46%

意外と、多種多様な入力種別が実際に利用されているようです。ただ、 datetime-local や month 、 week はまだまだ普及していないようです。

フォームを利用する上での辛いポイントは以下のようになっています。

• スタイルのカスタマイズ: 54%
• 入力種別の課題: 33%
• 入力値の検証: 18%

他にもブラウザサポートやフォームのハンドリング、アクセシビリティなどが課題に挙がっています。

新しいタグ

インタラクティブに挙がっていた、新しいタグの利用状況です。思っていたよりも利用されているようです。

• detail/summary: 46.7%
• dialog: 31.2%

インタラクティブ性の課題としては、ブラウザサポートが14%で最も高いです。こうした新しいタグ/APIを採用する際には常にサポート状況を確認する必要があるようです。

コンテンツ

コンテンツに類するものは、以下のような利用状況となっています。Lazy Loadingは便利なので、利用率も高いようです。

• Lazy Loading: 57.9%
• srcset/sizes: 53.2%
• リソースヒント: 41.3%
• CSP: 39.8%

API

ネイティブアプリ風のUXを実現するAPIについてです。Web Share APIはモバイル向けでコンテンツを共有する際に便利です。File System Access APIは、今後Webアプリがローカルアプリケーションのように動作するために重要なAPIです。

とはいえ、全体的にはまだまだ利用率が低いようです。

• Web Share API: 12.6%
• File System Access API: 9.3%
• File Handling API: 4.4%
• Launch Handler API: 4.4%

ネイティブアプリ開発

ネイティブアプリ開発にどういった言語を使っているかの質問です。56%の人たちがJavaScriptベースのフレームワークを利用しているそうです。たとえばCordovaやReact Native、Capacitorなどが挙げられます。

• JavaScriptベースのフレームワーク: 56%
• ネイティブ: 22%
• それ以外: 19%

ストレージ

localStorageやIndexedDBなどのストレージについてです。IndexedDBはまだまだ利用率が低いようです。

• localStorage: 91%
• sessionStorage: 71%
• Cookies: 69%
• IndexedDB: 30%
• Cache Storage: 20%

PWAの機能

Webアプリケーションをネイティブアプリのように動作させるPWAについてです。Service WorkerやApp Manifest、まだ半数程度など利用率は高くなさそうです。

• App Manifest: 55%
• Service Worker: 52%
• Notification API: 19%

ネイティブアプリ風にする際の課題

PWAやネイティブアプリ系のJavaScriptフレームワークを利用する際の課題として挙がっているのが、iOSに関連する課題です。SafariとChromeの違いや、iOSの制約などが挙げられるでしょう。

• Apple/iOS関連の問題: 22%
• PWAの課題: 16%
• ブラウザサポート: 12%
• UXの課題: 6%

まとめ

HTMLの利用状況を知ることで、Web開発の方向性を知ることができます。世界的に取り入れられている技術や、まだまだ普及途中の技術がありそうです。今後も新しい技術に対応していくために、常に最新の情報をキャッチアップしていきましょう。

State of HTML 2023