Kyotojs15_-_handy-media-query.pdf

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

Transcript

1. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ ࣗݾ঺հ
2. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு ࣗݾ঺հ
3. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ
4. ແ 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ
5. $44
   JO
   +4Ͱ
   ϝσΟΞΫΤϦΛ
   ύοͱ΍Δ
6. TUZMFEDPNQPOFOUTͰ
   ϝσΟΞΫΤϦΛ
   ύοͱ΍Δ
7. FNPUJPOͰ
   ϝσΟΞΫΤϦΛ
   ύοͱ΍Δ
8. ಥવͰ͕͢
9. ͜ͷͳ͔ʹ ϝσΟΞΫΤϦͷه๏͕ ύοͱग़Δ͓ํ͸ ͍Βͬ͠Ό͍·͔͢ʁ
10. ग़Δͻͱ
11. εΰΠ
12. ग़ͳ͍ͻͱ
14. ReactͷίϯϙʔωϯτΛ ॻ͍͍ͯͨΜͰ͢Α ͋Δ೔
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 ίϩϯ ΫΦʔτͰғΘͳ͍
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Ͱॻ͍͍ͯ·͢
47. Α͏͢ΔʹϝσΟΞΫΤϦ͘Μ
48. Φϓγϣϯ΋͋ΔΑ
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 ୹໊͍લͰΤΫεϙʔτ͢Δͱศར
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. ϝσΟΞΫΤϦΛ ύοͱ΍Δ͸ͳ͠Ͱͨ͠ ऴ