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

Kyotojs15_-_handy-media-query.pdf

1natsu
January 12, 2019

 Kyotojs15_-_handy-media-query.pdf

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

1natsu

January 12, 2019
Tweet

More Decks by 1natsu

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. 1natsu
    Θ͔ͬͨͨΊ͕͠ͳ͍
    υۓு

    དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢…
    ࣗݾ঺հ

    View Slide

  4. ແ 1natsu
    Θ͔ͬͨͨΊ͕͠ͳ͍
    υۓு

    དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢…
    ࣗݾ঺հ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. ಥવͰ͕͢

    View Slide

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

    View Slide

  10. ग़Δͻͱ

    View Slide

  11. εΰΠ

    View Slide

  12. ग़ͳ͍ͻͱ

    View Slide

  13. View Slide

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

    View Slide

  15. View Slide

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

    View Slide

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

    }

    View Slide

  18. @media all and (max-width: 12450px) {

    }
    ؙׅހͰғ͏

    View Slide

  19. @media all and (max-width: 12450px) {

    }
    ؙׅހͰғ͏
    ϓϨϑΟοΫε͸min-͔max-

    View Slide

  20. @media all and (max-width: 12450px) {

    }
    ؙׅހͰғ͏
    ϓϨϑΟοΫε͸min-͔max-
    ͜Ε͕media-feature

    View Slide

  21. @media all and (max-width: 12450px) {

    }
    ؙׅހͰғ͏
    ϓϨϑΟοΫε͸min-͔max-
    ͜Ε͕media-feature
    ίϩϯ

    View Slide

  22. @media all and (max-width: 12450px) {

    }
    ؙׅހͰғ͏
    ϓϨϑΟοΫε͸min-͔max-
    ͜Ε͕media-feature
    ίϩϯ
    ΫΦʔτͰғΘͳ͍

    View Slide

  23. View Slide

  24. ͦ΋ͦ΋

    View Slide

  25. ຖճॻ͘ͷݫ͍͠

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. ͋Δ͜ͱʹ͸͋Δ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. TypeScriptͰॻ͍͍ͯ·͢

    View Slide

  46. View Slide

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

    View Slide

  48. Φϓγϣϯ΋͋ΔΑ

    View Slide

  49. View Slide

  50. ͔͍͔ͭͨ

    View Slide

  51. mediaQuery.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. mediaQuery.js

    View Slide

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

    View Slide

  57. mediaQuery.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. View Slide

  62. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. ൺֱ

    View Slide

  67. ൺֱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ഁ໓͠ͳ͍(͔΋)

    View Slide

  72. ϝσΟΞΫΤϦΛ
    ύοͱ΍ΕΔΑ͏ʹͳͬͯ
    ͢͜͠Α͘ͳͬͨ
    (ݸਓൺ)

    View Slide

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

    View Slide