Kyotojs15_-_handy-media-query.pdf

C6b1c59927729394dcc84b1b8bc86394?s=47 1natsu
January 12, 2019

 Kyotojs15_-_handy-media-query.pdf

Kyoto,js 15で話したスライドです
styled-componentsやemotionでメディアクエリをパッとやるという内容で喋りました

C6b1c59927729394dcc84b1b8bc86394?s=128

1natsu

January 12, 2019
Tweet

Transcript

  1. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ ࣗݾ঺հ

  2. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு ࣗݾ঺հ

  3. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ

  4. ແ 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ

  5. $44JO+4Ͱ ϝσΟΞΫΤϦΛ ύοͱ΍Δ

  6. TUZMFEDPNQPOFOUTͰ ϝσΟΞΫΤϦΛ ύοͱ΍Δ

  7. FNPUJPOͰ ϝσΟΞΫΤϦΛ ύοͱ΍Δ

  8. ಥવͰ͕͢

  9. ͜ͷͳ͔ʹ ϝσΟΞΫΤϦͷه๏͕ ύοͱग़Δ͓ํ͸ ͍Βͬ͠Ό͍·͔͢ʁ

  10. ग़Δͻͱ

  11. εΰΠ

  12. ग़ͳ͍ͻͱ

  13. None
  14. ReactͷίϯϙʔωϯτΛ ॻ͍͍ͯͨΜͰ͢Α ͋Δ೔

  15. None
  16. ϝσΟΞΫΤϦͷ ॻ͖͔ͨࣗମ͕ ύοͱΘ͔Βͳ͍

  17. @media all and (max-width: 12450px) { … }

  18. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏

  19. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

  20. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature
  21. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature ίϩϯ
  22. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature ίϩϯ ΫΦʔτͰғΘͳ͍
  23. None
  24. ͦ΋ͦ΋

  25. ຖճॻ͘ͷݫ͍͠

  26. ୯Ґ໰୊͕͋ΔͷͰ emͰॻ͖͍ͨ https://zellwk.com/blog/media-query-units/

  27. ϒϨʔΫϙΠϯτ͸ ͍͍ܾͨͯ·ͬͯ͘ΔͷͰ ཧ૝ͱͯ͠͸͜͏ॻ͖͍ͨ

  28. ίϯϙʔωϯτಠࣗͷ ΞϓϦέʔγϣϯͰ ڞ௨Ͱ͸ͳ͍ہॴతͳ ϝσΟΞΫΤϦ͕ग़͖ͯͨ

  29. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ

  30. ͋Δ͜ͱʹ͸͋Δ

  31. TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ

  32. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ

  33. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒

  34. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒ ࢖͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)

  35. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒ Αͦ͞͏Ͱ͸͋Δ͕…ઐ༻ ࢖͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)

  36. FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  37. ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  38. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  39. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰCSSΛॻ͘ ॱ൪͸ϝσΟΞΫΤϦॱ ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  40. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰCSSΛॻ͘ ॱ൪͸ϝσΟΞΫΤϦॱ ഑ྻͰϒϨʔΫϙΠϯτ ύοͱΈͯΘ͔ΒΜ͘ͳ͍ʁ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  41. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ

  42. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ ͦΜͳ͏·͍࿩͸ͳ͍

  43. ͏·͍͜ͱ ͢Δ͔͠ͳ͍

  44. yarn add @1natsu/handy-media-query

  45. TypeScriptͰॻ͍͍ͯ·͢

  46. None
  47. Α͏͢ΔʹϝσΟΞΫΤϦ͘Μ

  48. Φϓγϣϯ΋͋ΔΑ

  49. None
  50. ͔͍͔ͭͨ

  51. mediaQuery.js

  52. mediaQuery.js ϝσΟΞΫΤϦ͘Μ

  53. mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ

  54. mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ px→emม׵͘Μ

  55. mediaQuery.js

  56. mediaQuery.js Α͘࢖͏ϒϨʔΫϙΠϯτΛఆٛ (breakpoints.jsΈ͍ͨͳผϑΝΠϧʹ੾Γग़ͯ͠΋OK)

  57. mediaQuery.js

  58. mediaQuery.js value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ

  59. mediaQuery.js খ೉͍͠ϝσΟΞΫΤϦ͸ఘΊͯॻ͘… value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ

  60. mediaQuery.js ୹໊͍લͰΤΫεϙʔτ͢Δͱศར

  61. None
  62. None
  63. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport

  64. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧ಺ͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢Ε͹OK

  65. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧ಺ͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢Ε͹OK ہॴతͳϒϨʔΫϙΠϯτ͕ग़ͯ΋γϡοͱॻ͚Δ

  66. ൺֱ

  67. ൺֱ

  68. ݟ௨͕͠Α͘ͳͬͯ ͳΜͱͳ͘εοΩϦ

  69. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ

  70. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ

    • mqΦϒδΣΫτΛݟΕ͹Α͍ • ہॴతͳϝσΟΞΫΤϦ΋OK • ݟ௨͕͠Α͘ͳΔ
  71. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ

    • mqΦϒδΣΫτΛݟΕ͹Α͍ • ہॴతͳϝσΟΞΫΤϦ΋OK • ݟ௨͕͠Α͘ͳΔ • ϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍ • CSS in JSଆͷΞοϓσʔτͰ
 ഁ໓͠ͳ͍(͔΋)
  72. ϝσΟΞΫΤϦΛ ύοͱ΍ΕΔΑ͏ʹͳͬͯ ͢͜͠Α͘ͳͬͨ (ݸਓൺ)

  73. ϝσΟΞΫΤϦΛ ύοͱ΍Δ͸ͳ͠Ͱͨ͠ ऴ