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

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

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

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

! 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 

! 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 # 

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

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

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

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

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

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

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

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

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

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

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

! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ 4BTT͸͔֬ʹͭΑ͍Ͱ͢ɻ ͔͠͠ɺ࣍ੈ୅ඪ४Ͱ͋Δͱ͍͏͜ͱʹ͸ɺҎԼͷΑ͏ͳϝϦοτ͕͋ Γ·͢ɻ 

௕ظతͳαϙʔτ WT
BMU
YYY 

࣍ʑੈ୅ඪ४΁ͷҠߦίετͷ௿͞ 

ΤίγεςϜͷྲྀߦΓ΍͢͞ 

τϥϯεύΠϧແ͠Ͱಈ͘ະདྷ͕དྷΔ ͨͩ͠ 

ྲྀߦΕ͹ڧ͍ػೳ͕૿͑Δ 

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

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