Slide 1

Slide 1 text

͜ͷઌੜ͖ͷ͜ΔͨΊͷ PostCSS࣮ફೖ໳ Shintaro Fujiwara DeNA Co., Ltd. / Design Strategies Office

Slide 2

Slide 2 text

! ࣗݾ঺հ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣗݾ঺հ

Slide 3

Slide 3 text

! ࣗݾ঺հ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ౻ݪ৻ଠ࿠ a.k.a. P-Chan " UI Design / Front-End # DeNA Co., Ltd. $ MyAnimeList.net

Slide 4

Slide 4 text

! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ PostCSSͱ͸

Slide 5

Slide 5 text

! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ en) PostCSS is a tool for transforming styles with JS plugins. ja) PostCSS͸ɺJSϓϥάΠϯͰελΠϧΛม׵͢ΔͨΊͷπʔϧ PostCSSͱ͸ input CSS CSS PostCSS Plugin " " PostCSS Plugin # Input CSS # Output CSS $ PostCSS Plugin " " PostCSS

Slide 6

Slide 6 text

! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ جຊతʹ͸ɺ֤छϓϥάΠϯΛ͍ΕΔ͜ͱʹΑͬͯɺ༷ʑͳγϯλοΫ ε͕࢖͑ΔΑ͏ʹͳΓ·͢ɻ ٯʹݴ͏ͱɺԿ΋ೖΕͳ͚Ε͹ɺͦͷ··ͷελΠϧγʔτ͕ు͖ग़͞ Ε·͢ɻ input CSS CSS PostCSS Plugin " " PostCSS Plugin # Input CSS # Output CSS $ PostCSS Plugin " " input CSS PostCSS Plugin # Input CSS # Output CSS #

Slide 7

Slide 7 text

! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣍ੈ୅ඪ४Ͱॻͨ͘ΊͷτϥϯεύΠϥʔ ࠓͷͱ͜ΖɺҰ൪ϝδϟʔͳ࢖ΘΕํ͸ʮϓϥάΠϯΛ૊Έ߹Θͤͯɺ ࣍ੈ୅ඪ४ $44 $44 Λݱࡏͷϒϥ΢βͰ࢖͑ΔΑ͏ʹ͠Α͏ʯ ͱ͍͏΋ͷͰ͢ɻ +4ք۾Ͱىͬͨ͜ʮ࣍ੈ୅ඪ४Λݱࡏͷϒϥ΢βͰ࢖͑ΔΑ͏ʹ͠Α ͏ʯͷྲྀΕͱಉ͡΋ͷͷΑ͏ʹײ͡·͢ɻ ࠓͷͱ͜Ζɺ࣍ੈ୅ඪ४Ͱ໨ۄͳػೳͱݴ͑͹ɺWBS ม਺ ͱ͔ !BQQMZ ม਺ηοτ ͱ͔DBMD ԋࢉ ͱ͔Ͱ͢ɻ

Slide 8

Slide 8 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ϓϥάΠϯΛબͿ

Slide 9

Slide 9 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ϚδͰແ਺ͷϓϥάΠϯ͕ଘࡏ͢Δ

Slide 10

Slide 10 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ precss PostCSSͰSASSͬΆ͍ॻ͖ํͰ͖ΔΑ͏ʹ͢Δ΍ͭ

Slide 11

Slide 11 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ sugarss ΠϯσϯτϕʔεͷγϯλοΫεͰ͔͚ΔΑ͏ʹͳΔ

Slide 12

Slide 12 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ޷͖উख΍Δͱ ΅͘ͷ͔Μ͕͍͖͑ͨ͞ΐ͏ͷ ͠ʔ͑͠Ύ͑͠Ύ΀Γ΀Ζͤͬ͞ʔ ͕Ͱ͖͕͋Δ

Slide 13

Slide 13 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ൒೥ޙʹ͸ɺ͢Ͱʹਏ͘ͳͬͯͦ͏

Slide 14

Slide 14 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ͜ͷઌੜ͖ͷ͜Δ ϓϥάΠϯ͚͕ͩΠΠͳʜ"

Slide 15

Slide 15 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ postcss-cssnext ࣍ੈ୅ඪ४Ͱॻ͚ΔΑ͏ʹͳΔϓϥάΠϯΛηοτʹͨ͠΍ͭ

Slide 16

Slide 16 text

! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞

Slide 17

Slide 17 text

! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ Ͱ΋ɺ4BTTͷ΄͏͕ڧ͘ͳ͍ʁ 1PTU$44ͷ࿩Λ͢ΔͱɺඞͣҾ͖߹͍ʹग़͞ΕΔͷ͕4BTTͰ͢ɻ ʮ4BTTͷ΄͏͕ͭΑ͘ͳ͍ʁ4BTTͰΑ͘ͳ͍ʁʯͱݴΘΕ·͢ɻ ͓ͬ͠ΌΔͱ͓Γɺ4BTTͷ΄͏͕ͭΑ͍Ͱ͢ɻ

Slide 18

Slide 18 text

! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ 4BTT͸͔֬ʹͭΑ͍Ͱ͢ɻ ͔͠͠ɺ࣍ੈ୅ඪ४Ͱ͋Δͱ͍͏͜ͱʹ͸ɺҎԼͷΑ͏ͳϝϦοτ͕͋ Γ·͢ɻ ௕ظతͳαϙʔτ WTBMUYYY ࣍ʑੈ୅ඪ४΁ͷҠߦίετͷ௿͞ ΤίγεςϜͷྲྀߦΓ΍͢͞ τϥϯεύΠϧແ͠Ͱಈ͘ະདྷ͕དྷΔ ͨͩ͠ ྲྀߦΕ͹ڧ͍ػೳ͕૿͑Δ

Slide 19

Slide 19 text

! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ඪ४ͰԺ΍͔ΛखʹೖΕΔ ݸਓతʹ͸ɺʮͰ͖Δ͚ͩඪ४తͳٕज़Ͱ΍͍ͬͯ͘΄͏͕ɺԺ΍͔ʹ ੜ͖͍͚ͯΔʯͱࢥ͍ͬͯΔͷͰɺ͜Ε͔Β͸Ͱ͖Δ͚ͩ1PTU$44Λ ࢖͍ͬͯ͜͏ͱࢥ͍ͬͯ·͢ɻ ੋඇɺΈͳ͞Μ΋࢖ͬͯΈ͍ͯͩ͘͞"

Slide 20

Slide 20 text

! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ " ͓͠·͍