フリーランスWebエンジニア HTNCode

▲
  • HOME
  • ABOUT
  • SERVICE
  • ACHIEVEMENT
  • BLOG
  • CONTACT
  • githubIcon
  • twitterIcon
プライバシーポリシー
footerLogoImage

© HTNCode All Rights Reserved.

eyecatch

【CSS-in-JS】meta社製StyleXについて調べた

作成日時:2023年12月24日 23:15

更新日時:2023年12月24日 23:25

CSS

React

Next.js

はじめに

  

2021年にもともと発表はされていた、meta社製のCSS-in-JS「StyleX」が2023年12月5日(現地時間)にオープンソースかされてリリースされました。 
特にCSS-in-JS派、CSS modules派といった●●派、は個人的にはないのですが、
BootstrapやTailwindCSSのTailwindCSSが当たり前の今、そして、Reactが主流になっている今を受けて、
Next.jsを使用している身としては今すぐ使わないまでも概要は把握しておかねば、ということで調べました。

    

■StyleX | 公式サイト
https://stylexjs.com/

 

■公式のデモアプリはこちら(GitHub)
https://github.com/facebook/stylex/tree/main/apps

  

  

主な特徴

 

「StyleX」の主な特徴は以下です。
FacebookやInstagramで実際に使用されているそうです。

■速い
JavaScriptを最適化された1つのCSSファイルに変換することで、ウェブサイトの読み込みを速くし、動作がスムーズに。

■スケーラブル
たくさんのコンポーネントを追加しても、ウェブサイトのサイズが大きくなりすぎないように設計されています。

■型安全(タイプセーフ)
TypeScriptやFlow(meta社が作った静的型付け言語)を使って、スタイルのエラーを未然に防げます。
使っていないスタイル定義があったり、誤字などがあったりするとアラート表示などしてくれるようです。

  

また、ドキュメント内でアトミックCSSという単語が出てきますが、これはスタイルを小さな再利用可能な単位に分割するアプローチを取るCSSのことで、CSSクラスは単一のスタイルプロパティと値を表します。 例えば、padding: 8pxや、margin-left: 16pxなどの個々のスタイル1つ1つそれぞれが1つのクラスになります。
TailwindCSSに似てますね。同じ考えが元になっていて、呼び方が異なるようです。

 

インストール

  

■インストール | StyleX
https://stylexjs.com/docs/learn/installation/

 

今回はNext.jsで使います。公式ドキュメントに従って、.babelrec.jsとnext.config.jsを設定します。

npm install --save @stylexjs/stylex

 

npm install --save-dev @stylexjs/nextjs-plugin

 

 

使用方法

 

以下の3ステップで使用できます。

  

1.stylex.createを使ってスタイル定義

 https://stylexjs.com/docs/learn/styling-ui/defining-styles/

 

2.CSS変数を定義する場合はstylex.defineVarsを使用

 https://stylexjs.com/docs/learn/theming/defining-variables/

 

3.stylex.propsでCSSを使用

https://stylexjs.com/docs/learn/styling-ui/using-styles/

 

※型については以下を参照

https://stylexjs.com/docs/learn/static-types/

 

 

おわりに

恐らく今後もっとアップデートされて変わっていくと思いますので、詳しくは公式ドキュメントをご確認ください。
まだ実務では使えないと思いますが、引き続き動向をウォッチしていきたいと思います!

 

それではまた。

 

HTNCode