![devlog [開発部門ブログ]](https://devlog.neton.co.jp/wp-content/uploads/2022/06/logo.png){kind=logo}
目次
記事概要
こんにちは、ネットオン開発Sec.のサイトーさんです。
今回はHeadless UIってどのようなものかまとめてみました。
Headless UI とは
Headless UI とは、ドロップダウンリストやモーダル等のUI要素やボタンクリック時のトランジションなどのインタラクション時のロジックなどのAPIのみを提供し、UIのスタイルやマークアップなどは提供しないライブラリやユーティリティなどのことを意味するらしいです。Headless UIで提供されているものの多くは、ユーザアクセシビリティに考慮した実装がされているものがおおいです。例えば、開いているドロップダウンリストをEscキーで閉じれるようになっていたり、選択肢を上下のキーで移動できたりなど、自作で実装するには手間がかかるものも手軽に利用することができるようです。
メリット・デメリット
Headless UI を利用する上でのメリットとしては、描画ロジックの実装をする必要がなくなるのでビジネスロジックに注力することができたり、プロトタイプとして時間をかけずに画面を作成してみるなど、効率的に成果物を上げたいときなどは使ってみるといいかもしれません。
デメリットとしては、Headless UI の選定が難しいことがあります。Headless UI として提供されているライブラリは多くの機能を持っていますが、実現したい機能ができないということもよくあります。Webサイトで実現したい機能を洗い出し、Headless UI ライブラリで実現可能か調査する必要があります。また、スタイリングをする際には Tailwind CSSなどのスタイリングライブラリを合わせて利用することが多いのでそれらの学習コストも意識する必要があります。
おすすめのHeadless UI
最後に Headless UI のライブラリをいくつか紹介して終わりにしたいと思います。ここで紹介するライブラリは比較的有名なものをまとめたものなので、 Headless UI を利用する際の参考にして頂ければと思います。
Headless UI
Tailwind CSS と同じ Tailwind Labs が作成した Headless UI。コンポーネントは10種類と少なめですが、必要な機能はそろっているので、シンプルなWebサイトを作りたい方にお勧めです。あと、当然かもですがTailwind CSS との相性はよさそうでした。
Radix UI
プログレスバーやナビゲーションメニューなど、モダンなWebシステムで使われている機能などのコンポーネントが充実しています。導入はコンポーネント単位でインストールすることができるので、バンドル時のサイズを抑えることもできます。また、コンポーネントのテーマなども用意されているのでダークテーマなどの実装も簡単にできます。公式サイトにplayground があるので、実際に各コンポーネントの動きなどの確認もすることができます。
React Aria
https://react-spectrum.adobe.com/react-aria/
Adobe が提供しているライブラリで、ユーザインタラクションやスクリーンリーダのサポートやARIA属性などに関する機能が充実しているのでユーザエクスペリエンスを向上させることができます。アクセシビリティのベストプラクティスを手軽に実装できるので、ユーザエクスペリエンスの学習をする際にもこのライブラリは使えるかもしれません。
まとめ
今回はHeadless UI についてまとめてみました。描画ロジックの実装はライブラリに任せることができるので、Reactを初めて使う方やプロトタイプを手軽に作成したい方などはぜひHeadless UI を使うことを検討してみてください！
参考文献
- https://ics.media/entry/230413/
- https://headlessui.com/
- https://www.radix-ui.com/
- https://react-spectrum.adobe.com/react-aria/
