TailwindCSSで学ぶ技術批判の気をつけ方

Transcript

1. TailwindCSSで学ぶ技術批判の気をつけ方 いまいまい 1
2. 自己紹介 いまいまい　(今井俊希) 株式会社ゆめみ 新卒 フロントエンドエンジニア 2
3. Xでの技術批判とその対策 なぜ生まれなぜ話題に尽きないのか 3
4. TailwindCSSに対する批判を皮肉った画像がある 1. 反Tailwindまたは反反tailwindのポストがされる 2. 反対意見同士で論争が起きる 3. 静まって他のトピックに対しての投稿が増える 4. スキルの問題でエンゲージメントが減少する 5. エンゲージメント欲しさにまた批判をする 4
5. 技術批判に乗っかってしまう原因 ※ガチでクリティカルな脆弱性などがあり、正しい批判が行われている場合は除く 根本はその技術に疎いこと TailwindCSSを食わず嫌いして「やっぱり」と思ってしまった場合 デザイン周りの設計がめちゃくちゃで苦手になってしまった場合 技術思考・マネジメント思考のどちらかに極端に偏ってしまっている場合 5
6. 技術批判に乗らないためには その技術と関連領域について、良し悪し両方を言えるようにすること 個人での開発とチームでの開発の両方の視点を持っていること 知らない技術について強く語らないこと 6
7. TailwindCSSを実務で使うときに気をつけること 7
8. TailwindCSSの見づらさについて CSSの多重ネストと、横直線のユーティリティクラスの読みやすさは人による CSSは構造と対応づけられていて理解しやすい ユーティリティクラスの方が瞬間的にスタイルが理解しやすい 逆に、どちらも設計とその分割が甘ければ見づらくなる 根本原因 クラスの分割粒度やまとめ方が荒め 一つの要素にクラスを詰め込みすぎ 場合分けのクラスを一行にまとめている 8
9. デザイントークンを考えて実装できているか見直す 適当なユーティリティクラスを使ったり、 [ ] を使ってしまう デザインが統一されない・人によって記述方法が違う メンテナンス性が下がり、負債になってしまう CSSと同様に、デザイントークンの扱いは重要 9
10. デザイントークンとユーティリティクラスを同期させる カラートークン、スペーシングなどは使うものを統一する ユーティリティクラスの表記方法を統一する configに定義して運用する ユーティリティクラスにない場合は、configに独自のトークンとして定義する classNameに直書きしない 10
11. コンポーネント・classNameの設計を見直す コンポーネントの設計・分割 classNameにスタイルを書けても、責務の分割は重要 daisyUIやRadixUIなどに分割できないか shadcn/ui (RadixUI + TailwindCSS) 一箇所にまとめすぎているclassNameを部分的に分割でいないか 11
12. classNameの設計・分割 classNameの分割・結合にはtailwind-marge + clsxがおすすめ import { merge } from 'tailwind-merge'; import clsx from 'clsx'; const checkboxClass = merge( 'h-4 w-4', clsx({ 'bg-blue-500 border-blue-500': isChecked, 'bg-gray-500 border-gray-500': !isChecked, }) ); <input type="checkbox" className={checkboxClass} checked={isChecked} /> 12
13. variantsによって切り替えたいものはTailwind Variantsがおすすめ import { tv } from 'tailwind-variants'; const button = tv({ base: 'px-4 py-2 font-semibold', variants: { color: { primary: 'bg-blue-500 text-white', secondary: 'bg-gray-500 text-black', }, }, }); <button className={button({ color: 'primary' })}>Primary Button</button> 13
14. レスポンシブはFluid for Tailwind CSSを使うと、流動的な値にできる // before <p className="text-lg md:text-xl lg:text-2xl">Test Message</p> // after <p className="~text-lg/2xl">Test Message</p> 14
15. 1. デザイントークンを意識して実装しよう 2. コンポーネントとクラスの設計に気をつけよう ご清聴ありがとうございました 15