CSSモジュール ― 明るい未来へようこそ / techcamp02

第2回開発合宿（2016/08/14）

Transcript

1. CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ୈ2ճ։ൃ߹॓੒Ռൃදɹ@yasaichi
2. ൃදߏ੒ 1. എܠͱ໨త 2. ख๏֓ཁ 3. ࣮ࡍʹ࢖ͬͯΈͨ 4. ॴײ
3. എܠͱ໨త
4. എܠ: CSS Modules • ҎԼΛಡΜͰCSS ModulesʹڵຯΛ࣋ͭ • State of React and CSS • CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ʢ͜ͷεϥΠυͷλΠτϧͷݩωλʣ • Modular CSS with React
5. CSSʹରͯ͠ͷΞϯςφ͕
 ߴ·ͬͨঢ়ଶʹ
6. എܠ: PostCSS • ͞ΒʹҎԼΛಡΜͰPostCSSͱ͍͏ಈ͖͕͋Δ ͜ͱΛ஌Δ • morishitterͷCSSͷॻ͖ํʢ2016೥Նʣ • [ৄղ] ϞμϯCSS: ه๏ɼελΠϧͷ؅ཧɼ PostCSSʢWEB+DB PRESS Vol.93ʣ
7. ࠓճͷ߹॓ͷ໨త • ର৅ɿhttps://github.com/yasaichi/ minesweeper-reactjs • CSS ModulesΛ࢖ͬͯCSSΛॻ͍ͯΈΔ • PostCSSΛ࢖ͬͯCSSͷ "τϥϯεύΠϧ" ʢCSS to CSSʣΛମݧ͢Δ
8. ख๏֓ཁ
9. CSS Modules • CSSͷ৽͍͠ઃܭ֓೦ or ࢦ਑ • ϧʔϧηοτͷӨڹൣғΛίϯϙʔωϯτ
 ୯ҐͰดͯ͡͠·͓͏ͱ͍͏ͷ͕ओͳߟ͑ • BEMͳͲͷઃܭख๏Λ࢖Θͣʹࡶʹॻ͍ͯ΋ ·͋·͋ഁ୼͠ʹ͍͘CSS͕ಘΒΕΔ
10. αϯϓϧ import React from 'react'; import styles from './style.css'; export default class Logo extends React.Component { render() { return <div className={styles.square} />; } }; /* style.css */ .square { width: 200px; height: 200px; }
11. build͢Δͱ ._1uhuc_qi65HzMlHqmlWStu { width: 200px; height: 200px } <!DOCTYPE html> <html> <body> <div id="container"> <div data-reactroot="" class="_1uhuc_qi65HzMlHqmlWStu"></div> </div> </body> </html> React ComponentʹରԠ ͢Δclass͕ద༻͞ΕΔ άϩʔόϧۭؒͰҰҙͳ Ϋϥε໊ʹม׵͞ΕΔ
12. PostCSS • "PostCSS is a tool for transforming styles with JS plugins"ʢGitHubͷϦϙδτϦΑΓʣ • ௒ͬ͘͟Γݴ͏ͱCSSʹ͓͚ΔBabel • Babelͱಉ༷ʹ͞·͟·ͳϓϥάΠϯ͕͋Δ
 ʢe.g. Autoprefixer, cssnext ͳͲʣ
13. ࣮ࡍʹ࢖ͬͯΈͨ
14. ߹॓Ҏલͷminesweeper • Ұ೥લ͘Β͍ʹReactͷษڧ͕ͯΒ࡞ͬͨ • React (0.13.3) • Gulp • Browserify • Radium
15. σϞʢͦͷ1ʣ
16. ߹॓ޙͷminesweeper • 2016೥ͬΆ͍ײ͡ʹΞοϓσʔτ • React (15.3.0) • npm-scripts • webpack • CSS Modules + cssnext + PostCSS
17. σϞʢͦͷ2ʣ
18. ॴײ
19. ໌Δ͍ະདྷʁ • CSSͷʢະདྷͷʣඪ४͕ऑ͍ͷͰॻ͍͍ͯͯ
 ਏ͍৔໘͕͋Δʢe.g. eachతͳͷ࢖͍͍ͨʣ • σόοάͷͨΊͷ͍͍࢓૊Έ͕·ͩͳ͍ • ݪ୊͸”CSS Modules: Welcome to the Future” -> ະདྷ͕໌Δ͍ͱ͸Ұݴ΋ʢry
20. ͓ർΕ͞·Ͱͨ͠ʂ