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

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

Transcript

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

   View Slide

2. վΊɻɻ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ελΠϦϯά͢ΔࡍʹٻΊΔ΋ͷ
   - component ͝ͱʹείʔϓΛ੾Γ͍ͨ
   - ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔஌Γ͍ͨ
   - CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠
   - ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ
   - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ
   - stylelint ࢖͍͍ͨ
   - ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕ు͔Εͳ͍
   

   View Slide

8. ελΠϦϯάͷํ๏
   - CSS Modules
   - CSS in JS
   - ී௨ʹCSSΛॻ͘
   ʢBEMͳͲͰʣ
   

   View Slide

9. ελΠϦϯάͷํ๏
   - CSS Modules
   - CSS in JS
   - ී௨ʹCSSΛॻ͘
   ʢBEMͳͲͰʣ
   

   View Slide

10. CSS in JS (template literal)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. styled-components
    

    View Slide

15. styled-components
    

    View Slide

16. ελΠϦϯάʹٻΊΔ΋ͷ
    - component ͝ͱʹείʔϓΛ੾Γ͍ͨ
    - ͦͷελΠϧ͕Ͳ͜Ͱ࢖ΘΕ͍ͯΔ͔஌Γ͍ͨ
    - CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠
    - ΤσΟλͷγϯλοΫεϋΠϥΠτ΍ิ׬ػೳ͕࢖͍͍ͨ
    - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ
    - stylelint ࢖͍͍ͨ
    - ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕ు͔Εͳ͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠
    

    View Slide

23. CSS ͱ JS Ͱ஋Λڞ༗͍ͨ͠
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. stylelint ൐ŧƂŧ
    

    View Slide

29. stylelint ൐ŧƂŧ
    

    View Slide

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

    View Slide

31. ಛఆͷπʔϧΛ࢖Θͳͯ͘΋ JS ͷΤϥʔ͕Ͱͳ͍
    - CSS Modules ͷωοΫ
    - Webpack ͳͲͰઃఆΛॻ͔ͳ͍ͱ JS ͷΤϥʔ͕ు͔Ε
    ͯ͠·͏͕ɺwebpack ʹґଘͨ͘͠ͳ͍ɻ
    

    View Slide

32. ͳͥ styled-components ͔
    

    View Slide

33. ͳͥ styled-components ͔
    - template literal Λ༻͍͍ͯΔͳ͔ͰҰ൪ star ਺͕ଟ͘ɺ

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

    View Slide

34. Ͱ΋ɻɻɻ
    

    View Slide

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

    View Slide

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

    View Slide