Tailwind CSS

Transcript

1. Tailwind CSS 2022/1/27 UI開発課 田端 樹人
2. 本勉強会のスコープ ・Tailwind CSS とは？ ・なぜTailwind CSSに注目が集まっているのか (メリデメ) ・他フレームワークやライブラリとの比較 ※Tailwind CSS の導入や記法については多くのドキュメントが公開されており、難易度もそれほど高くはないた めスコープ外
3. 本勉強会のスコープ > Tailwind CSSとは ・ユーティリティファーストの考え方を持った CSSフレームワーク ・ユーティリティファースト ・あらかじめ用意されたclassをhtmlに当てるだけでstyleを適用させていく手法 ・従来であれば全く同じstyleを当てたい箇所で書くコードが 2度手間になってしまう問題が　 　 　あった が、React, Vue等フレームワークのコンポーネント指向がこれを解決してくれる
4. ざっくりこう書ける 　　　　　　　 →　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
5. ※コンポーネント指向 (本筋ではないため軽く) ・ページのコンポーネント(部品)単位で実装を行い、その組み合わせでアプリケーションを作成する ・複数回利用するコンポーネントがある場合に使い回しができ、効率的に開発できる →命名したclassにstyleを当てて、そのclass名を使い回す必要がなくなる 　　　　　　　　　　　　　　　　　＆ 　ページ全体にCSSを適用させずに済み、パーツやページ単位に閉じることができる ・現代フロントエンドで採用されている React, Vue, Angularはコンポーネント指向に乗っ取っている
6. Tailwind CSS のメリット ・class名を考える必要がない ・デザインシステムの最低保証 ・ドキュメント、チートシートの豊富さ
7. Tailwind CSS のメリット > class名を考える必要がない ・Tailwind側で用意されているclass名を使用するため、 　hoge-wrapperやhuga-contentのような命名を毎度しなくて済む →開発効率アップ ・cssの記述もなくなるため単純にコード量を減らせる →htmlのソースだけ見れば内容を把握できる
8. Tailwind CSS のメリット > デザインシステムの最低保証 ・各種サイズや文字色といったカスタマイズについて Tailwindで用意しているため、 　デザインを揃えやすい 　ex) .h-5(=height: 20px), .border-red-300(=border-color: #FCA5A5) 　→チーム開発において実装者の違いによる微妙なずれが発生しづらくなる ・font-size: 29px のような細かい指定を毎度しなくて済むのでデザインを揃えやすい →自前で用意することも可能
9. Tailwind CSS のメリット > ドキュメント、チートシートの豊富さ ・2020から2021年にかけて多くの開発者に使われるようになり、チートシートは勿論、 Tailwindの組み合わせを 部品単位で公開している場所も多い ・参考：全米が待ち望んでいた超便利な Tailwind CSSツールリスト
10. Tailwind CSS のデメリット ・classに多くのコードを書く必要があり、可読性が落ちやすい ・cssの理解度がある程度必要 ・デザインを100%再現したいケースで強味を生かしづらい
11. Tailwind CSS のデメリット > classに多くのコードを書く必要があり、 可読性が落ちやすい ・HTMLにstyleの情報を詰め込むため必然的に情報量が増え、そこだけ見ると可読性が落ちやすい →Prettierで縛ることで対策できる ・HTMLとCSSが分かれている場合コード理解のために両ソースを行き来する必要があるため、ここはトレードオ フ
12. (横に入りきっていない) ↓
13. Tailwind CSS のデメリット > CSSの理解度がある程度必要 ・UIライブラリのようにそのまま部品を使えるわけではなく、記法としては平の CSSの短縮系のイメージため、最 低限CSSが書ける必要はある →公開されているパーツを流用することである程度楽はできる
14. Tailwind CSS のデメリット > デザインを100%再現したい場合に強味を生かしづらい ・「ここの余白は13pxで、ここの高さは211pxで。。。」のように厳密に再現したい場合にカスタマイズが必要にな る場面が増える →フロントエンドとしてはここである程度統一させていくかをデザイナー (あるいは決まったデザインから )とすり合 わせていきたい
15. 他ライブラリやフレームワークとの比較 ・Bootstrapとの比較 ・Material UI/Vuetify等のUIライブラリ ・インラインで直接記述
16. 他ライブラリやフレームワークとの比較 > Bootstrapとの比較 ・一番話題に上がる比較 ・BootstrapはUIコンポーネントライブラリ(パーツ単位)なのに対してTailwind CSS はstyle単位 →用意されているパーツを利用するだけでなく、カスタマイズ性も高い ・パーツはBootstrapを利用しつつ、レイアウトは Tailwindで整える、のような併用も可能 ・BootstrapよりCSSの知識は必要になる
17. 他ライブラリやフレームワークとの比較 > Material UI/Vuetify等のUIライブラリとの比較 ・上記のReactやVueのUIライブラリはBootstrapと同じくパーツ単位での提供のため、 style単位で指定する Tailwindとは異なる →細かいカスタマイズの可否が異なる ・UIライブラリのパーツを使いつつ、レイアウトは Tailwind、ということは同様に可能
18. 他ライブラリやフレームワークとの比較 > インライン記述との比較 ・記法としてはかなり近い ・Tailwindではhoverやfocusなど疑似クラスを扱えたり、レスポンシブ対応できたりする 　インライン記述では結局疑似クラスについて styleタグ内で書くことになる ・デザインシステムがあるため、実質無限の選択肢から検討する必要がない →時間の削減
19. インライン記述 Tailwind CSS (疑似要素は別途styleに切り分け)
20. まとめ、注目ポイント ・ユーティリティファーストで styleについてHTMLで完結できる、class名を考える必要がない →従来のCSS設計と完全に異なる ・React/Vueといったフロントエンドフレームワークと相性がいい →開発時間の削減 ・デザインシステムが用意されつつも、カスタムも容易 →開発効率アップ
21. 軽く感想など ・2021年話題に上がることが多かったが、触ってこなかったので年末に試した &調べた(今回のモチベーション) ・記法については慣れの部分があるため正直気持ち悪さはあったが、そこをクリアすれば ・作業効率を上げられる ・UIライブラリほど引っ張られずに済む ・最悪プレーンなCSSに戻せる 　など恩恵が大きいためReact/Vueを利用する場合、個人的には採用したい技術と感じた
22. 参考 ・色々書き比べた結果 Tailwind CSSにしたという話 ・TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ ・Tailwind CSSを導入した一年を振り返りながら、今後の展開について考えてみた。 ・ユーティリティーファーストと Tailwind CSSのススメ ・Tailwind CSS の推しポイントを語りたい ・全米が待ち望んでいた超便利な Tailwind CSSツールリスト
23. ご清聴ありがとうございました！