WEB+DB PRESS Vol.133に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました #wdpress

後日追記: 寄稿した特集がgihyo.jpにて全章無料公開されました。

Tailwind CSS実践入門 ～まず作ってから、あとで共通化する 記事一覧 | gihyo.jp

2023年2月24日発売の「WEB+DB PRESS Vol.133」に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました。

この特集では、すでにCSSの基本的な使い方は身につけているけどTailwind CSSについては知らない人、これから使ってみたい人、あるいはCSSの設計について改めて考えてみたいという人に向けて、その意義や使い方を解説しています。なぜTailwind CSSなのか、なぜTailwind CSSでなければならないかを解き明かすべく、ユーティリティファーストというTailwind CSSのコンセプトを中心に据えて、「まず作ってから、あとで共通化する」という考え方を掘り下げて書いています。

構成は次のようになっています。

まず第1章では基礎編として、Tailwind CSSを使うことのメリットや、ユーティリティファーストという基本的なコンセプト、従来のやり方の問題を解説します。第2章ではより具体的に、開発環境へのインストール方法、設定ファイルの記述方法、エディタの設定を紹介します。続いて第3章では、ユーティリティクラスやその修飾子の使い方、カスタムスタイルの実装方法を紹介します。最後に第4章では発展編として、デザインとCSSの関係性や、CSS設計の新しいあり方を考察します。

少し前に、ブログ「CSS設計における、すべてがコンポーネントであるという誤謬」を書きましたが、それはこの特集のプロトタイピングのためでした。CSS設計について僕が抱いている問題意識をまとめたつもりでしたが、ブログに対するさまざまな反応を見るに、言いたいことはあまりよく伝わっていないようでした。

そこでこの特集においては、その問題意識をもとにしつつ、必要となる前提知識からしっかりとていねいに説明したり、議論の幅を広げたりしながら、要点やその伝え方を徹底的に整理し直しました。

その結果、Tailwind CSSを使う意味について、ほかにどこにもないような見方で解説する記事ができあがったと思います。

企画の発端は、CSSの特集を書かないかという誘いをいただいたことです。ユーティリティファーストCSSについて書いてほしいという提案もあったので、当時いろいろと考えていたことを整理してまとめることにしました。しかしそれは、僕にとってはけっこうな挑戦でした。問題は、文章の量と、取り扱うテーマの複雑さです。

この特集は全30ページで、最終原稿の文字数はおよそ4万文字です。長らくブログを書いてきてはいるものの、一本のブログがこれだけの分量になることは多くありません。

文章の量や質が変わると、同じような書き方は通用しなくなります。短くて簡単な記事であれば、とりあえず本文を書き進めながら内容を考えていくということができます。書き終わってから気になるところがあっても、また頭に戻って書き直すことを繰り返していればなんとかなります。ところが、量が増えたり、話が複雑になってくると、それだけでは収拾がつかなくなってきます。要するに、本文を書きながら考えているだけでは、頭の中で話が整理しきれないのです。

僕は基本的に、1テーマ思いつくごとに一本ブログを書くというやり方を取っています。単純に、それが簡単で書きやすいからです。しかしこの特集では、これまで蓄積してきたさまざまな考えを一挙に語る必要がありました。できるだけ網羅的で、抜け目のない議論にすることが重要だと考えたからです。加えて、入門者にも向けた特集である以上、基本的な使い方についてもカバーしなければいけません。そのため、それらをいかにして一つのつながりのある文章として成立させるかが難しいところでした。

Tailwind CSSについて語るには、いくつもの論点があります。普段であれば、そういったものは箇条書きにしたりアウトライナーに書き出したりして、自分の頭の中を整理しています。執筆当初もそのように試みましたが、今回はそれがうまくいきませんでした。なぜなら、それぞれの論点がかなり複雑にリンクし合っていて、いきなりリニアな構造として形にするには無理があったからです。とりあえず書き出してみることはできても、それはあまり理解の助けになりませんでした。

そこで、今回はHeptabaseというツールを使いました。Heptabaseでは、トピックごとにカードを作って内容を記述し、それらを二次元の座標系に並べることができます。MiroやFigJamにも似ていますが、テキストベースの情報を整理するにはHeptabaseが向いています。

これを使って、頭の中にある考えを一つ一つアウトプットしました。

小さく表示されたカードが情報の関連性ごとに近接して配置されている。カード同士が線で繋がれたりもしている

思考の断片をこのように可視化することで、自分の考えの全貌が少しずつ見えてきました。頭の中から一度に取り出せる情報はごく限られていますが、少しずつ外部化していくことによって、全体のつながりが明らかになってきました。

そして、これらをもとにして記事の構成案を作成します。目次のようなものです。ここで初めてリニアな構造を意識し始めるわけですが、Heptabaseのおかげで話の種はできており、あとはその並べ方を考えるだけだったので、大きくは苦労せずに済みました。

これは例えるならば、食材を用意することと料理を作ることに似ています。まずはHeptabaseで食材を用意して、用意が終わったあとから構成案という料理を作っているのです。もし食材の用意なしにいきなり料理を作り始めていれば、料理をする片手間で食材の用意もしなければならなくなるため、どちらの仕事も疎かになってしまうでしょう。

とはいえ、実際の作業が手戻りなく進んだかというと、もちろんそういうわけでもありません。実際に本文を書き進めてみてから、当初の構成案ではうまくいかないということがわかり、引き返して手を入れることは何度か行いました。またそれに加えて、Heptabaseにだいたいのことは書き切ったと思っていても、文章の流れに促されて、想定していなかったことを新たに書く必要に迫られる場面も度々ありました。そもそも文章を書くという行為は、事前に予測不可能な発想を創発させるプロセスなのだと思います。それでも、下準備をするのとしないのでは大きな差がありました。

全体としては非常に苦労しました。最初に想定していたよりもずっと長い時間がかかってしまいました。ほかにもこのような仕事をされている方々に対しては頭の下がる思いです。

けれど最終的には、なんとかそれなりのものになりました。CSSについて考える人にとって、この特集がなにかしらのヒントなればうれしく思います。