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

1bf676e4bd36a48bf616c82d6f52c83a?s=47 sota ohara
January 24, 2018

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

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

1bf676e4bd36a48bf616c82d6f52c83a?s=128

sota ohara

January 24, 2018
Tweet

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/