#40「Interop 2022の気になる技術とInterop 2023」
前回に引き続きInteropについてお話します。後編となる今回は、Interop 2022で注目の重点分野をいくつかピックアップしつつ、Interop 2023についても少しお話ししました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 加藤
- こんにちは！ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。
前回のInterop 2022の歩き方では、Interopとはどんな取り組みなのか、そしてWPTダッシュボードについて話しました。少しずつInteropという取り組みについて、その重要性がつかめてきたと思うので、今回はもう少し具体的なところ、Interop 2022の重点分野についてと、あとはInterop 2023についてもお話したいと思います。佐竹さん今回もよろしくお願いします。 - 佐竹
- よろしくお願いします！
- 加藤
- はい、ではさっそくInterop 2022で取り上げられた重点分野を見ていきたいと思います。えー2022は10個の重点分野があったんですけども、この中で、佐竹さんが特に注目していた重点分野ってどれですか？
- 佐竹
- えーそうですね。Dialog Elementとか、css-scroll-snapを含むScrollingなんかは結構使う機会が増えてきていますし、Viewport UnitsにいたってはBlog記事を書きましたけど、うーん…ほんと個人的な思いで選ばせてもらうとするとCascade LayersとSubgridですかね。
- 加藤
- なるほど。私はまだ両方ともあんまり使ったことないんですけど、確かに今後使っていきそうな2つですよね。
- 佐竹
- はい。その２つが2021年から22年にかけて、私が実際に使いたかったのに対応ブラウザが限られていて使えなかったっていう分野なんですよねー。
- 加藤
- じゃあまずはCascade Layersの方から簡単にどういうものか聞いてもいいですか。
- 佐竹
- はい。Cascade Layersはざっくり言うとCSSプロパティの優先度をレイヤー単位で管理できる@ルールのことですね。
- 加藤
- これまではレイヤーっていう概念は無かったというか、レイヤーは1つしかなくて、基本的にはCSS宣言の詳細度と順番によって最終的にどのスタイルが当たるのかが決定されていたっていうイメージですよね。
- 佐竹
- そうですね。
- 加藤
- プロジェクトが大規模になってCSSが複雑になっていくと、どうしてもCSSが思い通りに当たらなくて
!important使っちゃうみたいな、その場しのぎの解決に陥ってしまうケースがやっぱりあったりするので、Cascade Layersを使ってその辺りを改善できるといいですよね。 - 佐竹
- はい。これまでSassとBEMを組み合わせてできるだけ詳細度が高くならないようにしたり、コンポーネント単位にCSSファイルを分割して衝突を避けやすくするとか、いろいろ工夫してますけど、Cascade Layersを効率的に使えばCSSをもっとわかりやすく管理することができるようになるんですよね。
- 加藤
- ただこれ多分きちんと設計してから書かないと、今度は
!importantの代わりに@layerがどんどん増えていって余計分かりづらくなっちゃいそうですよね。 - 佐竹
- うん、それは分かりますね。そうするとやっぱり、構造だったりカテゴリを意識したレイヤー設計は必要ってことになりますよね。
- 加藤
- ちなみに佐竹さんだったら、たとえばどういうレイヤーを作りますか？
- 佐竹
- そうですねー、うーんレイヤーをFLOCSSだったりSMACSSのような構成で分けて使いたいですかね。
優先度の低い方から順番に、サイト全体にかかわるリセットだったりベースのレイヤーをもってきて、次にサイトの共通パーツとなるレイヤー、でその次がコンポーネント、モジュールのレイヤーで、最後が調整系のテーマとかユーティリティのレイヤーといった感じに、レイヤーごとに優先順位を決めて重ねていくイメージで考えています。 - 加藤
- うん、まさにカスケードって感じですね。ちなみにこれって、なんかその新規構築とか運用とか、いろいろプロジェクトあるんですけど、どういうプロジェクトでも使っていけるものなんですかね？
- 佐竹
- はい。もちろんWebサイトの新規構築から取り入れて、破綻しにくい設計をしておくっていうのも良いと思いますし、あとは、古いCSSが存在しているところにCSSを追加するような場面でも使えますよね。ただ、レイヤーでないCSSはいわゆる無名レイヤーと同じ扱いになるので、名前付きレイヤーより優先度が上になるんですよね。なので、この場合ちょっと工夫が必要かなって思います。
- 加藤
- あー無名レイヤーの方が優先度高いんでしたっけ。
- 佐竹
- はい。
- 加藤
- これはどうすればいいんですか？
- 佐竹
- はい。既存のCSSを触らずに残しておきたい場合は
@importの名前付きCascade LayersとしてCSSを取り込んで、新しいCSSより優先度が低くなるように設定します。 - 加藤
- あーなるほど。無名レイヤーのまま扱うんじゃなくて、あくまで名前付きレイヤーとして扱って、レイヤー単位で優先順位を決めるってことですかね。
- 佐竹
- そうですね。
- 加藤
- はい。ありがとうございます。じゃ、えーCascade Layersはこの辺にして、続いてSubgridについて話していこうと思いますが、Firefoxでは2019年っていうまぁけっこう早い時期に実装されてたんですけど、Safariでもバージョン16から使えるようになりましたね。
- 佐竹
- はい。Subgridを簡単に説明すると、親要素で指定したCSS Gridの設定を、孫要素にまで伝搬させることができる機能です。
- 加藤
- はい。まぁ分かりやすい例だと、画像とタイトルと説明文が縦に並んだようなカードレイアウトのパーツがいくつか横並びになっているデザインを想像したときに、タイトルとか説明文の長さによっては横に並んでいるカードの高さが揃わないっていうことがあるんですよね。
- 佐竹
- そうですね。そういう高さのばらつきを、以前はJavaScriptで動的に調整したり、CSSだけで対応するときはGridの子要素に
display:contentsを使って要素を無視して、孫要素でさらにGridとかFlexを指定するような対応をしていましたよね。 - 加藤
- うん。そうですね。ただやっぱりJSで高さを揃えようとするとCore Web VitalsのCLSを大きくしてしまう原因にもなってしまうので、Subgridを使えば表示パフォーマンスの向上にもつながりますよね。
- 佐竹
- はい。ただSubgridのWPTダッシュボード見ると、Chromeではまだ実装は進行中って感じですよね。
- 加藤
- そうですね。まぁただ、Interopの重点分野になっているっていうところで、ブラウザベンダーも早く実装しようと、頑張ってくれていると思うので、使えるようになる日が待ち遠しいですね。
- 加藤
- はい。では2022年の話はこのあたりにして、えーここからはInterop 2023について話したいと思います。えーと前回のテックラジオでお話しされてましたけども、重点分野の候補をGitHubのリポジトリで公募していたんですよね。
- 佐竹
- はい。公募していた内容はおおきく分けて2種類あります。1つ目が「Focus Area Proposal」で、これは標準仕様やテストがすでに整備されているけどブラウザの実装状況にギャップがあるので改善したいという提案、で2つ目が「Investigation Effort Proposal」で、これはブラウザの実装は進んでいる一方で、仕様やテストの整備が不十分である場合に調査をするための提案になります。
- 加藤
- はい、ありがとうございます。じゃまぁ今回は「Focus Area Proposal」のほうを中心に話していきますかね。
- 佐竹
- はい。えー収録している12月時点でIssueは全部で81個ありましたね。
- 加藤
- 81個！あー結構ありますね！これ全部見ていくのは大変ですね。
- 佐竹
- ですね。なのでIssueのタイトルを読むだけでもなんとなく提案内容が分かるものも結構あるので、目についたものからまず読んでみるといいですかね。あとはagendaラベルがついているIssueにはInteropに関するミーティングの内容がまとまっているので、最新の動きとかはそれを見るといいですね。
- 加藤
- あーそうなんですね。ミーティングってどういう内容が話されているかって分かりますか？
- 佐竹
- はい。たとえば11月のミーティングのアジェンダでは、MDN上で行われた「HTMLとCSSの調査」と「JavaScriptとAPIの調査」それぞれのアンケート結果だったり、State of CSSの結果、あと「2021と2022の重点分野を2023に引き継ぐか」といった内容が確認できます。
- 加藤
- あーそれは興味深いですね。というかMDNでアンケートなんてやってたんですね。
- 佐竹
- そうなんですよ。一般に公開されているような大規模なものではなくって、MDNの特定のページに訪れた人のうち10％の人にのみアンケートを表示していたみたいですね。
- 加藤
- あーそうだったんですね。知らなかったです。まぁでも開発者の声をしっかり議論に組み込んで進めているっていうのはとても素晴らしいですね。ちなみにアンケートの結果はご覧になりましたか？
- 佐竹
- はい。1つ挙げると、MDNの「HTMLとCSSの調査」の結果に、「今後1年間にブラウザ全体で改善すべき機能は何でしょう？」という質問に対する回答結果の棒グラフがあったんですけど、それをみると「CSS media queries range syntax」がもっとも多い割合になっていましたね。
- 加藤
- あーRange Syntaxは、メディアクエリで
min-widthとかmax-widthとかで範囲指定していたのを、不等号を使ってより直感的に書けるようになるっていう仕様ですね。 - 佐竹
- そうです！とくにコードを書いてる人にとっては直感的で分かりやすくなる仕様ですよね。
- 加藤
- うん、そうですね。改善してほしいって答えている人が多いってことは、もしかしたら2023年の注力分野として採用される可能性が高いかも？って感じですかね。
- 佐竹
- うーん…どうでしょうかね。最終的にどれが採用されたかは、年明けの23年1月末に公開される予定なので公開が楽しみですね。
- 加藤
- そうですね！1月末あたりの動きを注目しておきたいと思います！
- 加藤
- はい、ということで、前後編にわたってInteropについていろいろとお話してきましたが、実は今年度ミツエーリンクスでは社内でInteropの重点分野をキャッチアップするっていう施策に取り組んでいました。いろいろ目的はあったんですけど、Webの技術を自分たちで調べるっていう経験を積んでもらうことと、各自調査しながらWebが前進していることを意識するっていうのが主な目的でした。
- 佐竹
- はい。重点分野として取り上げられた技術が解決する課題の概要だったり、どういうサイト、機能で使えそうか、使えなさそうか、っていうところが共有されてましたね。
- 加藤
- そうですね。実際に使うことを見越してのナレッジ共有って感じでしたね。
- 佐竹
- ですね。いくつかの分野はまだブラウザに実装されていないのもありますけど、やっぱりあらかじめ自分の引き出しに入れておいて、今後使う必要が出てきたってタイミングで柔軟に採用できる状態を作っておくっていうことが大事ですよね。
- 加藤
- そうですねー。まぁやっぱりIE11のサポートが終了してから、新しい技術を取り入れやすい環境にはなりましたよね。これまでは使いたい技術が使えなかったかもしれないんですけど、逆にこれからは使えるけど知らない技術のほうが増えてくるかもしれないので、今後もこういった取り組みは続けていきつつ、フロントエンドBlogやテックラジオで紹介していきたいと思います！
- 加藤
- はい。最後に、ミツエーリンクスでは、スマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。 「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。 - 加藤
- えー今回が今年最後の配信となります！いつも聞いてくださっている皆様ありがとうございます！来年もどうぞよろしくお願いします！それではみなさん良いお年を！
- 佐竹
- 良いお年を！