最近、フロントエンドをやっている友人数人と食事をして、話の流れでAIがコードを書くことについて盛り上がった。ある友人は、今はCopilotやCursorを使えば、ものの数分でページ構造をさっと作り上げ、ロジックまで一緒に書いてくれると感慨深げだった。別の友人は、そうだよな、でも他人が書いたCSSやAIが生成したCSSを受け取るたびに、もう頭が痛くなる——インデントは猫に引っかかれたようにぐちゃぐちゃで、スペースが多かったり少なかったりは運次第、時には1行に何百文字も書かれていて、色の値を探すのにCtrl+Fで何度も検索しなきゃいけない、と続けた。
この話にはものすごく共感する。AIは確かにコードを書くスピードをかなり速くしたが、CSSの部分では、むしろよく混乱を持ち込んでくる。なぜか？AIがCSSを生成するとき、それは「動くかどうか」しか気にしておらず、あなたが後でどうメンテナンスするかなど全く気にしていないからだ。レスポンシブレイアウトを書かせれば、メディアクエリは出してくれるが、セレクタのネスト、プロパティの順序、改行やインデントは、その時の気分次第だ。結果として、プロジェクトにコピペすると、コードスタイルがチームの規約と全く合わず、コードレビューで同僚に散々突っ込まれることになる。
こうなると、自分で後始末をするしかない。以前は手動で調整してみたこともあった。1行ずつインデントを直し、余分なスペースを削除し、圧縮されたコードを展開し、散らばったコードをまとめた。30分もやると目が回り、うっかりプロパティ値を1つ間違えてページが完全に崩れたこともあった。その後学習して、直接ツールを使うようになった。
CSSのフォーマットと圧縮は、一見同じことのように思えるが、実は2つの方向性がある。フォーマットは、圧縮されて一塊になったコードを再展開し、適切なインデントと改行を加えて、人が読めるようにするものだ。圧縮はその逆で、削除できるスペース、改行、コメントをすべて取り除き、ファイルサイズをできるだけ小さくして読み込みを速くする。この2つの操作を手動でやるのは、自分をいじめるようなものだ。
今使っているのはオンラインのCSSフォーマット・圧縮ツールで、ソフトをインストールする必要もなく、Webページを開いてコードを貼り付け、ボタンを1回押すだけ。左側が元のコード、右側が処理結果だ。フォーマットしたいならフォーマットモードを選べば、コードを自動的にきれいに整えてくれ、セレクタの間に1行空き、プロパティの前に2スペースのインデント、コロンの後にスペースが入り、見た目が気持ちいい。圧縮したいなら圧縮モードに切り替えれば、コメントを削除し、改行を削除し、余分なスペースを消し、最後に紧凑な1行のコードを返してくれるので、そのまま本番環境に投入しても問題ない。
肝心なのは、これが好き嫌いしないことだ。AIからコピーしたコードがどんなに乱れていても、きちんと整理してくれる。GitHubから拾ってきたオープンソースプロジェクトのCSSはスタイルが千差万別で、あるものはTab、あるものはスペース、あるものはプロパティの順序がめちゃくちゃだが、放り込んで一度通せば、出てくるのは統一されたスタイルで、どれだけ手間が省けるか分からない。
エディタに標準でフォーマット機能があるだろうと言う人もいるかもしれない。確かに、VS CodeにはPrettierがあり、WebStormにも内蔵されている。しかし問題は、誰もが環境を整えているわけではなく、他人のパソコンで一時的に何かを修正したり、オンラインIDEでコードを書いたりするときには、それほど便利ではないことだ。しかもPrettierの設定はなかなか面倒で、プロジェクトごとに異なり、下手をするとフォーマット後にエラーが出ることもある。オンラインツールにはそんな面倒はなく、開いてすぐ使え、使い終わったら閉じるだけだ。
もう1つ、AIがコードを書くのがどんどん速くなるということは、他人のコードを受け取る機会もどんどん増えるということだ。以前は1つのプロジェクトを数人で書くこともあったが、今はAIが参加することでコードスタイルはさらに制御不能になる。そんなとき、手軽なフォーマット・圧縮ツールは、台所の洗い桶のようなもので、地味に見えるが、それがないと本当に困る。
結局のところ、AIはあなたの仕事を手伝うもので、部屋の片付けを手伝うものではない。機能は書いてくれるが、コードをきれいに保つことは、自分自身が気を配るしかない。ぐちゃぐちゃなCSSと格闘する時間を費やすより、信頼できるツールを見つけて数秒で片付けたほうがいい。浮いた時間でコーヒーを飲むか、コンポーネントをもう2つ書くほうが、よくないか？