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

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

Transcript

1. Tailwind CSSͰ

   ͍ΖΜͳUIΛͭ͘Δ
   @subuta 2019/9/25
   

   View Slide

2. ࣗݾ঺հ
   • ໊લ: ੪౻ॣଠ (@subuta)
   • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ
   ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋
   Node.js(Koa + Next.js)Λ࢖͑ͯ
   ͯϋοϐʔͰ͢ɻ
   • React͕ओʹ޷͖Ͱ͕͢ɺVue.js
   ΋Angular.js΋ᅂΉఔ౓ʹ͸
   ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾
   ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   VUJMJUZpSTU$44'SBNFXPSL
   

   View Slide

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

   

   IUUQTHFUCPPUTUSBQDPNEPDTVUJMJUJFT
   TQBDJOH
   

   View Slide

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

   View Slide

9. vs Bootstrap

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

   View Slide

10. vs Bootstrap

    (a.k.a UI Framework)
    5BJMXJOE$44Ͱ͸

    lCHCMVFIPWFSCHCMVFUFYUXIJUF
    GPOUCPMEQZQYSPVOEFEzͷΑ͏ͳ

    $44ͷϓϩύςΟͱ ͓Αͦ
    ରͱͳΔΫϥεΛࣗ༝
    ʹ૊Έ߹ΘͤͯίϯϙʔωϯτΛ࡞͍ͬͯ͘ɻ
    

    View Slide

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

    View Slide

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

    View Slide

13. Tailwindͷ༏ΕͯΔ఺
    w Ϋϥε໊ͱ$44ϓϩύςΟ͕ ΄΅
    ҰରҰͰରԠ͠
    ͯΔͷͰɺ௚ײత
    w ͍͍ͩͨͷσβΠϯʹରԠͰ͖Δ
    

    View Slide

14. Tailwind͕ͭΒ͍఺
    w ਖ਼͘͠࡞ΔͨΊʹ͸ɺ$44ͷϓϩύςΟͷ࢓༷Λཧղ
    ͍ͯ͠Δඞཁ͕͋Δ

    ͱ͸͍͑5BJMXJOEͷΫϥεΛ֮͑Δ$44ͷϓϩύ
    ςΟΛ֮͑Δʹͭͳ͕ΔͷͰɺ൚༻ੑ͸͋Δ
    w $44ͷΫϥε໊͕௕͘ͳΓ͕ͪ

    l!BQQMZzΛ࢖ͬͯɺΘ͔Γ΍͍͢୯ҐͰ੔ཧ͢Δɻ
    w ύοͱ࢖͑Δίϯϙʔωϯτ͸༻ҙ͞Εͯͳ͍ͷͰɺॳ
    ظ։ൃʹ΍΍͕͔͔࣌ؒΔ
    

    View Slide

15. vs Bootstrapͷ·ͱΊ
    ͦΕͧΕ௕ॴɾ୹ॴ͕͋ΔͷͰɺ࢖͍෼͚͕େࣄɻ
    

    View Slide

16. CSS Frameworkͷ࢖͍෼͚
    w σβΠϯ͸ಛʹͳ͍ͷͰɺ6*Λͬ͞͞ͱ࡞Γ͍ͨ

    #PPUTUSBQͳͲͷ6*'SBNFXPSLΛ࢖͏ɻ
    w σβΠϯ͕͋ΔͷͰɺͩ͜Θͬͯ࡞Γ͍͚ͨͲɺޮ
    ཰Α͘΍Γ͍ͨɻ

    5BJMXJOE$44ͳͲͷ6UJMJUZ'SBNFXPSLΛ࢖͏ɻ
    ଞʹ΋5BDIZPOTͱ͍͏ͷ͕͋ΔΒ͍͠ɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    

    6*ͷ։ൃ͸4UPSZCPPLΛ࢖͍·͢ɻ
    ࠓճ͸1BSDFM5BJMXJOE$443FBDUͰ΍ͬͯΈ·
    ͢ɻ
    ͦͷଞͷ؀ڥߏ੒Ͱ΍Δ͔ͨ͸ެࣜͷυΩϡϝϯτΛ
    ࢀর͍ͯͩ͘͠͞ɻ
    

    View Slide

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

    View Slide

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

    View Slide

22. ͝੩ௌ͋Γ͕ͱ͏͟͝
    ͍·ͨ͠
    

    View Slide