この投稿は Increments Advent Calendar 2017 の13日目の記事です。Picostyle という CSS in JS ライブラリを自作しているので、その説明と作った理由について述べます。
CSS in JS
今更語る必要はないと思いますが、CSS はとにかく言語仕様が貧弱でメンテナンス性が乏しい言語です。また、アプリケーションの状態に合わせて GUI が変化するような実装をする際は JavaScript を利用する必要があり、CSS と JavaScript 間でその値を共有したいことがあります。
これらの問題を解決するために、JavaScript コード内にスタイルに関する記述を含めてしまおうというアプローチが CSS in JS です。Facebook の Christopher Chedeau というエンジニアが「React: CSS in JS」という、発表で CSS の抱える問題は React の Inline Styles を使って解決できると述べたことが事の発端です。
既存の CSS in JS ツール
以下のライブラリが、既存のものとして有名です。
- styled-components
- gramorous
- emotion
-
CSS Modules
- 厳密にはこれは違うかもしれない
これらのライブラリについては説明しません。styled-components が2017年末でおそらく最も広く利用されており、個人的にもおすすめです。
Picostyle
ここからが拙作の Picostyle についての説明です。Picostyle は Hyperapp という 1KB の JavaScript フレームワークのための CSS in JS ライブラリです。Hyperapp は Increments の同僚の @JorgeBucaran が作っています :)
Picostyle のコンセプトは「シンプルで軽量であること」です。Picostyle のコードサイズは Gzip 圧縮時でたった 0.4KB と、数ある CSS in JS ツールの中で最軽量です。Hyperapp と合わせても 1.5 KB ほどしかありません。
使い方
まずは完全なコード例から
See the Pen picostyle example with hyperapp by Masaaki Morishita (@morishitter) on CodePen.
Picostyle は Hyperapp の h 関数を受け取り、要素名を受け取って JS オブジェクト形式の CSS の宣言を受け取り、加工した h を返す関数です、と書くとややこしいですが、使い方は上記の例を見れば分かると思います。styled-components とほとんど同じです。
なぜ作ったのか
Picostyle は革新的に便利なもので世界中の人たちに使ってほしい！と言った気持ちはあまりなく、概念実証のために作りました。僕は CSS in JS というアプローチにずっと懐疑的で、既存のツールを利用し、実装を読み、オリジナルな再実装をすることで理解を深め、より正確な評価ができると思いました。
「ウェブアプリの UI を実装する最適解は何か」という理想について考えてみる。今自分が使っている技術、道具は自分にとって一体どういう存在なのか、ということに考えが及ぶと良い。そして、時にはその技術の思想さえも疑い、より良いものを生み出したい。このようなことを考えて Picostyle は作られました。
ということは微塵も考えてなくて、Hyperapp が流行りつつあるから俺もこのビッグウェーブに乗っておくか、くらいの気持ちで作りました :D