Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Picostyle - 400バイトの CSS in JS ライブラリ

この投稿は 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 が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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
17
Help us understand the problem. What are the problem?