モダンなJavaScriptアプリケーションでモダンにスタイリングする方法

WeAreJavaScripters@15th
https://wajs.connpass.com/event/76238/

Transcript

1. ϞμϯͳJavaScriptΞϓϦέʔγϣϯͰ ϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ
2. վΊɻɻ
3. React ͰϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ
4. େݪ ᆴଠ / sottar גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ mercari NOW, CSTool sottar_ About me sottar
5. React Ͱ CSSɺͲ͏΍ͬͯॻ͍ͯ·͔͢ʁ
6. ελΠϦϯά͢ΔࡍʹٻΊΔ΋ͷ
7. ελΠϦϯά͢ΔࡍʹٻΊΔ΋ͷ - component ͝ͱʹείʔϓΛ੾Γ͍ͨ - ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔஌Γ͍ͨ - CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ࢖͍͍ͨ - ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕ు͔Εͳ͍
8. ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘ ʢBEMͳͲͰʣ
9. ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘ ʢBEMͳͲͰʣ
10. CSS in JS (template literal)
11. CSS in JS ͱ͸ https://github.com/styled-components/styled-components
12. https://github.com/MicheleBertoli/css-in-js
13. https://github.com/MicheleBertoli/css-in-js
14. styled-components
15. styled-components
16. ελΠϦϯάʹٻΊΔ΋ͷ - component ͝ͱʹείʔϓΛ੾Γ͍ͨ - ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔஌Γ͍ͨ - CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ࢖͍͍ͨ - ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕ు͔Εͳ͍
17. component ͝ͱʹείʔϓΛ੾Γ͍ͨ
18. component ͝ͱʹείʔϓΛ੾Γ͍ͨ
19. ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔Θ͔Γ͍ͨ
20. ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔Θ͔Γ͍ͨ ʢ = ؾܰʹελΠϧΛফ͍ͨ͠ʣ
21. ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔Θ͔Γ͍ͨ
22. CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠
23. CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠
24. ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ
25. γϯλοΫεϋΠϥΠτ΍ิ׬ػೳ
26. ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ
27. ඪ४ͷCSSͱγϯλοΫε͕ဃ཭ͯ͠΄͘͠ͳ͍
28. stylelint ൐ŧƂŧ
29. stylelint ൐ŧƂŧ
30. ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕Ͱͳ͍
31. ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕Ͱͳ͍ - CSS Modules ͷωοΫ - Webpack ͳͲͰઃఆΛॻ͔ͳ͍ͱ JS ͷΤϥʔ͕ు͔Ε ͯ͠·͏͕ɺwebpack ʹґଘͨ͘͠ͳ͍ɻ
32. ͳͥ styled-components ͔
33. ͳͥ styled-components ͔ - template literal Λ༻͍͍ͯΔͳ͔ͰҰ൪ star ਺͕ଟ͘ɺ
 ։ൃ΋׆ൃʹߦΘΕ͍ͯΔ - React ͔Β࢖͍΍͍͢Α͏ʹ࡞ΒΕ͍ͯΔ - ಠཱͨ͠ελΠϧ༻ͷίϯϙʔωϯτΛ࡞͍ͬͯ͘ͱ͍͏ํ๏ - React ͷίϯϙʔωϯτઃܭʹ߹ΘͤͯελΠϧ΋ܧঝͰ͖Δ - ReactNative ʹ΋ରԠ͍ͯ͠Δ
34. Ͱ΋ɻɻɻ
35. Ͱ΋ɻɻɻ ΋ͬͱ΋ॏཁͳͷ͸ ʮ͖Ε͍ͳίϯϙʔωϯτઃܭʯ͕Ͱ͖Δ͔ɻ → Ͳ͏͢Ε͹៉ྷͳίϯϙʔωϯτ෼ׂ͕Ͱ͖Δͷ͔ɺ ೔ʑ೰ΜͰ͓Γ·͢
36. https://www.mercari.com/jp/jobs/