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

by Shunta Saito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Tailwind CSSͱ͸ "VUJMJUZpSTU$44GSBNFXPSLGPS SBQJEMZCVJMEJOHDVTUPNEFTJHOT

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

vs Bootstrap  (a.k.a UI Framework) 5BJMXJOE$44Ͱ͸  lCHCMVFIPWFSCHCMVFUFYUXIJUF GPOUCPMEQZQYSPVOEFEzͷΑ͏ͳ  $44ͷϓϩύςΟͱ ͓Αͦ ରͱͳΔΫϥεΛࣗ༝ ʹ૊Έ߹ΘͤͯίϯϙʔωϯτΛ࡞͍ͬͯ͘ɻ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Tailwind͕ͭΒ͍఺ w ਖ਼͘͠࡞ΔͨΊʹ͸ɺ$44ͷϓϩύςΟͷ࢓༷Λཧղ ͍ͯ͠Δඞཁ͕͋Δ  ͱ͸͍͑5BJMXJOEͷΫϥεΛ֮͑Δ$44ͷϓϩύ ςΟΛ֮͑Δʹͭͳ͕ΔͷͰɺ൚༻ੑ͸͋Δ w $44ͷΫϥε໊͕௕͘ͳΓ͕ͪ  l!BQQMZzΛ࢖ͬͯɺΘ͔Γ΍͍͢୯ҐͰ੔ཧ͢Δɻ w ύοͱ࢖͑Δίϯϙʔωϯτ͸༻ҙ͞Εͯͳ͍ͷͰɺॳ ظ։ൃʹ΍΍͕͔͔࣌ؒΔ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠