あまり知られていないかもしれない、CSS-in-JSを実装するライブラリでできる5つの便利なテクニック

CSS-in-JSはJavaScriptを使用してコンポーネントをスタイルするテクニックです。
Reactには従来のCSSに加えて、スタイリングのオプションとして、インラインスタイルとCSS-in-JSがあります。

CSS-in-JSを実装するライブラリでできる5つの便利なテクニックを紹介します。

サイトのキャプチャ

5 things you can do in CSS-in-JS that you didn’t know about
originally published at LogRocket

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

Reactには従来のCSSに加えて、スタイリングのオプションとして、インラインスタイルとCSS-in-JSがあります。

インラインスタイルでは、JavaScriptオブジェクトをstyle属性に渡すことができます。

しかしながら、CSSのすべての機能がサポートされているわけではありません。

そして、CSS-in-JSはJavaScriptを使用してコンポーネントをスタイルするテクニックです。JavaScriptが解析されると、CSSが生成され(通常は<style>要素として)、DOMに付加されます。

この機能はサードパーティのライブラリによって実装されています。例えば、Aphroditeで実装された例を見てましょう。

私が推奨するライブラリは、下記の通りです。

CSS-in-JSを私は全面的に支持しているわけではありませんが、これらのライブラリは特定の状況で役立つ機能をサポートしてます。

この記事では、CSS-in-JSのあなたが知らなかったと思われる上記のライブラリでできる5つのテクニックについて説明します。

1. 他のスタイル付きコンポーネントを参照

Styled-Componentsemotionのようなライブラリでは、ES6 Tagged Template Literalsを使ってスタイルからReactコンポーネントを作成することができます。

ただし、CSSセレクタを使用していた場合など、他のスタイル付きコンポーネントをターゲットにすることもできます。

これは例えば、ホバー時にコンポーネントのカラーを変更するなど、擬似クラスを組み合わせる場合に便利です。

2. ライブラリの機能をJSSで拡張

Aphroditeを使ってアプリケーションのスタイルを設定し、テーマをサポートする必要があるとします。ここで問題になるのは、Aphroditeが簡単な方法でテーマをサポートしていないということです。少なくとも、emotionほど、簡単ではありません。

しかしながら、JSSのコアとAphroditeとのスタイル付きコンポーネントをつなぐ2つのプロジェクトがあります、aphrodite-jssstyled-jssです。

この方法でAphrodite(またはスタイル付きコンポーネント)の優れた部分はそのままで、すべての機能とJSSのプラグインキャッシュ(cache)から隔離(isolate)まで、そしてテーマ用に、テーマのパッケージなど、優れたコンポーネントを提供できます。

  • ThemeProvider
    テーマオブジェクトをReactツリーに渡します。
  • withTheme
    テーマオブジェクトとアップデートをプロパティとして受け取ることができます。

以下、例です。

Aphroditeとテーマの特別なケースではもう一つの例として、スタイルを定義するときにテーマ情報にアクセスするために、AphroditeJSSなどと相互に作用するreact-with-stylesを使用することもできます。

3. 複数のアニメーションをキーフレームで連結

インラインスタイルとは異なり、CSS-in-JSではキーフレームを使用してアニメーションを定義できます。スタイル付きコンポーネントでどのように実装できるか見てましょう。

あまり知られていないのは、アニメーションのプロパティで複数のキーフレームオブジェクトを使用して複数のアニメーションを連結できることです。

この例では、2つのアニメーションを組み合わせています。

RadiumはanimationNameプロパティの値としてキーフレームオブジェクトの配列を渡すことによって、複数のアニメーションをサポートするもう一つのライブラリです。

4. グローバルスタイルを宣言

CSSのすべてはグローバルであり、CSS-in-JSを使用する目的の1つは、グローバルスタイルの定義を取り除くことです。ただし、ページ内のすべての要素に同じフォントスタイルを適用する場合など、グローバルスタイルを有効に使用することもできます。

もちろん、従来のCSSをいつでもWebpackでインポートしたり、index.htmlファイルで宣言したりすることもできます。

しかし、すべてのスタイルにJavaScriptを使用することを検討するなら、コンポーネントや拡張機能・プラグインを使ってグローバルスタイルを定義できるライブラリがあります。Radiumでは、Style Componentを使用して、スタイルされた要素をグローバルスタイルでレンダリングできます。
例を見てましょう。

上記のコードは、下記を返します。

JSSではプラグインを使用して、グローバルスタイルを定義します。

また、Aphroditeではサードパーティの拡張機能を使用します。

あるいは、AphroditeのAPIのような機能を備えたaphrodite-jssというJSSのプラグインを使用します。

5. スタイルによるコンポーネントのテスト

一部のライブラリには、スタイルでコンポーネントをテストするためのユーティリティが含まれています.

Aphroditeは、非生産の環境(process.env.NODE_ENV !== 'production')でのみ利用可能で、3つのメソッドを持っていますが、ドキュメント化されていない(少なくともこの執筆時点で)オブジェクトStyleSheetTestUtilsを提供しています。

  • suppressStyleInjection
    DOMにスタイルが挿入されるのを防ぎます。DOMを持たないときに、Aphroditeコンポーネントの出力をテストしたいときに便利です。
  • clearBufferAndResumeStyleInjection
    suppressStyleInjectionとは逆で、ペアにする必要があります。
  • getBufferedStyles
    バッファリングされたスタイルの文字列を返します。

これらをどのように使用するのか、見てましょう。

RadiumだとTestModeがあり、clearState, enable, disableなどのメソッドを使用してテスト中の内部状態や動作を制御できます。
実際のコードは、media-query-test.jsで見つけることができます。

まとめ

CSS-in-JSは、JavaScriptを使ってアプリケーションをスタイルするためのテクニックであり、それを実装するライブラリでいろいろな面白いことができます。この記事では、これらのライブラリを使ってできることを5つ紹介しました。

もちろん、すべてのライブラリで可能ということではなく、特定のライブラリだけ可能というものもあります。

CSS-in-JSのライブラリをテストして、比較するには下記のサイトが便利です。

サイトのキャプチャ

CSS in JS Playground

逆に、CSSやJavaScriptのコンセプトを深めるライブラリもあります。
そのうちの一つはStylableで、コンポーネントベースのライブラリです。CSSをクロスブラウザ対応で、最小限のCSSに変換するプリプロセッサを備えています。

最後に、CSS-in-JSの素晴らしいプレゼンテーションを紹介します。

sponsors

top of page

©2018 coliss