daisyUIの６つの魅力を紹介

はじめに

この記事では、daisyUI魅力を以下の項目で紹介していきます！

• daisyUIとは？
• 6つの魅力
  1. 軽量
  2. 拡張性
  3. 豊富なコンポーネント
  4. テーマ・カラーが利用可能
  5. TailwindCSSの記述の簡略化
  6. 高速な開発体験
• 最後に

daisyUIとは？

daisyUIとは、TailwindCSSをベースに作られたUIライブラリです。また、TailwindCSSにそのまま拡張して使用します。そのため、TailwindCSSを使用している環境で使用します。

環境構築

環境構築は、インストール１回と簡単な記述だけで完了します！
公式ドキュメンント参考はこちらへ

1. インストール

npm i -D daisyui@latest

2.「tailwind.config.ts（もしくは.js））」ファイルに以下のコードを追記する

  plugins: [
    require('daisyui'),
  ],

使い方

使い方に関しては、公式ドキュメントの方がわかりやすいので、そちらを見ることをオススメします！

6つの魅力

1. 軽量

daisyUIは、TaiwindCSSに拡張する形で構築されています。そのため、追加のモジュールやライブラリのインストールが少ないという特徴があります。また、TailwindCSS自体もユーティリティ重視のCSSフレームワークであることから、より軽量に扱えます。
それから、daisyUIはHTML・CSSで動作しており、JavaScriptに依存しません。そのため、DOM操作によるレンダリングの負担を抑え、SEOやアクセシビリティを配慮できます。

2. 拡張性

daisyUIは、TailwindCSSと同じようにクラス属性に記述してコンポーネントを使用します。そのため、他のUIライブラリよりも固定のデザインに縛られにくく、幅や高さ、デザインの変更がしやすく拡張性が高いと言えます。

3. 豊富なコンポーネント

コンポーネントも豊富であり、実用性の高いものからユニークなものまで多く用意されています。ぜひ公式ドキュメントを覗いてみてください。

4.テーマ・カラーが利用可能

実は、daiyUIにはテーマやカラーも用意されており、カスタムテーマの作成も可能です。

i. カラーの種類

既存カラーは20種類あり、ユースケースに応じたそれぞれの色が用意されています。

ii. テーマの種類

既存テーマは32個あり、tailwind.config.js(ts) で以下のように記述すれば、アプリ全体にすぐ反映することができます。また、テーマを使うことによって、ダークモードの切り替え処理も簡単に実装できます。

module.exports = {
  //...
  daisyui: {
    themes: [
    //----- 好きなテーマを１つ記述　---//
    　"light",　
      "dark",
      "cupcake",
      "bumblebee",
      etc ...
    ],
  },
}

iii. カスタムテーマ

また、オリジナルなテーマを作ることもでき、公式サイト内でプレビューを見ながら作成できます。

5. TailwindCSSの記述の簡略化

TailwindCSSには、クラス属性内への記述量が多くなってしまうデメリットがあり、これを嫌うエンジニアも少なくないと思います。そこで、daisyUIを使えば、これまでクラス属性の記述を簡略化し、コードの可用性を上げて、TailwindCSSの欠点を改善できます。

6. 高速な開発体験

ここが一番の魅力だと思っています。
環境構築の段階から、インストール一回と簡単なコード追記だけで済み、スピーディーな環境構築が可能です。
また、使い方も、TailwindCSSと一緒にクラス属性に記述するだけでコンポーネントを使用できるため、他のUIライブラリのように、コンポーネント毎にインポートやインストールをする必要がないため、開発効率が爆上がりします。
それから、公式ドキュメント内で、実際の形や色だけでなく、動作や操作性まで確認することができるため、コンポーネント選びが非常にしやすいです。

最後に

daisyUIの魅力は伝わりましたか？？
もし、魅力が伝わったのであれば、是非、個人開発やハッカソンなどの小規模なアプリケーション開発をする際に使ってみてください！