#27「State of CSS 2021と2022年のCSS動向」
2022年1発目のミツエーテックラジオは、昨年末に公開されたState of CSS 2021の結果とそこから考えられる2022年のCSS動向についてお話ししました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
今回は昨年末に公開されたState of CSS 2021の結果から、今年のCSS動向について加藤さんとお話ししていこうと思います。加藤さん、今年もよろしくお願いいたします！ - 加藤
- よろしくお願いします！そういえばちょうど一年前くらいにも「State of CSS 2020の結果から今後注目されるであろうCSSを探る」というエピソード公開してましたね！
- 橋本
- そうですね。それからの1年でどう変化があったかなどもお話ししていければと思います。
- 橋本
- まずはState of CSS 2021の結果から、2020にはデータがなかったものについてです。機能という項目のところでは、FlexboxやGridレイアウトで使用するgapが上がっていて、使ったことがあると答えた人は55%だったのですけど、自分もいくつかのプロジェクトでgapは使用しましたね。
- 加藤
- gapはめちゃくちゃ使いますよね。これまでネガティブマージンで余白を調整していたようなところも、gapを使えばより直感的にスタイリングできると思います。昨年、当社でもIE対応は控える方針に切り替えましたし、世間的にも同じ状況だと思うので、これまでIEだけがサポートしていなかったプロパティの使用率は今後グッと上がっていきそうですね。
- 橋本
- そうですね。あと気になっているのはaccent-colorですね。結果を見ると知らないと答えた人が約60%とまだ認知率はそこそこなんですけど、このプロパティはこれまでわりと手間がかかっていたフォームのカスタマイズに一役買ってくれるもので、このaccent-colorを使うとフォームのパーツの色を普通のcolorプロパティのように簡単に変えることができます。
- 加藤
- なるほど。色が変えられるってことはダークモードとライトモード用にそれぞれのテーマカラーとして出し分けられるってことなので、また1つデザインの表現の幅が広がりそうですね。
- 橋本
- たしかにそうですね。2022年内に残りモダンブラウザで未対応なSafariでサポートされれば一気に普及しそうな気がします。あとはこのラジオでもたびたび触れてきたコンテナークエリーも2021からの集計となっているのですけど、認知率は約60%と意外と低かったですね。
- 加藤
- そうなんですね！やっぱりまだどのブラウザでも実装されていない、という点が大きいですかね。ただ、CSSに足りていない機能という項目ではコンテナークエリーが1位だったので、あいかわらず期待度は高くて、2021年中に仕様策定も少しずつ動いていて、2022年の間にさらに大きな動きがあれば一気に状況は変わるかもしれませんね。
- 橋本
- そうですね。次は技術という項目を見てみた感じなんですけど、CSSフレームワークのところでは前回同様Tailwind CSSが非常に高い満足度で利用率も年々上がっていて、2021年では2位という結果でしたね。
- 加藤
- 依然としてBootstrapが使用率1位で使われ続けているわけなんですけど、満足度という点では下から数えた方が早い位置にあるので、いろいろな都合で移行できずに使い続けてるって場合が多いかもですね。
- 橋本
- なるほど。CSSフレームワークとしても代表的で長い歴史があるので、断ち切るのが難しい依存関係は多そうですよね。なので、現在Bootstrapを使っている開発者がほかのフレームワークに移行するかどうかによってここの使用率は今後変わっていきそうだと思いました。
- 加藤
- はい、そうですね。
- 橋本
- あとは、CSS-in-JSのところで、2020年には5つの新たなライブラリが登場していたのですけど、そこからさらに2021年には追加で4つのライブラリが増えていて、なにかCSS-in-JS界隈はすごい賑わいを見せているなと感じましたね。
- 加藤
- そうですね。個人的にはCSS-in-JSはやっぱりJavaScriptの恩恵を受けることができるっていうのが一番大きい利点かなと思っていて、たとえば、CSSの値に関するテストコードを書いたり、TypeScriptの型表現をCSSにも適用するというケースが増えてきている気がしますね。
- 橋本
- なるほど。プロパティの値の型を間違えていても普通のCSSはエラーを出してくれないですもんね。
- 加藤
- そうですね。あとはコンテナークエリーの登場によって、今後コンポーネントに閉じられたスタイリングは増えていくと思っているんですけど、そうなると自然とコンポーネント駆動開発が増えていって、結果的にJavaScriptフレームワークでCSSを扱う場面も増えていくと思います。
- 橋本
- なるほど。ちょっとこれを機に少し試してみようと思います！
- 橋本
- 次はState of CSS 2020から大きく変化があったデータについてみていきます。以前は全体の半分くらいの認知度だったPrefers-color-schemeとPrefers-reduced-motionなんですけど、使ったことがあると答えた人がそれぞれ10%ずつ増えているのでこちらもIEのサポートをやめてから増えてきた感じかなと思いました。
- 加藤
- そうですね。同じくIEでは使用できないposition: stickyやCSS Scroll Snapを見ても10％ほど使用率が伸びているので、たしかにその影響はありそうですね。
- 橋本
- はい。あと、今加藤さんがおっしゃったCSS Scroll Snapは自分が昨年Blogのほうでも流行りそうなCSSプロパティの3つの内の1つに挙げたんですけど、残りのbackdrop-filterもaspect-ratioも使用率が10％ほど上昇していて、認知率とともに少しずつ使われ始めているのが分かって良かったです。
- 加藤
- おースゴイですねそれは！予言的中じゃないですか！伸び率がすごかったもので言うと、Subgridが2020では認知率は50％だったのに対して、2021年では70％まで伸びていました。Subgridはグリッドアイテムの内部のレイアウトを指定するプロパティですね。
- 橋本
- たしか先ほどのCSSに足りていない機能の項目にも入ってましたよね。
- 加藤
- 入ってましたね。SubgridはまだFirefoxでしか実装されていないプロパティなのですけど、Gridプロパティ自体が使われることによって、関連して注目を集めているのかなと思います。
- 橋本
- どんな技術が期待されてるのかが傾向として見れるところが良いですね。なんというか、それこそState of CSSの醍醐味というか見どころですよね。
- 加藤
- そうですね！
- 橋本
- ここまでお話ししてきたCSSの機能や周辺技術のほかにもアクセシビリティに関した検証環境や、CSSの情報を得るためのリソースについてなど様々な調査結果がまとまっていたのですけど、そのほか加藤さんから何かイチオシのトピックなどありましたか？
- 加藤
- リソースという項目にポッドキャストに関する調査結果がまとまっていたのですけど、よく聞かれているポッドキャストとして上位2位に「Syntax」と「Shop Talk Show」の2つの番組がランクインしています。この2つの番組はどちらも2022年の技術予想をエピソードとして公開していて、CSSだけでなく、JavaScriptのAPIやフレームワークなど幅広い範囲でお話しされているので、もし興味があれば聴いてもらえるといいと思います！その中でもOpen Propsに関するお話があって、最近社内でデザインシステムに関する勉強をしているのもあって特に気になりましたね。
- 橋本
- なるほど。今言ったOpen Propsというのはどういうものですか？
- 加藤
- 簡単に言えばカスタムプロパティの集合体を集めたライブラリですね。いろんなサイトで共通してよく使われるであろう色やアニメーション、ボーダーなどのプロパティが事前に定義されたものを配信しているので、使う側は@import構文で読み込むだけで利用できます。
- 橋本
- なるほど。Open Propsみたいに自分たちで独自のカスタムプロパティを公開すれば、プロジェクトをまたいで一貫性が保てるのでいいですね。
- 加藤
- そうですよね。そういう動きが今後増えてくるかもしれないですね！
- 橋本
- ということで、今回はState of CSS 2021の結果をもとに2022年はどうなるかといった話をしたのですけど、加藤さんは何かCSS周りで期待している技術などってあったりしますか？
- 加藤
- やっぱり気になるのは、カスケードレイヤーですかね。これまでのCSS設計を覆すことができるくらい強力な機能だと思っているのですけど、ブラウザベンダーの実装速度が思っていたより速くて、正直なところ、開発者側の準備ができていないんじゃないかと思っています。カスケードレイヤーを使っているところと使っていないところがごちゃ混ぜになるとそれこそカオスになりそうだな、とか、既存のフレームワークとどう組み合わせ使っていくかとかをいろいろ考えていかないとなーとは思っています。
- 橋本
- なるほど。State Of CSSではあまり挙げられてなかったですけど、ブラウザベンダーの実装も順調に進んでいるようなので、チェックしておきたいですね！
- 加藤
- そうですね。橋本くんが注目している技術はありますか？
- 橋本
- そうですね…自分はCSSプリプロセッサであるSassなどのように、ネイティブなCSSでも入れ子構造で記述できるようになるCSS Nestingですかね。もともと簡潔に書くためのツールだったものが標準の技術として導入された形なわけですけど、標準で使えることでどこまでツールとして使うかっていう今後の技術選定に影響を及ぼす気がしていて、今回だと入れ子構造での記述は標準のものを使うけど、CSS内で変数や四則演算に関してはツールを使いたい、などとそれだけに特化したプリプロセッサなどのツールが注目を浴びたりするのかなと思いました。
- 加藤
- なるほど。おもしろいですね。入れ子構造にするというのは階層が深くなりすぎると逆に見づらくなるのでその辺注意したりとかしないといけないと思うんですけど、CSSを記述するうえで便利になりそうな技術ですね。
- 橋本
- はい。この辺りも2022年内の動向には期待したいと思います！
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、 Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。 「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。
それでは今日はこの辺で！ありがとうございましたー！ - 加藤
- ありがとうございました！