SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CodeZineニュース

Meta、FacebookやInstagramでも用いられているスタイリングシステム「StyleX」をリリース

  • X ポスト
  • このエントリーをはてなブックマークに追加

  • X ポスト
  • このエントリーをはてなブックマークに追加

 米Metaは、2021年に発表していたコンパイラベースのCSS-in-JSライブラリである「StyleX」を、12月5日(現地時間)にリリースした。

 StyleXは、単なるコンパイラベースのCSS-in-JSライブラリではなく、CSSの表現豊かなサブセットをサポートし、複雑なセレクタが不要になるため、生成されたCSSにおける競合が起こらない。また、スタイルをAtomicなCSSクラス名に変換、編成、最適化してくれるので、ユーティリティクラス名の異なる別のライブラリを学習したり、管理したりする必要がないほか、ファイルとコンポーネントの境を超えたマージ、プロパティや値の詳細な制御が可能な型ユーティリティが用意されている。

 コンパイル、実行ともに高速であり、実行時にJavaScriptを使用してスタイルを挿入するのではなく、必要に応じてクラス名の文字列を効率的に結合するだけであり、生成されたCSSはサイズが最適化されているため、規模の大きなWebサイトであってもブラウザは迅速に解析できる。

 Metaにおいては、すべてのWebサーフェスのコンポーネントをスタイル設定する際に、StyleXが推奨される方法となっており、Facebook、WhatsApp、Instagram、Workplace、Threadsといった同社のあらゆる主要なサービスのReactコンポーネントにおけるスタイル設定に用いられている。

 今回のリリースにあたっては、さらなる機能拡張が行われ、静的スタイルと動的スタイルの両方を作成可能になった。StyleXのテーマAPIを使用して、さまざまなMeta製品にて使われるさまざまなデザインシステムの外観をテーマにした、ユニバーサルコンポーネントを開発している。

 StyleXは、React Nativeのスタイリングシステムによって導入された、カプセル化の原則に従っているため、今後はクロスプラットフォームスタイリングのサポートを徐々に拡大していく。

 なお、StyleXはもともとMeta内で使用するために開発されたが、Metaに特化したものではなく、オープンソースで公開されGitHubで開発を行い、それがMetaに導入されている。

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18772 2023/12/08 08:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング