daisyUIの導入から運用まで

## daisyUIとは

tailwindを導入している環境で使えるオープンソースのUIコンポーネントライブラリです。

[daisyUI公式ドキュメント](https://daisyui.com/)

## 動作を検証した環境

- Vue.js v2.7
- tailwind v2.1.4
- daisyUI v4.4.19

Vueとtailwindが絶妙に古い環境なのはご容赦ください:cry:

## 導入

まずtailwindが入っていない場合はtailwindを導入する必要がありますが、ここでは割愛します

流れとしては大体
1. tailwindをインストール
1. グローバルクラスに使いたいものを記述
1. 必要に応じて設定ファイルを記述

だけなので簡単です。詳しくはこちら（[tailwind公式ドキュメント](https://tailwindcss.com/docs/installation)）

daisyUIの導入方法に関しても正直公式ドキュメントを読めばいいんですが、これも割愛してしまうとこの記事を書いてる意味を見失ってしまうので解説しておきます

```sh
npm i -D daisyui@latest
```

↑のコマンドを叩いてインストールします。バージョンを指定したい場合は`latest`部分を適宜読み替えてください。
使えるバージョンの一覧はdaisyUIの[公式github](https://github.com/saadeghi/daisyui/releases)にありますのでご参考までに:relaxed:

その後、tailwindの設定ファイルにプラグインとして追記する必要があります。

```js:tailwind.config.js
module.exports = {
  //...
  plugins: [require("daisyui")],
}
```

これで導入は以上になります。簡単だね:kissing_heart:

## 使用例（基本）

daisyUIではコンポーネントクラスが用意されており、それを要素に付与することでコンポーネントを使用することができます。

```vue:sample.vue
<template>
    <button class="btn">ボタン</button>
</template>
```

[daisyUIのコンポーネント一覧](https://daisyui.com/components/button/)

過去に実務経験があるUIコンポーネントライブラリとして[Vuetify](https://v2.vuetifyjs.com/ja/)や[BootstrapVue](https://bootstrap-vue.org/)などがあるのですが、それらはコンポーネント用のhtml要素が用意されていたので、daisyUIは使用感がかなり異なりました。

もちろんこのままでも十分実用できますが、後々の運用に（僕の腕とキーボードが）耐えられるように、ページ内で直接daisyUIを多用するのではなく、コンポーネントとして切り出して運用するのが良いかと思います。
（特にstorybookなどによるコンポーネント管理をしているプロジェクトならオススメ）

```vue:Button.vue
<!--- こんな感じでコンポーネントを切り出して、実際のページなどではこのコンポーネントを使う --->
<template>
    <button class="btn">
        <slot />
    </button>
</template>
```

また、各コンポーネントにはカラーやサイズにある程度のバリエーションが用意されています。先ほど例に示したボタンの場合だと、

```vue:ButtonList.vue
<template>
    <!--- サイズのバリエーション --->
    <button class="btn btn-lg">Large</button>
    <button class="btn">Normal</button>
    <button class="btn btn-sm">Small</button>
    <button class="btn btn-xs">Tiny</button>

    <!--- カラーバリエーション --->
    <button class="btn">Button</button>
    <button class="btn btn-neutral">Neutral</button>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-accent">Accent</button>
    <button class="btn btn-ghost">Ghost</button>
    <button class="btn btn-link">Link</button>

    <!--- その他 --->
    <button class="btn btn-outline">Outline</button>
    <button class="btn glass">Glass button</button>
</template>
```

といったバリエーションがあったりします。
他にも公式ドキュメントではコード付きで解説されていますので、詳細に知りたい方はそちらをご参照ください（丸投げ）

## 使用例（応用）

ここからは、実務で運用するにあたって個人的に便利な設定などを解説していきます。

### カスタムカラー

先ほどカラーバリエーションを示しましたが、それらはすべてdaisyUIが用意したブランドカラーになっています。
ですがもちろん各々プロジェクトごとのブランドカラーがあると思いますので、このままでは「カラーバリエーション意味ないやん」という事態になりかねません。

安心してください、ちゃんと色変えられます。

```js:tailwind.config.js
module.exports = {
  //...
  plugins: [require("daisyui")],
  // 以下を追記
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
          // 既存のブランドカラーを上書きできる
          primary: "#FFFFFF",
          secondary: "#FFFFFF",
          success: "#FFFFFF",
          error: "#FFFFFF",
        },
      },
    ],
  },
}
```

こんな感じで、既存のカラーに対して上書きすることができます。

今回の例の場合、前項で示したような

```vue:ButtonListCustom.vue
<template>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Accent</button>
    <button class="btn btn-error">Ghost</button>
</template>
```

が全部白背景のボタンになります（それ以外の文字色やフォーカス時の背景色などはdaisyUIが自動で生成してくれます）。

また、公式ドキュメントに記載の[カラーリスト](https://daisyui.com/docs/colors/#-2)に載っているものはすべてここで上書き可能となっています！便利！:yum:

ただボタンのような状態変化があるUIの場合、フォーカス時などの色をdaisyUIが生成する関係で意図しない色になる場合があるので、状態変化があるUIはおとなしくグローバルクラスでクラスごと上書きしてしまった方がいいと思います:cry:

```css:tailwind.css
/* daisyUIコンポーネント 上書き */
/* btn fill */
.btn {
  @apply h-auto border-0 bg-white bg-opacity-100 text-white
}
.btn.btn-neutral {
  @apply bg-white text-white;
}
.btn.btn-primary {
  @apply bg-white text-white;
}
.btn.btn-secondary {
  @apply bg-white text-white;
}
/* ~~~~~~~~~省略~~~~~~~~~~ */
.btn.btn-warning {
  @apply bg-white text-white;
}
.btn.btn-error {
  @apply bg-white text-white;
}
```

※↑のクラスは適当なものになってますが、こんな感じで`@apply`を使ってtailwindのクラスで上書きすることができます

## プレフィックス

ここまで読んで気づいた方も多いかもしれませんが、daisyUIのコンポーネントクラスはかなり汎用的な名前になっています（btn, modal, dropdown...etc）

ここまで汎用的だと、プロジェクトによっては既存のクラスとバッティングしてしまうケースは大いにありえると思います。

そこで、daisyUIにはクラス名にプレフィックスを付与する設定があります。

```js:tailwind.config.js
module.exports = {
  //...
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],

          primary: "#FFFFFF",
          secondary: "#FFFFFF",
          success: "#FFFFFF",
          error: "#FFFFFF",
        },
      },
    ],
    // 以下を追記
    prefix: "daisy-"
  },
}
```

例えば↑の例の場合、daisyUIのクラス名が`daisy-btn`, `daisy-dropdown`といったプレフィックス付きの形になります（カラークラスは対象外）。
プロジェクトに導入してみたはいいもののクラス名のバッティングが起きてしまったという方はこちらの設定を試してみてください。

## まとめ

まだまだ伝え足りていない部分もあるかもしれないですが、一通りdaisyUIに関して解説させていただきました。
この記事を読んでくれた方の開発の一助になれば幸いです。それでは:wave: