Upgrade to Pro — share decks privately, control downloads, hide ads and more …

モダンな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

More Decks by sota ohara

Other Decks in Programming

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/