フロントエンドとヘッドレス

このブログを更新していない間に息子が爆誕し、気づけば 2 yoになってました。どうも、歌丸です。（歌丸ではない）

ヘッドレスという言葉を聞いて、皆さんは何を思い浮かべますか？ 私はドラクエに登場するデュラハーンというモンスターを思い出します。

ヘッドレスとは

アプリケーションインターフェース（API）とユーザーインターフェース（UI）のうち、Web 業界ではユーザーインターフェースが提供されていないモノをヘッドレス○○と呼んでいるように見えます。ヘッドレスという言葉自体は昔から使われてますが、その利用シーンが更に増してきた感じ。

有名どころで言えば WordPress のヘッドレスモードは上記に当てはまり、ヘッドレスモードでは親の顔より見た WordPress の記事一覧画面が提供されず管理画面とコンテンツの API のみが提供されます。管理画面もユーザーインターフェースに入ると思いますが、それでもヘッドレスと呼ばれていますね。

コンテンツマネジメントシステム（CMS）はヘッドレスと相性が良く、国内だと microCMS や Newt がヘッドレスCMSとしてサービスを提供しています。国外だと Contentful が有名ですね。

ユーザーインターフェースを持たないものをヘッドレスと呼ぶように思えますが、キャラクターユーザーインターフェース（CUI）やコマンドラインインターフェース（CLI）があっても一般的にヘッドレスと呼ばれます。ヘッドレスブラウザとか。 このあたりの線引きはかなり曖昧で、不完全なユーザーインターフェースを提供しているものをヘッドレスと呼んでいるようですね。

ヘッドレスの愉快な仲間たち

ヘッドレス CMS 以外にもさまざまなヘッドレスなモノがります。

ヘッドレスブラウザ

一昔前は PhantomJS が覇権を握っていたヘッドレスブラウザですが、ここ数年はヘッドレス Chrome の一強ですね。 PhantomJS と Selenium で行っていたブラウザテストの自動化も、今ではヘッドレス Chrome と Praywright になりました。

少し前に Praywright を触った時は少し不具合多かった印象。Puppetter もまだ現役ですね。

ヘッドレスUIフレームワーク

RadixUI や HeadlessUI が有名どころですね。HeadlessUI は TailwindCSS を開発している Tailwind Labs が開発を行なっているため、TailwindCSS を利用してるならば、まず候補にあがるでしょう。

HeadlessUI はラインナップが少々貧弱なため、特に拘りがなければ RadixUI がヘッドレスUIフレームワークとしてちょうどいいと感じています。ChakraUI もメジャーどころではありますが、私はアンチなので多く語りません。

RadixUI と TailwindCSS の組み合わせは shadcn/ui として提供されており、今もっともアチアチなUIフレームワークになっています。（当社調べ）

ヘッドレスUIライブラリ

UIフレームワークの中で提供されつつも、その一部に特化したライブラリがたくさんあります。 例えば、ヘッドレス WYSIWYG エディタとして Tiptap が有名ですね。リッチエディタを一度実装したことがある人はわかると思いますが、既製品だとなかなかインターフェースを変えづらかったり、かといってスクラッチで実装するのもデビルフランケン並みにライフポイントを消費します。

他にも、グリッド（テーブル）を構築するための Grid.js などがありますね。

ヘッドレスがもたらすもの

人類は、なぜヘッドレスを求めているのでしょうか。

もっともメジャーな旨みとしては、エンジニアリング・デザインの工数を生贄に捧げて、素晴らしく自由度の高いインターフェースを構築できるようになりますね。特にヘッドレスUIフレームワークがその最たる例です。

フロントエンド開発において、ユーザーインターフェースのインフレ（？）が激しくなっており「よりよいインターフェースとは何か」という飽くなき課題が日々解決に向かっていると感じます。

ヘッドレスなフレームワークやライブラリが発展することは人類にとっての進歩だと感じる一方で、フロントエンド開発という領域への参入ハードルが高くなっていくと個人的には懸念してます。 昔あったような「とりあえず Twitter が提供している Bootstrap でデコればよくね？」みたいなギャルマインドが淘汰されるんじゃないかと心配してます。

「プロダクトを作りましょう！ユーザーインターフェースはリッチにしたいのでフレームワークに RadixUI を使って、スタイリングは TailwindCSS。ユーザーがテキストを入力するフォームもあるから、そこは Tiptap を使おう。」ってなったら、それだけでお腹いっぱいじゃないですか。

おまけに、 Next.js（React.js）、 TypeScript や Linter の知識も求められ、その全てに精通してやっと一人前の開発ができるという魔境。こんな世界、誰が望んだって言うんですか？（170828-29）

それでもヘッドレスはいいよ

結局は何を大事にするかという話なので、ヘッドレスが良い・悪いはなく、その時々において最良の選択を取ろうをという話ですね。

私はヘッドレスが大好きなので、時間が許すのであればヘッドレス派です。だって使ってて楽しいですから！ そろそろヘッドレスという言葉がゲシュタルト崩壊してきたので、さようなら。