【Node.js】daisyUI の最も簡単な始め方

# 完成イメージ

|     |
| :-: |
| ![スクリーンショット 2024-06-17 11.27.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/6df5bb33-0d3e-eeeb-3047-f1f866aff89a.png)|
| daisyUIを導入し、簡単にスタイルを整えることができる  |
# この記事について

https://qiita.com/kohki_takatama/items/36712702f115f263f6b4

Node.js・Tailwind CSS の導入はこちらの記事で説明しています。
この記事では、さらにdaisyUIを導入する方法を書いていきます。
前回記事の続きとして、ソースコードも引き続き使用しますが、この記事だけを読んでもわかる内容になっています。

# 環境
|サービス名称|バージョン|種別等|
|---|---|---|
|VSCode|1.90.0|エディタ|
|macOS|14.5|OS|
|Node.js|20.13.1|JavaScript実行環境|
|npm|10.5.2|パッケージ管理|

# 登場技術

|   |   |
|---|---|
|Node.js|JavaScriptの実行環境（プログラミングを解釈し動かすもの）|
|Tailwind CSS|CSS フレームワーク  <br>CSSプロパティを書かずとも、クラス名でstyleを変更・管理することができる|
|daisyUI|Tailwind CSS のライブラリ  <br>ごちゃごちゃしがちなTailwind CSSをすっきり書ける|
|( ejs )|HTMLにJavaScriptコードを埋め込めるようになる  <br>（JavaScriptコードを埋め込まなければただのHTML）  <br>今回は参考記事の都合で使用するが、使わなくてもいい|
# 手順

## 1. daisyUIのインストール

```zsh
% npm install -D daisyui@latest
```

:::note info
コマンドの簡単な説明
- `npm` (**n**ode **p**ackage **m**aneger) を使い、`install`を行う
- `-D`：開発環境でのみ使用するものである
- `daisyui`の最新版（`@latest`）を指定

<details><summary>参考記事</summary>

[ローカルインストール時に -D オプションをつけるべきケース](https://qiita.com/sugurutakahashi12345/items/3cc49926faeaf25d3051#:~:text=%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AB,%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)

> **一般的に、開発環境でしか使用しないパッケージについては `npm install -D <package>` として、そうではないパッケージについては `npm install <package>` とします。**

> パッケージ名の引数をとらない `npm install` には `--production` とオプションをつけることで、`npm install -D <package>` でインストールしたパッケージを除いて node_modules にインストールすることができます。

</details>
:::

## 2. tailwindの設定ファイルを変更

`tailwind.config.js`を変更します。

### 差分
```diff_javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
+ import daisyui from 'daisyui';

module.exports = {
  content: ['./src/*.{html,js,ejs}', './views/*.{html,js,ejs}'],
  theme: {
    extend: {},
  },
- plugins: [],
+ plugins: [daisyui],
};
```

<details><summary>コピペしたい方はこちら</summary>

```js:tailwind.config.js
/** @type {import('tailwindcss').Config} */
import daisyui from 'daisyui';
module.exports = {
  content: ['./src/*.{html,js}', './public/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [daisyui],
};
```
</details>

## 3. サンプルを挿入し、動作確認

前回記事で作成した`hello.ejs`に、daisyUIのCSSクラスを使用したサンプルを追加します。
今回は、最もシンプルな`btn`クラスを使用したボタンを追加します。

https://daisyui.com/components/button/

### 差分
```diff_html
<link rel="stylesheet" href="views/styles.css" />

<div class="pt-6 space-y-4 bg-slate-100 rounded-xl p-8 dark:bg-slate-800 m-6">
  <p class="text-lg">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
</div>

+ <button class="btn">Button</button>
```
[localhost:3000](localhost:3000)にアクセスし、以下のような表示になればOKです！

### 成功例
![スクリーンショット 2024-06-17 11.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/7aa6a382-8227-eb08-ac1b-ec5d7e4f4da0.png)

### 失敗例
![スクリーンショット 2024-06-17 11.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/668874d8-dc45-0d66-c402-21d123df3b12.png)

daisyUIの導入に失敗したか、クラス名が間違っているとこのような表示になります。

以下のGithubリポジトリとの違いを確認してください。

https://github.com/Kohki-Takatama/daisyui_playground/tree/setup_daisyui


# ステップアップ

https://daisyui.com/components/

daisyUI公式に、daisyUIでできること一覧が載っています。
1時間もかからず見られる量なので、一読をオススメします。
サンプルコードも載っているので、コピペするだけ🙆‍♂️

## 例
![スクリーンショット 2024-06-17 11.27.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d682fd8f-3c80-6758-fc4a-029f4c3f14c3.png)
<details><summary>ソースコード</summary>

```html
<link rel="stylesheet" href="views/styles.css" />

<div class="pt-6 space-y-4 bg-slate-100 rounded-xl p-8 dark:bg-slate-800 m-6">
  <p class="text-lg">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
</div>

<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>

<div class="overflow-x-auto">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Job</th>
        <th>Favorite Color</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Cy Ganderton</td>
        <td>Quality Control Specialist</td>
        <td>Blue</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>Hart Hagerty</td>
        <td>Desktop Support Technician</td>
        <td>Purple</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Brice Swyre</td>
        <td>Tax Accountant</td>
        <td>Red</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="flex justify-center gap-1 my-1 w-full">
  <kbd class="kbd">q</kbd>
  <kbd class="kbd">w</kbd>
  <kbd class="kbd">e</kbd>
  <kbd class="kbd">r</kbd>
  <kbd class="kbd">t</kbd>
  <kbd class="kbd">y</kbd>
  <kbd class="kbd">u</kbd>
  <kbd class="kbd">i</kbd>
  <kbd class="kbd">o</kbd>
  <kbd class="kbd">p</kbd>
</div> 
<div class="flex justify-center gap-1 my-1 w-full">
  <kbd class="kbd">a</kbd>
  <kbd class="kbd">s</kbd>
  <kbd class="kbd">d</kbd>
  <kbd class="kbd">f</kbd>
  <kbd class="kbd">g</kbd>
  <kbd class="kbd">h</kbd>
  <kbd class="kbd">j</kbd>
  <kbd class="kbd">k</kbd>
  <kbd class="kbd">l</kbd>
</div> 
<div class="flex justify-center gap-1 my-1 w-full">
  <kbd class="kbd">z</kbd>
  <kbd class="kbd">x</kbd>
  <kbd class="kbd">c</kbd>
  <kbd class="kbd">v</kbd>
  <kbd class="kbd">b</kbd>
  <kbd class="kbd">n</kbd>
  <kbd class="kbd">m</kbd>
  <kbd class="kbd">/</kbd>
</div>
```
</details>

# おわりに


<font color="red">やってみての感想、ストック、いいね、大歓迎です！</font>

<font color='grey'>マサカリも受け付けてます_(´ཀ`」 ∠)_</font>