#54「State of HTML 2023から見るフロントエンド」

加藤 : 皆さん、こんにちは！ ミツエーリンクスの加藤です！

佐竹 : 佐竹です！

加藤 : はい、今回もミツエーテックラジオをやっていきたいと思います。ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回は5月に公開されたState of HTML 2023の結果を見ながらあれこれ話す回です！佐竹さん、よろしくお願いします！

佐竹 : よろしくお願いします！

加藤 : えー当社のアクセシビリティBlogで「State of HTML 2023にみるアクセシビリティの現状」という記事も公開されているので、そちらもぜひ併せてご覧いただければと思います。

佐竹 : はい、あのBlogの中にフロントエンドの話題についてはテックラジオで取り上げるかも、というような記述もありましたよね。

加藤 : そうなんですよ！これはもう取り上げないわけにはいかないなと笑。はい、ということで早速見ていきましょう。

佐竹 : はい。まずState of系の調査はこれまでCSS、JSがありましたが、HTML版は初回になるので概要を少し説明します。State of HTMLは開発者の技術選定に役立つよう、Web開発のエコシステムにおける今後のトレンドを特定するためのアンケートによる調査になります。

加藤 : はい。調査結果はざっくり「回答者の属性」、「HTMLの機能」、「HTMLに関連するツール」、「各機能の利用状況」、「まとめ」の5つに分類されています。最初の回答者の属性を見ると、日本の回答者数は全体の2%、194人という結果になっていました。

佐竹 : 1位がアメリカで19%、2,340人。人口だったりエンジニア比率の違いもあるので日本が1位になるのはちょっと難しいかなと思いますけど、State of CSS 2023ではランク外、State of JS 2023では17位、2％、280人だったので、初回の日本からの参加者としてはまずまずな感じなんでしょうかね。

加藤 : そうですね。まぁ日本以外も含めた全体の回答者数は20,904人でState of系の調査としては過去最多だったようですね。

佐竹 : おーすごいですね。アンケートなどの調査は母数が多いほうが信憑性は増すと思うのでもっと協力してくれる人が増えるといいですよね。個人的にはフロントエンドのセミナーカンファレンスで500人以上集まっているのを見かけたりもするので、日本の回答者数も同じくらいになるといいかなーと期待しています。

加藤 : はい、そうですね。では、さっそく「HTMLの機能」、「各機能の利用状況」あたりから気になったところをお互い話していきたいと思います。まずは「HTMLの機能」ですが、このパートではフォームやWeb Componentsなどのカテゴリにわかれていて、えーそれぞれ各機能を使ったことがあるか、課題に感じるところはどこかといった回答を見ることができます。

佐竹 : 「すべての機能」の章ではすべてのカテゴリをまとめた結果が掲載されているんですね。えーと回答者の属性とか回答内容によってフィルタリングとかソートができるようになってますね。えー使用したことがある人が多い順で並び替えて4番目のsrcset属性とsizes属性に関するコメントが他よりちょっと多めのようですね。

加藤 : そうですね。あのー回答の詳細とか背景をもうちょっと知りたいときは、えー各機能に対する回答者のコメントを見てみるとよいかもしれません。そのコメントを書いた人がどのような選択をしたのかっていうところも一緒に書かれています。

佐竹 : なるほど。選択した回答があると機能を使ってみてのコメントなのか、仕様を知っているけど使わなかった、または使えなかったっていうコメントなのかっていう切り分けができますね。srcset属性とsizes属性は、使用した結果「複雑」や「難しい」などのネガティブな感情を持った人のコメントが多いようですね。

加藤 : はい。使ったことがある人は53%で、そのうちネガティブが4％なんで、この4％の人たちからコメントが多く寄せられているということですかね。「聞いたことがあるけど使っていない」って回答した人も30%いるので、他の機能に比べるとやっぱ多めですね。

佐竹 : 以前、あのーエピソード42で「Webにおける画像を改めて考える」の回で99.9%のページにおいて何かしら画像が使われていると話していたこともあったんでこのsrcset属性とかの機能も結構使っている人が多いのかなと思ってました。

加藤 : たしかに画像は画質やパフォーマンスのバランスを考えながら要素とか属性を設定する必要があって、少し複雑に感じることはありますね。ただ一度設定してしまえばそれをベースに更新していけたり、フレームワークによっては画像の属性を自動で設定してくれたりっていうのもあるので、色々試してみるのもいいかもしれないですね。

佐竹 : そうですね。機能名をクリックするとMDNのリンクも出てくるのでこちらも参考にしたいですね。

加藤 : はい。他だと、アクセシビリティBlogでも触れられていますが、やっぱりフォーム関係で課題に感じていることのコメント数が他のカテゴリよりもかなり多いんで、そのあたりが今後どう変わっていくかは要注目かなと思います。まぁアンケートの序盤の質問だから回答数が多いのかも、というのもありそうですけどね。

佐竹 : たしかにそうですね。フォームコントロール要素のスタイリングとかカスタマイズに課題を感じている人が、えー、55%もいるんですね。

加藤 : そうなんですよね。たしかにselect要素とか、dateタイプ、fileタイプのinput要素とかはスタイルの制約がかなりありますよね。

佐竹 : ですね。でもプロジェクトではフォームをサイトのイメージに合わせてカスタマイズして欲しいというような要望がけっこう多いんですよね。でもカスタマイズによってフォームのアクセシビリティを損ねてしまうっていうリスクもあるので、毎回私も難しいなと思いながら対応していますね。

加藤 : そうですよね。そのあたりはOpen UIが提案しているCustomizable Select Elementに期待したいところだなと思います。

佐竹 : Customizable Select Elementは今どんな状況なんでしょうか？

加藤 : えーと…けっこういろいろ進んでいるんですけど、分かりやすいところだと大きく2つの提案が進行していて、1つがselect要素のスタイリングを可能にするためにappearanceプロパティに新しい値を指定できるようにするっていう提案です。このappearanceプロパティは実は3年以上前から議論されていたんですが、最近WHATWGとOpenUIが合同でミーティングを設けるようになってから、より具体的に進むようになったのかなと思います。

で、もう1つはselect要素やdateタイプのinput要素とかはクリックすると値を選択するためのピッカーが表示されますけど、このピッカー部分のスタイルを可能にするための提案です。これ詳細はまだ未定なんですけど、::picker疑似セレクタのようなものを追加することが提案されているみたいですね。

佐竹 : なるほど。これが実現されれば、フォームのカスタマイズの悩みも解消されるかもしれないということですね。

加藤 : そうですね。そうなるといいですね。

加藤 : 続いて「各機能の利用状況」のページでは「ブラウザの相互運用性が足りていない機能」についての設問がありました。上から見るとpopover API、dialog要素、View Transition APIなどが相互運用性の足りていない機能として挙げられています。

佐竹 : えーpopoverは4月にFirefoxのバージョン125がリリースされて、すべてのモダンブラウザで利用できるようになってましたよね。dialog要素はだいぶ前から使えるようになっていた気がしますけど。

加藤 : そうですね。まぁこの結果はアンケート実施時点の内容になるので、今現在ではブラウザに実装されて相互運用性がある機能も含まれているかもしれないですね。

佐竹 : あ、そういうことですね。えー上位に上げられている機能でまだ相互運用性が整っていない機能だとView Transition APIですかね。

加藤 : はい。この設問の項目の上位にある機能ほど、開発者がブラウザへの実装を期待している機能っていうのがわかりますね。

佐竹 : はい。アンケートのパートナーとか協力者にはブラウザベンダーもいるので、アンケートに回答することで開発者の期待が伝わるかもしれないですね。

加藤 : はい、そうですね。で、あとは相互運用性ではなくて、単純に機能が足りていないと思うところはどこか、という設問では個人的に目にとまったというか、少し共感したのは、dialog要素の表示を宣言的に行えるAPIがないというコメントですね。

佐竹 : なるほど。popoverは宣言的に表示を切り替えるようになってますけど、dialog要素は表示切り替えにはまだJSが必要ですね。

加藤 : で、これもOpen UIの話なんですけど、Invoker Buttonsという機能が検討されていてWHATWGのGitHubリポジトリに提案用のイシューが立てられて議論が進んでます。

佐竹 : Invokerってことは、なにかを呼び出す機能ってことですか？

加藤 : そうですね。これはまだいろいろ議論中なんで、まぁそういう話もあるんだなーくらいで聞いてもらいたいのですが、あのーbutton要素にpopovertarget属性とpopovertargetaction属性を指定して、JSを使わずにpopoverな要素を表示、非表示できるようになったと思うんですけど、あのdialog要素などほかの要素も同じようにコントロールできる汎用的な属性を追加しようという動きです。

佐竹 : たしかにそれがあれば、dialog要素を非表示にするだけのJSとかは不要になりそうですね。

加藤 : そうですね。で、最近活発に議論されているんですが、属性の名前どうするかとか、あとはvideo要素とかaudio要素の制御も同じ仕組みでやるのか？みたいにけっこう話が広がっているので、収束するまでにはまだかなり時間がかかりそうな印象があります。

続いて、こういう標準の要素が欲しい！という設問では「データテーブル」と「タブ」と回答している方が多かったようです。ここでいうデータテーブルはソートやフィルタリングの機能が標準で備わっている表形式の要素を指しているようですね。

佐竹 : それは欲しいですね。タブも、どんなプロジェクトでもほぼ毎回のように実装するんですよね。

加藤 : そうですね。なのでHTML要素として実装されていると、開発自体も楽になるのかなと思います。

加藤 : はい。ここまで、State of HTML 2023の結果を見ながらフロントエンドの周辺について話してみました。これまでどんなサイトでも実装されてきたJavaScript機能とかはHTMLの標準機能としてブラウザに実装されるようになっていくのかな、と思ったりしますね。

佐竹 : はい。HTMLの動向を追うことで、これまでよりも簡単にリッチなサイトを実装できるようになるかもしれないですね。

加藤 : 最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。

また、このPodcastはApple Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。それでは今日はこの辺で！ありがとうございましたー！

佐竹 : ありがとうございました！