Gotanda.js #3 https://gotandajs.connpass.com/event/26027/
ίϯϙʔωϯτ࣌ͷCSS ઃܭGotanda.js #3
View Slide
@hoto17296• גࣜձࣾΨΠΞοΫε• Gotanda.js ओ࠻
ίϯϙʔωϯτࢦ• ৼΔ͍ (JavaScript) ͱ ߏ (HTML) Λ ͻͱͭͷίϯϙʔωϯτͱͯ͠هड़Ͱ͖ͯศར• มߋ͍͢͠• ࠶ར༻͍͢͠
ߏৼΔ͍
ݟͨ (CSS) Ͱ ίϯϙʔωϯτࢦ͍ͨ͠ʂ͋ͬͪͱͬͪ͜Ͱ "ߏ" "ৼΔ͍" Ұॹ͚ͩͲ͍ͨͬͯΔελΠϧ͕ҧͬͯ ίϯϙʔωϯτͷݟ่͕ͨΕΔ Λ͍͗ͨ
CSS ͷείʔϓCSS άϩʔόϧείʔϓͰ͔͠ఆٛͰ͖ͳ͍มߋΛՃ͑ΔͱͲ͜ʹӨڹ͢Δ͔Θ͔Βͳ͍
CSS ͷείʔϓด͡Δ͜ͱ͕Ͱ͖ͳ͚ΕίϯϙʔωϯτࢦͰͳ͍ดͨ͡ CSS Λॻ͘͜ͱ͕Ͱ͖ΕίϯϙʔωϯτࢦͰ͖Δ (ʁ)
ดͨ͡ CSS Λॻ͘ํ๏4બ
1. Shadow DOM• Web Components ͷ༷ͷͻͱͭ• Polymer ͑ಈ͘• Chrome ͱ Firefox Ͱ࣮͞Ε͍ͯΔ
ྫɿ video ཁૉͷίϯτϩʔϥ
1. Shadow DOM• ࣅඇ͡Όͳ͘ϚδΜͷϩʔΧϧείʔϓ• ເෆ҆ͨ͘͞Μ٧·͍ͬͯΔ• ۀͰ͏ͷ·༷ͩࢠݟ͍ͨ͠ؾ࣋ͪ• Electron ͰͳΒ͑ͦ͏
2. CSS in JS• ίϯϙʔωϯτʹελΠϧΛهड़͢Δ• React: CSS in JS• React ίϯϙʔωϯτʹॻ͖• Radium• (ଞʹ͍͔ͭ͘πʔϧ͋Δׂ͕Ѫ)
+4ΦϒδΣΫτͱͯ͠ελΠϧΛॻ͘ద༻ྫɿ React ίϯϙʔωϯτʹॻ͖
2. CSS in JS• ཧతͳΧλνͩͱࢥ͏͕ɺԿ͔ͱͭΒ͍• طଘ CSS ͔ΒͷҠߦ͕μϧ͍• ಉ͡ϑΝΠϧʹελΠϧ·Ͱॻ͍ͪΌ͏ͱ ίϯϙʔωϯτͷݟӫ͕͑Α͘ͳ͍• ࢠཁૉʹΫϥε͚ͭΔͷखؒ• ٖࣅཁૉϝσΟΞΫΤϦ͕͑ͳ͍
3. ໋໊نͰറΔ• OOCSS, BEM, SMACSS, FLOCSS ͳͲ• CSS ʹடংΛͨΒͨ͢Ίͷઃܭख๏• CSS ͷϧʔϧΛΧςΰϥΠζ͢Δ• ΧςΰϦ͝ͱͷنଇʹैͬͯΫϥε໊͕ܾ·Δ
ྫɿ SMACSS• Base: ཁૉͦͷͷͷελΠϧ• Layout: ϖʔδΛׂ͢ΔελΠϧ• Module: ࠶ར༻Մೳͳύʔπ• State: Layout Module ͷঢ়ଶ• Theme: αΠτશମͷ৭େ͖͞ͳͲͷςʔϚίϯϙʔωϯτͱରʹ͢Δͱྑ͍
3. ໋໊نͰറΔ• ϕλʔͳํ๏ͬΆ͍• ͍͘͠ (ཁग़య)• ʮӡ༻ͰΧόʔʯͰଥڠͯ͠Δײͳ͍Ͱ͔͢• ͍ͪͲ໋໊نΛറΔͱมߋͮ͠Β͍• ࡞Γ࢝Ίʹ໋໊نͰΉͷ͍ͬͨͳ͍• ͬͱΧδϡΞϧʹॻ͍͍͖͍ͯͨ
4. CSS Modules• Ϋϥε໊ΛϋογϡԽ͢Δ͜ͱʹΑͬͯ (࣮࣭) ϩʔΧϧείʔϓʹͳΔ• webpack ͷ css-loader Λ͏ͱ؆୯• Browserify ൛ highly experimental• (ͦΕҎ֎Α͘Θ͔Βͳ͍)
FYQPSUDPNQJMFద༻ʊਓਓਓਓਓʊʼɹ͍͢͝ɹʻʉ:?:?:?:ʉ
CSS Modules• ࠓ·ͰͲ͓Γͷ CSS Λॻ͘ײ͡Ͱ CSS in JS Ͱ͖Δ• ໋໊نͱ͔ߟ͑ͣʹϩʔΧϧείʔϓʹͰ͖Δ• ࡶʹ CSS ॻ͚ͯ࠷ߴ• webpack ͬͯΔͳΒ͏͜ΕͰ͍͍ͷͰʁ
ดͨ͡ CSS Λॻ͘ํ๏1. Shadow DOM2. CSS in JS3. ໋໊نͰറΔ4. CSS Modules
·ͱΊɿ ดͨ͡ CSS Λॻ͘ํ๏• webpack ͳΒ css-loader ͑Αͦ͞͏• ͦΕҎ֎໋໊نͰറΔͷ͕ແ• ಛघͳέʔε (Electron ͱ͔) Ͱ͋Ε Shadow DOM ΛͬͯΈ͍͍͔ͯ
ͬͯͯࢥͬͨ͜ͱ• ͪΌΜͱίϯϙʔωϯτઃܭ͓͚ͯ͠ CSS Λॻ͘ͷͥΜͥΜͭΒ͘ͳ͍• ઃܭָͩ͠ɺมߋ༰қ• ٕज़πʔϧͷྲྀߦΓഇΓ͋ΕͲɺ ίϯϙʔωϯτࢦͷߟ͑ํͦͷͷ ഇΕΔ͜ͱͳ͍ͣ
ίϯϙʔωϯτࢦ͍͍ͧ (^ω^)
hoto17296
datarian
kaznishi
sagara
ayanonanjo
yhana
nozomiito
xibuka
hamakou108
renjikari
sbtechnight
taketakekaho
reverentgeek
jponch
sferik
notwaldorf
malarkey
rasmusluckow
aarron
brianwarren
samlambert
keithpitt
kastner
soudai