Tailwind CSSでいろんなUIをつくる

06b9c7286903fd1062a201e1a3ac65d9?s=47 Shunta Saito
September 25, 2019

Tailwind CSSでいろんなUIをつくる

Tailwind CSSはUtilify-first CSS Frameworkと呼ばれています。既存のUI Frameworkとの違いをお話しつつ、実際にTailwindを使って、シンプルなButtonからDropdown, Modalなどのやや複雑なUIまでReactを使い実装するデモとなります。

06b9c7286903fd1062a201e1a3ac65d9?s=128

Shunta Saito

September 25, 2019
Tweet

Transcript

  1. Tailwind CSSͰ
 ͍ΖΜͳUIΛͭ͘Δ @subuta 2019/9/25

  2. ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa +

    Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
  3. ໨࣍ w 5BJMXJOE$44ͱ͸ w #PPUTUSBQ BLB6*'SBNFXPSL ͱͷҧ͍ w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ

  4. ໨࣍ w 5BJMXJOE$44ͱ͸ w WT#PPUTUSBQ BLB6*'SBNFXPSL  w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ

  5. Tailwind CSSͱ͸ "VUJMJUZpSTU$44GSBNFXPSLGPS SBQJEMZCVJMEJOHDVTUPNEFTJHOT

  6. Tailwind CSSͱ͸ ߴ଎ʹಠࣗͷσβΠϯΛ࣮૷͢ΔͨΊͷ
 VUJMJUZpSTU$44'SBNFXPSL

  7. CSSʹ͓͚ΔUtilityͱ͸ #PPUTUSBQWʹ΋ؚ·ΕͯͨΓ͢ΔɻNBSHJO͚ͩ Λࢦఆ͢ΔΑ͏ͳ$44Ϋϥεɻ
 
 IUUQTHFUCPPUTUSBQDPNEPDTVUJMJUJFT TQBDJOH

  8. ໨࣍ w 5BJMXJOE$44ͱ͸ w #PPUTUSBQ BLB6*'SBNFXPSL ͱͷҧ͍ w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ

  9. vs Bootstrap
 (a.k.a UI Framework) #PPUTUSBQͳͲͷϑϨʔϜϫʔΫͰ͸ɺzϘλϯzΛ ࡞Δͱ͖͸lCUOzΫϥεΛ࢖͏ɻͱ͍ͬͨΑ͏ʹɺ ίϯϙʔωϯτ 6*ͷཁૉ ͝ͱʹઐ༻ͷΫϥε͕༻

    ҙ͞Ε͍ͯΔɻ
  10. vs Bootstrap
 (a.k.a UI Framework) 5BJMXJOE$44Ͱ͸
 lCHCMVFIPWFSCHCMVFUFYUXIJUF GPOUCPMEQZQYSPVOEFEzͷΑ͏ͳ
 $44ͷϓϩύςΟͱ ͓Αͦ

    ରͱͳΔΫϥεΛࣗ༝ ʹ૊Έ߹ΘͤͯίϯϙʔωϯτΛ࡞͍ͬͯ͘ɻ
  11. Bootstrapͷ༏ΕͯΔ఺ w ଟ͘ͷΑ͘࢖͏ίϯϙʔωϯτ͕༻ҙ͞ΕͯΔͷͰɺ ࢝ΊΔͷָ͕ w ΈΜͳ࢖ͬͨ͜ͱ͋ΔͷͰɺෳ਺ਓͰ։ൃ͠΍͍͢ ʢυΩϡϝϯτɾຊ΋ॆ࣮ͯ͠ΔͷͰֶश΋͠΍͢ ͍ʣ

  12. Bootstrap͕ͭΒ͍఺ w ಠࣗͷσβΠϯʹ߹ΘͤΑ͏ͱ͢Δͱେม ηϨΫλ ͷ༏ઌ౓΍ɺJNQPSUBOUΛۦ࢖ͯ͠ؤுΔ͜ͱʹͳ Δʣ w #PPUTUSBQͰ͸ͳ͍ଞͷ6*'SBNFXPSLʹ৐Γ׵͑ͨ ৔߹ʹɺ஌͕ࣝ΄ͱΜͲྲྀ༻Ͱ͖ͳ͍ɻʢ໋໊نଇ ͱ͔͕ҧ͏ͷͰʣ

    w ϨΠΞ΢τͷجຊͱͳΔ(SJEͷߟ͑ํΛཧղ͢Δඞ ཁ͕͋Δɻ
  13. Tailwindͷ༏ΕͯΔ఺ w Ϋϥε໊ͱ$44ϓϩύςΟ͕ ΄΅ ҰରҰͰରԠ͠ ͯΔͷͰɺ௚ײత w ͍͍ͩͨͷσβΠϯʹରԠͰ͖Δ

  14. Tailwind͕ͭΒ͍఺ w ਖ਼͘͠࡞ΔͨΊʹ͸ɺ$44ͷϓϩύςΟͷ࢓༷Λཧղ ͍ͯ͠Δඞཁ͕͋Δ
 ͱ͸͍͑5BJMXJOEͷΫϥεΛ֮͑Δ$44ͷϓϩύ ςΟΛ֮͑Δʹͭͳ͕ΔͷͰɺ൚༻ੑ͸͋Δ w $44ͷΫϥε໊͕௕͘ͳΓ͕ͪ
 l!BQQMZzΛ࢖ͬͯɺΘ͔Γ΍͍͢୯ҐͰ੔ཧ͢Δɻ w

    ύοͱ࢖͑Δίϯϙʔωϯτ͸༻ҙ͞Εͯͳ͍ͷͰɺॳ ظ։ൃʹ΍΍͕͔͔࣌ؒΔ
  15. vs Bootstrapͷ·ͱΊ ͦΕͧΕ௕ॴɾ୹ॴ͕͋ΔͷͰɺ࢖͍෼͚͕େࣄɻ

  16. CSS Frameworkͷ࢖͍෼͚ w σβΠϯ͸ಛʹͳ͍ͷͰɺ6*Λͬ͞͞ͱ࡞Γ͍ͨ
 #PPUTUSBQͳͲͷ6*'SBNFXPSLΛ࢖͏ɻ w σβΠϯ͕͋ΔͷͰɺͩ͜Θͬͯ࡞Γ͍͚ͨͲɺޮ ཰Α͘΍Γ͍ͨɻ
 5BJMXJOE$44ͳͲͷ6UJMJUZ'SBNFXPSLΛ࢖͏ɻ ଞʹ΋5BDIZPOTͱ͍͏ͷ͕͋ΔΒ͍͠ɻ

  17. ࢖͍෼͚ w 5BJMXJOE$44ͱ͸ w WT#PPUTUSBQ BLB6*'SBNFXPSL  w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ

  18. UIίϯϙʔωϯτΛ࡞ͬͯΈΔ σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUI UBJMXJOEDTT

  19. UIίϯϙʔωϯτΛ࡞ͬͯΈΔ σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUI UBJMXJOEDTT
 
 6*ͷ։ൃ͸4UPSZCPPLΛ࢖͍·͢ɻ ࠓճ͸1BSDFM 5BJMXJOE$44 3FBDUͰ΍ͬͯΈ· ͢ɻ ͦͷଞͷ؀ڥߏ੒Ͱ΍Δ͔ͨ͸ެࣜͷυΩϡϝϯτΛ

    ࢀর͍ͯͩ͘͠͞ɻ
  20. ໨࣍ w 5BJMXJOE$44ͱ͸ w #PPUTUSBQ BLB6*'SBNFXPSL ͱͷҧ͍ w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ

  21. ͦͷଞ 1BSDFM 4UPSZCPPLͷ૊Έ߹Θͤ͸ָʹ࢝ΊΒΕ Δ͚Ͳࣥච࣌఺  Ͱ͸ɺ·ͩރΕͯͳ͞ ͦ͏ɻ 3FBDUͰͳʹ͔࡞ΔͳΒ1PXFSQMVHͱSFBDU JDPOT͓͢͢ΊͳͷͰ৮ͬͯΈ͍ͯͩ͘͞☺ σβΠφʔ͞Μ͔ΒQBEEJOHΛΰχϣΰχϣͨ͠

    ͍ͱݴΘΕͨΒɺίϨͰ΍Δ
  22. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠