これはかなり気になる！スタイルシートの可能性が広がるReact.jsのCSS版のようなスクリプト -Descartes

Post on:2016年2月23日

Descartesの特徴

DescartesはSassやLessのようなCSSプリプロセッサの良い点を取り入れ、CSSをJSONとして記述するとどうだろうと始めたオープンソースのプロジェクトです。スタイルのセットだけでなく、DOMへのアクセスや基本的なイベントリスナーに対応しています。

Descartesの書式は、SassやLessに似ています。

Descartesの基本スタイル

パフォーマンスの改善: スタイルは全てJavaScriptで記述するため、JavaScriptのパフォーマンスに影響を与えます。
関数と変数の使用: グリッドやカラーなど、再利用したい値や動的にしたい値を関数や変数で設定できます。
他のライブラリとの共存: DescartesはjQueryなどの他のライブラリと共存可能です。; React.jsやAngular.jsやBackbone.jsでは、jQueryとの共存は難しいです。
バックアップ: 他のプリプロセッサと同様に、バックアップ用のCSSを生成できます。

SNOOK.CAでもちょうど、CSSをJavaScript内にいれることについての記事が公開されていました。

You got your CSS in my JavaScript

今まではHTMLとCSSとJavaScriptはそれぞれが分離された状態であるべきというのが人気でした。しかし、最近ではレスポンシブやパララックスなど、デザインを変化させる時にHTMLとCSSの両方を変化させる必要があります。
今まではHTMLとCSSの基本的な構造を変化させる必要がありませんでしたが、最近のコンテンツでは必要とされる場面が増えたということです。

Descartesの使い方

Descartesのセットアップ

当スクリプト「descartes.js」をhead内に、スタイルシートを記述したスクリプト「styles.js」をbodyの最下部に外部ファイルとして記述します。

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="/path/to/descartes.js"></script>
    </head>
    <body>
        <h1>I compute, therefore I am.</h1>
        <script type="text/javascript" src="/path/to/styles.js"></script>
    </body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<h1>I compute, therefore I am.</h1>

</body>

</html>

「styles.js」の中身をいくつか見てましょう

スタイルのツリー構造: Descartesでは、すべてのスタイルを一つのJavaScriptのオブジェクトリテラルに記述することができます。ぱっと見、SassやLessのような書式ですが、JavaScriptの関数や変数が利用できます。

スタイルの詳細度: スタイルの詳細度はツリー構造の深いほど高くなります。同じ要素に同じプロパティで指定した場合は、より高い詳細度を持っている方が適用されます。; h1のカラーに「red」「white」と「blue」の3つを指定していますが、適用されるのは詳細度が高い「blue」です。

Mixins: 同じスタイルを再利用したい時があるでしょう。DescartesはMixinsをサポートしているので、スタイルのツリー構造に再利用可能なセットを挿入することができます。; コードでは「_reset」のリセット、「_font」のフォント指定を使い回しています。

ダイナミックな値: スタイルをJavaScriptで記述するため、プロパティに関数を渡すことができます。DOMへのアクセスもできるので、エレメントのサイズなどを動的に取得することも可能です。

イベントリスナー: イベントを受け取って、ダイナミックな値と組み合わせることは、スタイルの管理レベルの新しい体験となるでしょう。セレクタのために、ルールを再び計算するために、どんなイベントでもバインドすることができます。これはレスポンシブデザインをはじめ、パララックスなどのインタラクション性のあるコンテンツに適しています。