Kyoto,js 15で話したスライドです styled-componentsやemotionでメディアクエリをパッとやるという内容で喋りました
1natsuΘ͔ͬͨͨΊ͕͠ͳ͍ࣗݾհ
View Slide
1natsuΘ͔ͬͨͨΊ͕͠ͳ͍υۓுࣗݾհ
1natsuΘ͔ͬͨͨΊ͕͠ͳ͍υۓு དྷͨͱ͖͓ෲݮͬͯͳ͔ͬͨΜͰ͢…ࣗݾհ
ແ 1natsuΘ͔ͬͨͨΊ͕͠ͳ͍υۓு དྷͨͱ͖͓ෲݮͬͯͳ͔ͬͨΜͰ͢…ࣗݾհ
$44JO+4ͰϝσΟΞΫΤϦΛύοͱΔ
TUZMFEDPNQPOFOUTͰϝσΟΞΫΤϦΛύοͱΔ
FNPUJPOͰϝσΟΞΫΤϦΛύοͱΔ
ಥવͰ͕͢
͜ͷͳ͔ʹϝσΟΞΫΤϦͷه๏͕ύοͱग़Δ͓ํ͍Βͬ͠Ό͍·͔͢ʁ
ग़Δͻͱ
εΰΠ
ग़ͳ͍ͻͱ
ReactͷίϯϙʔωϯτΛॻ͍͍ͯͨΜͰ͢Α͋Δ
ϝσΟΞΫΤϦͷॻ͖͔ͨࣗମ͕ύοͱΘ͔Βͳ͍
@media all and (max-width: 12450px) {…}
@media all and (max-width: 12450px) {…}ؙׅހͰғ͏
@media all and (max-width: 12450px) {…}ؙׅހͰғ͏ϓϨϑΟοΫεmin-͔max-
@media all and (max-width: 12450px) {…}ؙׅހͰғ͏ϓϨϑΟοΫεmin-͔max-͜Ε͕media-feature
@media all and (max-width: 12450px) {…}ؙׅހͰғ͏ϓϨϑΟοΫεmin-͔max-͜Ε͕media-featureίϩϯ
@media all and (max-width: 12450px) {…}ؙׅހͰғ͏ϓϨϑΟοΫεmin-͔max-͜Ε͕media-featureίϩϯΫΦʔτͰғΘͳ͍
ͦͦ
ຖճॻ͘ͷݫ͍͠
୯Ґ͕͋ΔͷͰemͰॻ͖͍ͨhttps://zellwk.com/blog/media-query-units/
ϒϨʔΫϙΠϯτ͍͍ܾͨͯ·ͬͯ͘ΔͷͰཧͱͯ͜͠͏ॻ͖͍ͨ
ίϯϙʔωϯτಠࣗͷΞϓϦέʔγϣϯͰڞ௨Ͱͳ͍ہॴతͳϝσΟΞΫΤϦ͕ग़͖ͯͨ
ͳΜ͔͏·͍͜ͱͳΒΜ͔ͳʙ
͋Δ͜ͱʹ͋Δ
TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ
ϒϨʔΫϙΠϯτఆٛTUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ
ϒϨʔΫϙΠϯτఆٛTUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫstyled-componentsઐ༻ϝσΟΞΫΤϦϥούʔͳΦϒδΣΫτΛ࡞
ϒϨʔΫϙΠϯτఆٛTUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫstyled-componentsઐ༻ϝσΟΞΫΤϦϥούʔͳΦϒδΣΫτΛ࡞͍ͬͯ͘(ςϯϓϨʔτϦςϥϧ͕ೖΕࢠʹͳΔ)
ϒϨʔΫϙΠϯτఆٛTUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫstyled-componentsઐ༻ϝσΟΞΫΤϦϥούʔͳΦϒδΣΫτΛ࡞Αͦ͞͏Ͱ͋Δ͕…ઐ༻͍ͬͯ͘(ςϯϓϨʔτϦςϥϧ͕ೖΕࢠʹͳΔ)
FNPUJPOͷGBDFQBJOUΛ͏ྫ
ྻͰϒϨʔΫϙΠϯτFNPUJPOͷGBDFQBJOUΛ͏ྫ
ϝσΟΞΫΤϦ࡞ྻͰϒϨʔΫϙΠϯτFNPUJPOͷGBDFQBJOUΛ͏ྫ
ϝσΟΞΫΤϦ࡞ྻͰCSSΛॻ͘ॱ൪ϝσΟΞΫΤϦॱྻͰϒϨʔΫϙΠϯτFNPUJPOͷGBDFQBJOUΛ͏ྫ
ϝσΟΞΫΤϦ࡞ྻͰCSSΛॻ͘ॱ൪ϝσΟΞΫΤϦॱྻͰϒϨʔΫϙΠϯτύοͱΈͯΘ͔ΒΜ͘ͳ͍ʁFNPUJPOͷGBDFQBJOUΛ͏ྫ
ͳΜ͔͏·͍͜ͱͳΒΜ͔ͳʙͦΜͳ͏·͍ͳ͍
͏·͍͜ͱ͢Δ͔͠ͳ͍
yarn add @1natsu/handy-media-query
TypeScriptͰॻ͍͍ͯ·͢
Α͏͢ΔʹϝσΟΞΫΤϦ͘Μ
Φϓγϣϯ͋ΔΑ
͔͍͔ͭͨ
mediaQuery.js
mediaQuery.jsϝσΟΞΫΤϦ͘Μ
mediaQuery.jsϝσΟΞΫΤϦ͘ΜϝσΟΞΫΤϦ͓·ͱΊ͘Μ
mediaQuery.jsϝσΟΞΫΤϦ͘ΜϝσΟΞΫΤϦ͓·ͱΊ͘Μpx→emม͘Μ
mediaQuery.jsΑ͘͏ϒϨʔΫϙΠϯτΛఆٛ(breakpoints.jsΈ͍ͨͳผϑΝΠϧʹΓग़ͯ͠OK)
mediaQuery.jsvalue͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ
mediaQuery.jsখ͍͠ϝσΟΞΫΤϦఘΊͯॻ͘…value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ
mediaQuery.js໊͍લͰΤΫεϙʔτ͢Δͱศར
ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport
ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimportςϯϓϨʔτϦςϥϧͳͷͰఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢ΕOK
ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimportςϯϓϨʔτϦςϥϧͳͷͰఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢ΕOKہॴతͳϒϨʔΫϙΠϯτ͕ग़ͯγϡοͱॻ͚Δ
ൺֱ
ݟ௨͕͠Α͘ͳͬͯͳΜͱͳ͘εοΩϦ
• ϝσΟΞΫΤϦΛύοͱੜ• pxΛ͚ͩ͢• emʹมࡁΈ• TSϑϨϯυϦʔ
• ϝσΟΞΫΤϦΛύοͱੜ• pxΛ͚ͩ͢• emʹมࡁΈ• TSϑϨϯυϦʔ• APIͷ౷ҰͰύοͱͳΔ• mqΦϒδΣΫτΛݟΕΑ͍• ہॴతͳϝσΟΞΫΤϦOK• ݟ௨͕͠Α͘ͳΔ
• ϝσΟΞΫΤϦΛύοͱੜ• pxΛ͚ͩ͢• emʹมࡁΈ• TSϑϨϯυϦʔ• APIͷ౷ҰͰύοͱͳΔ• mqΦϒδΣΫτΛݟΕΑ͍• ہॴతͳϝσΟΞΫΤϦOK• ݟ௨͕͠Α͘ͳΔ• ϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍• CSS in JSଆͷΞοϓσʔτͰ ഁ໓͠ͳ͍(͔)
ϝσΟΞΫΤϦΛύοͱΕΔΑ͏ʹͳͬͯ͢͜͠Α͘ͳͬͨ(ݸਓൺ)
ϝσΟΞΫΤϦΛύοͱΔͳ͠Ͱͨ͠ऴ