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

Transcript

1. 1.

   ϞμϯͳJavaScriptΞϓϦέʔγϣϯͰ ϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ

2. 2.

   վΊɻɻ

3. 3.

   React ͰϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ

4. 4.

   େݪ ᆴଠ / sottar גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ mercari NOW, CSTool sottar_

   About me sottar
5. 5.

   React Ͱ CSSɺͲ͏΍ͬͯॻ͍ͯ·͔͢ʁ

6. 6.

   ελΠϦϯά͢ΔࡍʹٻΊΔ΋ͷ

7. 7.

   ελΠϦϯά͢ΔࡍʹٻΊΔ΋ͷ - component ͝ͱʹείʔϓΛ੾Γ͍ͨ - ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔஌Γ͍ͨ - CSS ͱ JS

   Ͱ஋Λڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ࢖͍͍ͨ - ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕ు͔Εͳ͍
8. 8.

   ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘

   ʢBEMͳͲͰʣ
9. 9.

   ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘

   ʢBEMͳͲͰʣ
10. 10.

    CSS in JS (template literal)

11. 11.

    CSS in JS ͱ͸ https://github.com/styled-components/styled-components

12. 12.

    https://github.com/MicheleBertoli/css-in-js

13. 13.

    https://github.com/MicheleBertoli/css-in-js

14. 14.

    styled-components

15. 15.

    styled-components

16. 16.

    ελΠϦϯάʹٻΊΔ΋ͷ - component ͝ͱʹείʔϓΛ੾Γ͍ͨ - ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔஌Γ͍ͨ - CSS ͱ JS

    Ͱ஋Λڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ࢖͍͍ͨ - ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕ు͔Εͳ͍
17. 17.

    component ͝ͱʹείʔϓΛ੾Γ͍ͨ

18. 18.

    component ͝ͱʹείʔϓΛ੾Γ͍ͨ

19. 19.

    ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔Θ͔Γ͍ͨ

20. 20.

    ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔Θ͔Γ͍ͨ ʢ = ؾܰʹελΠϧΛফ͍ͨ͠ʣ

21. 21.

    ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔Θ͔Γ͍ͨ

22. 22.

    CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠

23. 23.

    CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠

24. 24.

    ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ

25. 25.

    γϯλοΫεϋΠϥΠτ΍ิ׬ػೳ

26. 26.

    ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ

27. 27.

    ඪ४ͷCSSͱγϯλοΫε͕ဃ཭ͯ͠΄͘͠ͳ͍

28. 28.

    stylelint ൐ŧƂŧ

29. 29.

    stylelint ൐ŧƂŧ

30. 30.

    ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕Ͱͳ͍

31. 31.

    ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕Ͱͳ͍ - CSS Modules ͷωοΫ - Webpack ͳͲͰઃఆΛॻ͔ͳ͍ͱ

    JS ͷΤϥʔ͕ు͔Ε ͯ͠·͏͕ɺwebpack ʹґଘͨ͘͠ͳ͍ɻ
32. 32.

    ͳͥ styled-components ͔

33. 33.

    ͳͥ styled-components ͔ - template literal Λ༻͍͍ͯΔͳ͔ͰҰ൪ star ਺͕ଟ͘ɺ
 ։ൃ΋׆ൃʹߦΘΕ͍ͯΔ

    - React ͔Β࢖͍΍͍͢Α͏ʹ࡞ΒΕ͍ͯΔ - ಠཱͨ͠ελΠϧ༻ͷίϯϙʔωϯτΛ࡞͍ͬͯ͘ͱ͍͏ํ๏ - React ͷίϯϙʔωϯτઃܭʹ߹ΘͤͯελΠϧ΋ܧঝͰ͖Δ - ReactNative ʹ΋ରԠ͍ͯ͠Δ
34. 34.

    Ͱ΋ɻɻɻ

35. 35.

    Ͱ΋ɻɻɻ ΋ͬͱ΋ॏཁͳͷ͸ ʮ͖Ε͍ͳίϯϙʔωϯτઃܭʯ͕Ͱ͖Δ͔ɻ → Ͳ͏͢Ε͹៉ྷͳίϯϙʔωϯτ෼ׂ͕Ͱ͖Δͷ͔ɺ ೔ʑ೰ΜͰ͓Γ·͢

36. 36.

    https://www.mercari.com/jp/jobs/