Zenn
Open5

CodePenでReact, Tailwind(daisyUI)を利用する

React
Tailwind CSS
codepen
daisyUI
shuyin02shuyin02

1. Reactを利用する

1-1. JavaScriptPreprocessorの設定


画面のようにBabelに設定

<img src="https://storage.googleapis.com/zenn-user-upload/fc69aa8825f2-20240508.png" width="50%" />

1-2. AddPackagesからReact, react-domをimport

Add External Scripts/Pens ではないので注意（なぜかReactDOM18.31が上手く読み込めないため）


reactと打ち込んで出てくるreactを選択


react-domと打ち込んで出てくるreact-domを選択

成功するとJS(Babel)と書かれた欄に

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

のような記述がされる（別に直接書いてもいい）

1-3. HTML, JS(Babel)の設定

以下のコードをコピペしてHTML, JSの欄に貼り付け

HTML
<div id="app">
</div>

謎のclassNameが書かれているが一旦気にしない

JS(Babel)
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

const Counter = () => {
  const [count, setCount] = React.useState(0);
  const countUp = () => {
    setCount(current => current + 1);
  };
  const countDown = () => {
    if (count > 0 ) { setCount(current => current - 1); }      
  };
  const countReset = () => {
    setCount(0);
  }
  return (
    <div className="flex flex-col justify-center p-4 w-64">
      <div className="my-2 flex justify-between">
        <div className="join">
          <button
           className="btn join-item"
           onClick={countUp}
          >
            +
          </button>
          <button
           className="btn join-item"
           onClick={countDown}
          >
            -
          </button>
        </div>
        <button
         className="btn"
         onClick={countReset}
        >
          reset
        </button>
      </div>
      <div className="stats shadow my-2">
        <div className="stat">
          <div className="stat-title">Counter</div>
          <div className="stat-value">{count}</div>
          <div className="stat-desc">click these buttons</div>
        </div>
      </div>
    </div>
  )
}

const container = document.querySelector('#app');
const root = ReactDOM.createRoot(container);
root.render(<Counter />);

1-4. 成功例


こんな感じのシンプルなカウンターが作成できれば成功

shuyin02shuyin02

2. TailwindとdaisyUIを利用する

見た目を整える上でUIコンポーネント使いたい。
今回はTailwindCSSとも併用できて簡単そうなdaisyUIを利用。

2-1. CDNライブラリのインポート

CSSのタブを選択してインポートしていく

虫眼鏡マークの付いた入力欄の下にある入力欄に次のURLを其々両方張り付ける


虫眼鏡の下欄に次のURLを其々貼り付け

daisyUI
https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.11.1/full.css
TailwindCSS
https://cdn.jsdelivr.net/npm/tailwindcss@0.1.3/dist/tailwind.min.css

2-1-1. 補足

daisyUIは検索で出てくるがtailwindは出てこない。JSの方で検索すると出てくるもののJS側でインポートしてもPostCSSを入れてくれと言われたり（入れても動かなかった）本番環境でCDN使うなと言われたり散々だったので、実際にtailwindをCodePen上で動かしている方のCDNを利用した


daisyUIは検索で出てくる

2-1-2. tailwindを利用しているpenの例

https://codepen.io/akemrir/pen/bGbQLZr?editors=1000

https://codepen.io/iamwillie/pen/bGVVeeW?editors=1000

2-2. 成功例

少し見た目が変われば成功


daisyUIのbutton, join, statsを利用し、配置はtailwindで調整

2-3. 更なる補足

materialUI使っている例も発見

https://codepen.io/BurmesePotato/pen/poBXPMx

shuyin02shuyin02

3. daisyUI 雑感

そもそもプロトタイプとしてwebを選択する際にUIコンポーネントを使わないことがほぼありえない。（ほぼというのは本当に小規模であればGPTにCSS書かせた方が早いから。とはいえそのレベルでのプロトタイプだと多分LINE BotとかAppSheetで十分というかその方がよいまであるので、WebアプリケーションをJS書いて記述する以上、UIコンポーネントは必須かな）

UIコンポーネントはそれっぽい見た目を素早く整えつつ、アコーディオンとかカルーセルとかモーダルとか実装しだすと面倒な機能も用意されてるのが良い。

UIコンポーネントをclassNameで指定できるのでtailwindと相性よい
bootstrapと比較するとdaisyUIはtailwindベースなところが慣れもあるけど良い感じ
UIコンポーネント + tailwindでのレイアウトという考えだとShadcn/UIがあるけどCodePenだと（多分）使えないし

ただ、本当にコピペで再現してもらうのであれば、CSSも渡してコピペの方がはやい
でもいざ自分で作ってみたいと思ったときにCSSを調整するの難しいしね・・・
tailwindのが簡単だと思う。好みもあるかもしれないけど

自分では使わないだろうけどCodePenで動くレベルのSPAであればdaisyUIは選択肢に入りそう

shuyin02shuyin02

4. CodePenでReactを使うことの是非

写真にあるように

  • コンポーネント単位での管理は大規模でなければ問題ない
  • 通常のHTML, CSSも併用できる

ということも分かった

4-1. コンポーネント分割の話

Reactの一つの強み。部品単位で見た目と機能をつくれるのでそこが良い感じで活用できそう。
写真のようにコードを折りたためばかなり見通しは良い。
ただ、CodePenのコードサジェスト機能が結構弱い（今までVSCodeの拡張にいかに頼っていたかがわかる）ので、ガリガリコード書くのはしんどいと感じた。

どうせGPTが難しいロジック部分は書くと割り切ってしまえばReact視点では問題ないものの、tailwindがやはりしんどくなってくる。これもサジェスト効かないと記述量多いし、忘れたときに都度結構公式ドキュメントを見に行ったのでしんどかった。

通常のHTML, CSSも併用できる

当然できるわけではあるが、CodePenには美しいHTML, CSSサンプルテンプレートが転がっており、それを活用できるという点が良いと感じた。
HTML, CSSのサンプルテンプレートででページ全体の見た目を整え、そこにJSで書いた自慢の機能を載せこむことができるのでいい感じ。
そういった意味でもコンポーネント内に閉じて制御できるtailwindでReact内は記述したい（サンプルテンプレートのHTML, CSSの追記・変更は最小限にしたい）ので相性良さげと思った