Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
この先生きのこるためのPostCSS実践入門
Search
Pちゃん
June 21, 2017
Programming
1
1.4k
この先生きのこるためのPostCSS実践入門
Frontend de KANPAI! #frokan LT枠での資料です。
Pちゃん
June 21, 2017
Tweet
Share
More Decks by Pちゃん
See All by Pちゃん
API になろう / Let's become an API
p1ch_jp
0
3.1k
天下一 Dev Server 武道会 / World Dev Server Tournament
p1ch_jp
2
790
エンジニアのためのデザインの話
p1ch_jp
0
900
Other Decks in Programming
See All in Programming
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
Trial
cairolibrary720
1
130
CSC307 Lecture 09
javiergs
PRO
1
500
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
Advanced App Shrinking Techniques
cbeyls
2
150
小さな開発会社を作った理由
polidog
0
1.9k
CSC307 Lecture 12
javiergs
PRO
0
220
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
リハビリmruby
kishima
1
160
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
24
3.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Designing the Hi-DPI Web
ddemaree
276
34k
Being A Developer After 40
akosma
72
580k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The World Runs on Bad Software
bkeepers
PRO
63
11k
KATA
mclloyd
20
13k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Building an army of robots
kneath
301
42k
Transcript
͜ͷઌੜ͖ͷ͜ΔͨΊͷ 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͔֬ʹͭΑ͍Ͱ͢ɻ ͔͠͠ɺ࣍ੈඪ४Ͱ͋Δͱ͍͏͜ͱʹɺҎԼͷΑ͏ͳϝϦοτ͕͋ Γ·͢ɻ ظతͳαϙʔτ WTBMUYYY
࣍ʑੈඪ४ͷҠߦίετͷ͞ ΤίγεςϜͷྲྀߦΓ͢͞ τϥϯεύΠϧແ͠Ͱಈ͘ະདྷ͕དྷΔ ͨͩ͠ ྲྀߦΕڧ͍ػೳ͕૿͑Δ
! ࣍ੈඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ ඪ४ͰԺ͔ΛखʹೖΕΔ ݸਓతʹɺʮͰ͖Δ͚ͩඪ४తͳٕज़Ͱ͍ͬͯ͘΄͏͕ɺԺ͔ʹ ੜ͖͍͚ͯΔʯͱࢥ͍ͬͯΔͷͰɺ͜Ε͔ΒͰ͖Δ͚ͩ1PTU$44Λ ͍ͬͯ͜͏ͱࢥ͍ͬͯ·͢ɻ ੋඇɺΈͳ͞ΜͬͯΈ͍ͯͩ͘͞"
! ࣍ੈඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ " ͓͠·͍