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
2. ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa + Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
3. ໨࣍ w 5BJMXJOE
   $44ͱ͸
   w #PPUTUSBQ BLB
   6*
   'SBNFXPSL ͱͷҧ͍
   w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ
4. ໨࣍ w 5BJMXJOE
   $44ͱ͸
   w WT
   #PPUTUSBQ BLB
   6*
   'SBNFXPSL
   w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ
5. Tailwind CSSͱ͸ "
   VUJMJUZpSTU
   $44
   GSBNFXPSL
   GPS
   SBQJEMZ
   CVJMEJOH
   DVTUPN
   EFTJHOT
6. Tailwind CSSͱ͸ ߴ଎ʹಠࣗͷσβΠϯΛ࣮૷͢ΔͨΊͷ
 VUJMJUZpSTU
   $44
   'SBNFXPSL
7. CSSʹ͓͚ΔUtilityͱ͸ #PPUTUSBQ
   Wʹ΋ؚ·ΕͯͨΓ͢ΔɻNBSHJO͚ͩ Λࢦఆ͢ΔΑ͏ͳ$44Ϋϥεɻ
 
 IUUQTHFUCPPUTUSBQDPNEPDTVUJMJUJFT TQBDJOH
8. ໨࣍ w 5BJMXJOE
   $44ͱ͸
   w #PPUTUSBQ BLB
   6*
   '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Ͱ͸
    
 lCHCMVF
    IPWFSCHCMVF
    UFYUXIJUF
    GPOUCPME
    QZ
    QY
    SPVOEFEz
    ͷΑ͏ͳ
 $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 BLB
    6*
    'SBNFXPSL
    w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ
18. UIίϯϙʔωϯτΛ࡞ͬͯΈΔ σϞ
    IUUQTHJUIVCDPNTVCVUBQMBZXJUI UBJMXJOEDTT
19. UIίϯϙʔωϯτΛ࡞ͬͯΈΔ σϞ
    IUUQTHJUIVCDPNTVCVUBQMBZXJUI UBJMXJOEDTT
 
 
    6*ͷ։ൃ͸4UPSZCPPLΛ࢖͍·͢ɻ
    
    ࠓճ͸1BSDFM
    
    5BJMXJOE$44
    
    3FBDUͰ΍ͬͯΈ· ͢ɻ
    
    ͦͷଞͷ؀ڥߏ੒Ͱ΍Δ͔ͨ͸ެࣜͷυΩϡϝϯτΛ ࢀর͍ͯͩ͘͠͞ɻ
20. ໨࣍ w 5BJMXJOE
    $44ͱ͸
    w #PPUTUSBQ BLB
    6*
    'SBNFXPSL ͱͷҧ͍
    w 6*ίϯϙʔωϯτΛ࡞ͬͯΈΔ
21. ͦͷଞ 
    1BSDFM
    
    4UPSZCPPLͷ૊Έ߹Θͤ͸ָʹ࢝ΊΒΕ Δ͚Ͳࣥච࣌఺  Ͱ͸ɺ·ͩރΕͯͳ͞ ͦ͏ɻ
    
    3FBDUͰͳʹ͔࡞ΔͳΒ
    1PXFSQMVH
    ͱ
    SFBDU JDPOT
    ͓͢͢ΊͳͷͰ৮ͬͯΈ͍ͯͩ͘͞
    ☺ 
    σβΠφʔ͞Μ͔ΒQBEEJOHΛΰχϣΰχϣͨ͠ ͍ͱݴΘΕͨΒɺίϨͰ΍Δ
22. ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠