#41「State Of CSS 2022から2023年のトレンドを占う」
毎年実施されているState Of CSSの調査結果から2022年のトレンドと今年のCSS周辺動向を予測してみます。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 加藤
- 皆さん、こんにちは！ミツエーリンクスの加藤です！
- 佐竹
- 佐竹です！
- 加藤
- はい、今回もミツエーテックラジオやっていきたいと思います。ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。
- 今回は昨年末に発表されたState of CSS 2022の調査結果から、2023年のCSSのトレンドを占っていこうと思います。よろしくお願いします！
- 佐竹
- よろしくお願いします！
- 加藤
- はい。ちなみに、ちょうど1年前くらいに「State of CSS 2021と2022年のCSS動向」というエピソードも公開しているので、そちらも聞いていただけると1年前からどういう変化があったのかっていうところが分かりやすいかもしれないです。じゃーまずは、State of CSSを知らない方もいらっしゃるかもしれないので、少し紹介しておきましょうか。
- 佐竹
- はい。お願いします。
- 加藤
- はーい。State of CSSはCSSの機能やツールの認知度、利用度、満足度などを調査するための開発者向けのアンケートです。アンケートの結果からCSSに関するエコシステムのトレンドを予想したり、開発者の技術選定を支援することを目的としています。
- 佐竹
- State of CSSはどちらかというと、今何が人気なのかを知るのではなくって、どういう方向に進んでいるのか、今後数年間に何が起きそうなのかということを予測することに重点を置いている感じなので、2023年のトレンドを占う今回のテーマにうってつけというわけですね。ちなみにアンケートって誰でも回答できたんですよね。
- 加藤
- そうですね。結果に回答者の属性も出てるんですけど、居住国・居住地別だと一番多かったのがアメリカの11.7%、次いでドイツ、フランス、イギリスと続いていて、日本の回答率は0.7％の89名だったみたいですね。アンケートの回答に使った言語別だと1位が英語で64.3％、次がドイツ語、フランス語と続いて、日本語での回答は0.5%となってました。
- 佐竹
- はい。居住国だったり言語で選別されることなく集計してくれるんですね。
- 加藤
- そうですね。アンケートの結果はInteropの注力分野の参考情報にもなったりするので、Web開発のエコシステムに貢献できるチャンスですし、アンケートに回答することを通して自分が知らなかった技術を知るきっかけにもなるのでオススメです。
- 加藤
- はい。ではここからは実際のアンケートの結果について話していきたいと思います！
- 佐竹
- はい！では、State of CSSのカテゴライズの順番に「機能」からいきますか？
- 加藤
- そうですね。何か佐竹さんが気になった機能とかってありました？
- 佐竹
- うん、そうですね。まずは認知度と利用率が最も高かった機能だとFlexbox gapがありましたよね。
- 加藤
- そうですね。Flexbox gapは去年も認知度、利用率は高かった覚えがあります。
- 佐竹
- そうですね。で、次に気になっている機能は認知度、利用率が両方高いVariablesと、認知度はそこそこあるけれど利用率が少ないCSS Nestingとかですかね。VariablesはデザインシステムだったりCSS-in-JSの普及に合わせてWeb品質を担保するのに、今なくてはならない存在となっていますし、CSS Nestingはまだ主要ブラウザでは使えないですけど、今後使えるようになったらSassで変数設定をしたり、ネストで書かなくてもネイティブのCSSでできることになるので、Sassの出番が減ってくるんじゃないでしょうかね。
- 加藤
- うん、そうですね。まーちょっと言い過ぎかもしれないですけど、もはやネストの為にSass使ってる感はありますよね。CSS Nestingはまだどのブラウザもデフォルトでサポートはしていないのでちょっと利用率が低い感じですかね。そういえば今回のState Of CSSのアンケートから、その各項目に対して回答者がコメント残せるようになっていて、CSS Nestingのコメントを見てみたんですけど、PostCSSなどのツールと合わせて使っているというコメントが多かったですね。
- 佐竹
- なるほど……ネイティブのCSSでもツールと組み合わせてすでに使っているっていうことなんですかね！？「CSSに足りていないと思う技術」の項目でもCSS Nestingの回答数が一番多かったので、早く使いたいと思っている人が多い機能と言えそうですかね。以前Chrome DevelopersのBlogだったりSafariのWebkit Blogで構文の仕様をどうするかアンケートを取っていて、その結果も出ていましたし、ChromeのCanaryでは実験的に動作を見れるところまできているので、2023年どこまでブラウザの実装が進むか、これは楽しみですね。 加藤さんは気になった機能ありますか？
- 加藤
- えーっと私が知らなかった機能でこれ面白いなーと思ったのがfont-paletteですね。
- 佐竹
- えー、なんですか、それ。
- 加藤
- あのー普段文字の色を変えるときって、CSSの
colorプロパティを使うと思うんですけど。 - 佐竹
- はい。
- 加藤
- テキストの一部だけに色を付けたりとか、3Dっぽいテキストとか、なんか見た目が少しリッチなテキストを作るために、フォント自体に色とかグラデーションのデータっていうのを含むことができるんですよ。
- 佐竹
- おー、ということはそれってフォント自体に機能がまとめてセットになっている機能っていう感じなんですかね。
- 加藤
- そうですね。といいつつ、自分も知らなかったんですけど。で、フォント自体に色とかそういうデータが入っているのをカラーフォントって言ったりするんですけど、カラーフォントの中には複数の色パターンが含まれていることがあって、どのパターンの色を使うかっていうのを指定するために使うのが
font-paletteっていうプロパティですね。Google Fontsのページに行くと上の方に「Show only color fonts」っていうオプションがあって、これにチェックを入れると色データが含まれているフォントだけが表示されるので、見てみるとちょっとイメージしやすいかなと思います。 - 佐竹
- なるほど。これまで画像でしか対応できなかったようなリッチなテキストも、このfont-paletteで表現できるかもしれないってことですかね。なんかすごい表現の幅が広がりそうで、面白いですね！
- 加藤
- そうなんですよね！日本語のカラーフォントってやっぱりまだ多くないので、今後どういうフォントが出てくるかっていうところが楽しみですね。
- 加藤
- はい。ではここからはCSSフレームワークなどCSSのツールに関するところを話していきたいと思います。CSSフレームワーク全体の大まかな傾向としては2021年からそこまで変動は無かったかなと思います。
- 佐竹
- 相変わらずTailwind CSSは満足度、興味ともに高いですね。
- 加藤
- ですね。ちなみにCSSフレームワークの利用率のランキングを見てみると、2021年から順位が全く変わっていないんですよね。しかも2022年から取り上げられている新しいフレームワークっていうのも特に出てきませんでした。
- 佐竹
- あー、もしかしたらフレームワークのような大きめの開発セットは少し枯れてきているんですかね。
- 加藤
- うんうん。そうかもしれないですね。変化があったところでいうと、ページの後半に「そのほかのツール」というセクションがあるんですけど、ここで2021年では取り上げられていなかったOpen PropsとUnoCSSと回答している人が比較的多かったかなーっていうところですかね。
- 佐竹
- Open Propsは10月に公開した「デザイントークンと関連ツール」というエピソードでも取り上げましたよね。
- 加藤
- そうですね。UnoCSSの方はCSSフレームワークだけじゃなくって、CSS-in-JSのページでも回答数が多かったんですけど、私は使ったことがなかったので少し調べてみました。で、これはどうやらTailwind CSSのようなユーティリティベースのCSSフレームワークを作るためのツールのようですね。
- 佐竹
- つまり独自のユーティリティベースのフレームワークを作れるってことですか？
- 加藤
- そうですね。あのー設定ファイルに「こういうクラス名なら、このプロパティに、この値を指定する」、っていうのをずらっと書いていって、ページで実際に使われているクラスっていうのを読み取りつつ、最終的にCSSを生成するみたいな感じですね。
- 佐竹
- なんかTailwindと似てますね。
- 加藤
- そうですね。Tailwindでも同じことはできると思うんですけど、UnoCSSは事前に定義されているCSS宣言っていうのを一切持っていなくて、設定をゼロから書く必要があるみたいですね。
- 佐竹
- えー、フレームワークなのにゼロから書くんですか。なんかちょっと大変そうって思ってしまうんですけど…。
- 加藤
- そうですね。なんかフレームワークっていうよりは、フレームワークを作るためのエンジンっていう立ち位置をとっているみたいですね。ただそのUnoCSSにはプリセットを使うっていう機能が備わっていて、もし使いたければTailwindとかBootstrapで定義されているCSS宣言を取り込むっていうこともできるみたいですね。他にも独自の機能がいくつかあるみたいなんですけど、気になる方はUnoCSSの制作者の方が書いた「Reimagine Atomic CSS」という記事に詳細が書いてあるので、それを読んでみるといいと思います。
- 佐竹
- はい。ここまで話していて思ったんですけど、2022年ってOpen PropsもUnoCSSもそうですけど、サイトを構築するためのフレームワークというより、既存のフレームワークをより便利に使うためのツールというのが注目された1年だった気がしますね。
- 加藤
- あー確かにそうですね。なんか最近はページをどう設計するかっていうところに悩むよりも、運用を見越したうえで開発環境をどう作っていくかっていうほうに悩むほうが多いかもしれないですね。
- では最後にCSS Usageについてです。ブラウザの非互換性のところに、ブラウザの差異によって実際の利用が難しい機能は何ですか、という質問の回答がまとまっています。2021年はGridやFlexbox gapが上位を占めていたのですが、2022年では
:has()疑似クラス、@container、Subgridの回答数が多かったです。 - 佐竹
- なるほど。2021年でGridとGapって言われていましたけど、ちょうどInteropの2021年からの重点分野にもGridとFlexboxが含まれているので、State Of CSSの回答結果がInteropにも影響してそうですね。
- 加藤
- そうですね。その流れで行くと、今年は
:has()とか@containerとか、あと冒頭の方でお話したCSS Nestingが注目の年になりそうですね。 - 加藤
- ここまでState of CSS 2022の結果をもとにいろいろ話してみましたけど、佐竹さんがCSS周りで今後期待していることはありますか？
- 佐竹
- そうですね。私が期待しているのはネイティブのCSSがフレームワークだったりツールのように効率的に書けるようになることですかね。うん。フレームワークやツールはサポート状況だったり仕様の変更があったりするので、それがコンパイル後のCSSに影響するってことって少なからずあると思うんですよ。なので、ネイティブならその辺を気にしなくていいし、機能が使えるかどうかはブラウザの対応状況次第になるので、いろいろと楽になりますよね。
- 加藤
- うん、なるほど。今回も何度か話題にあがったCSS Nestingなんかはいい例ですよね。
- 佐竹
- そうですね。
- 加藤
- うん。さっきもちょっと言ったんですけど、たしかにサイト構築するときって開発環境をどう作るのかも結構悩むところだと思うんで、Web標準技術だけで完結できるようになると、その悩みが減らせるかもしれないですね！
- 加藤
- 最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
- また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどお待ちしております。それでは今日はこの辺で！ありがとうございましたー！
- 佐竹
- ありがとうございました！