Kyotojs15_-_handy-media-query.pdf

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

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