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
3k
天下一 Dev Server 武道会 / World Dev Server Tournament
p1ch_jp
2
730
エンジニアのためのデザインの話
p1ch_jp
0
890
Other Decks in Programming
See All in Programming
Ruby Pattern Matching
bkuhlmann
0
920
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
930
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
490
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
7.9k
PostmanでAPIの動作確認が楽になった話
h455h1
0
130
受託開発でGitLab CI を活用していく
xiombatsg
1
270
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
Git Rebase
bkuhlmann
11
1.6k
Featured
See All Featured
Docker and Python
trallard
33
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
The Invisible Customer
myddelton
114
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Navigating Team Friction
lara
177
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
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࣮ફೖ " ͓͠·͍