この記事は、Jeremy Keith氏による「Declarative design」の日本語訳です。掲載に当たって著者の許諾を得ています。
ここ数年で、同じようなマインドセットを共有するウェブデザインのアプローチがいくつか現れたように思います。JenのIntrinsic web design、AndyとHeydonのEvery Layout、TrysとJamesのUtopiaです。
FlexboxやGrid、calcのような、CSSという技術独自の機能を活用していることも特色ではあります。しかしそれ以上に重要なのは、アプローチを共有していることです。これらはすべて、適切な「入力」を生み出すことに焦点を当てています。ありとあらゆる「出力」を制御しようとするのではなく。出力のための最終的な計算はブラウザに任せてしまう。それがコンピュータの得意とするところです。
Andyはこう言います。
ブラウザのマイクロマネジャーではなく、メンターになること。
Jim NielsenはUtopiaのアプローチを振り返って、次のように書いています。
CSSは「宣言的」だとは言いますが、ビューポートの範囲全体に渡って、デザインをさまざまな方法で変更するためにブレイクポイントを追加すればするほど、命令的なコードを書いているように感じます。一連の宣言的なルールが命令的な操作に見えてくるのはいつからでしょうか？
これに対してUtopiaの原則の一つは、宣言的であること、つまり「どのようにするかを指示するのではなく、なにをするかを記述すること」です。Utopiaのアプローチでは、任意のビューポート幅における文字サイズとスペーシングを数式で導き出す、というルールを宣言しています。
宣言的！ これこそ、UtopiaとEvery Layout、Intrinsic web designが共有するものを表現できる言葉なのかもしれません。
宣言的デザインがあるのなら、命令的デザインもあるのでしょうか？ それなら、命令的デザインのためのツールや技術はどのようなものでしょうか？
私が思うに、Tailwindは命令的デザインのうまい例です。これは特定の出力をするためだけのものです。システム的な思考は積極的に排除され、代わりに、画面に最終的に表示されるピクセルをどうしたいかを精緻に示すことになります。
Utopiaのような宣言型ツールが正しく、Tailwindのような命令型ツールが間違いだと言っているわけではありません。言うまでもなく、場合によります。それはあなたの考え方次第です。
もしこの意見に賛同するなら、おそらく命令型デザインツールを使うべきでしょう——
CSSは破綻しているので、CSSの性質をツールによって回避したい。
逆にこの意見に賛同するなら、おそらく宣言型デザインツールを使うべきでしょう——
CSSは素晴らしいので、CSSの性質をツールによって増幅したい。
もしあなたが最初の意見に賛同するなら、UtopiaやEvery Layoutのような宣言型ツールを使おうとしたとき、おそらく嫌な思いをするでしょう。たぶん嫌いになるでしょう。そのツールは「悪いもの」だと断定してしまうかもしれません。
同様に、もしあなたが二つ目の意見に賛同するなら、Tailwindのような命令型ツールを使おうとしたとき、おそらく嫌な思いをするでしょう。たぶん嫌いになるでしょう。そのツールは「悪いもの」だと断定してしまうかもしれません。
そのツールの背後にある哲学が、自分の哲学と一致するかどうかにかかっているのです。哲学が一致すれば、そのツールは生産的になり、知性の自転車として機能するでしょう。しかし、ツールの哲学が自分の哲学と一致しなければ、いちいちツールとけんかすることになり、足手まといになるでしょう。
宣言型ツールと命令型ツールの間にこのようなスペクトルが存在することを知っておくと、技術を評価するときに役立ちます。あるウェブデザインツールが売り込まれているときに、それはCSSが破綻していることを前提としているのか、それともCSSは素晴らしいということを前提としているのか、評価することができるのです。
ウェブデザインや開発についての方針も、このスペクトルのどちらに共感するかに関わってくるのではないでしょうか。たとえば、HTMLやCSSのような宣言型言語を学んできた人なら、Intrisic web designが響くかもしれません。しかし、JavaScriptのような命令型言語が得意な人には、Tailwindの方がより理にかなっているかもしれません。
ここでも、どちらが正しいということはありません。考え方とツールとの適正についての話です。
個人的には、宣言的デザインのアプローチは、グローブのように私にフィットしています。JohnのA Dao Of Web DesignやEthanのResponsive Web Designのような、ウェブの木目に沿って作業するという伝統的な流儀を受け継いでいるような気がするのです。
「宣言的デザインシステム（翻訳）」に続きます。