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

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/