【スタイル自由】ヘッドレスUIライブラリの紹介

公開日：2023.08.10 更新日：2023.12.01

こんにちは、株式会社Gizumoでエンジニアをしている田中です。

サービスを開発するときに工数削減のためにMUIやChakraUI等のUIコンポーネントライブラリを使いたいけど、独自のUI要件や変更を考慮すると導入に勇気がいるという事はありませんか？

今回はそんな懸念を解決してくれるヘッドレスUIライブラリについてご紹介します。

前提・対象とする読者
ヘッドレスUIライブラリとは
MyTabsコンポーネントの作成
ヘッドレスUIライブラリのメリット・デメリット
- メリット
- デメリット
ヘッドレスUIライブラリの紹介
参考

前提・対象とする読者

この記事は以下を前提として読み進めてください。

サンプルコードはReactとTypeScriptで記述
環境構築や必要なライブラリすべてについては触れない
例として出すUIコンポーネントライブラリはReactに対して提供されているものを中心としている

また、対象とする読者は以下のような方を想定しています。

UIコンポーネントライブラリ導入を検討中で機能は欲しいけどスタイルは自由に行いたいという希望をお持ちの方
ReactやVue等のJavaScriptのUIフレームワークを知っている方・触ったことがある方

ヘッドレスUIライブラリとは

ヘッドレスUIライブラリとは、スタイルを持たないUIコンポーネントを提供するライブラリです。その代わり、機能とアクセシビリティのみを提供します。そのためライブラリの機能提供に乗っかりながら独自のUIを構築できます。

今回はヘッドレスUIライブラリの1つである、HeadlessUIを使用して実際にコンポーネントを作成しながらヘッドレスUIライブラリの使い方やメリット・デメリットについて見ていきます。HeadlessUIはTailwindCSSの作成元が作っているライブラリで相性が良いためTailwindCSSも同時に使用します。

MyTabsコンポーネントの作成

HeadlessUIが提供してくれるTabというコンポーネントを使用してMyTabsコンポーネントを作成します。MyTabsコンポーネントは最終的に以下のようなUIを持ちます。各タブをクリックすると、対応するコンテンツが表示されます。

最小構成

今回作成するTabコンポーネントの最小構成は以下のコードです。Tabが実際のボタンでそれに応じたコンテンツがTab.Panelです。

import { Tab } from '@headlessui/react';

export const MyTabs = () => {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Tab 1 content</Tab.Panel>
        <Tab.Panel>Tab 2 content</Tab.Panel>
        <Tab.Panel>Tab 3 content</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  );
};