Tweet
Tweet

Slide 1

Slide 1 text

ίϯϙʔωϯτ࣌୅ͷ CSS ઃܭ Gotanda.js #3

Slide 2

Slide 2 text

@hoto17296 • גࣜձࣾΨΠΞοΫε • Gotanda.js ओ࠻

Slide 3

Slide 3 text

ίϯϙʔωϯτࢦ޲ • ৼΔ෣͍ (JavaScript) ͱ ߏ଄ (HTML) Λ
 ͻͱͭͷίϯϙʔωϯτͱͯ͠هड़Ͱ͖ͯศར • มߋ͠΍͍͢ • ࠶ར༻͠΍͍͢

Slide 4

Slide 4 text

ߏ଄ ৼΔ෣͍

Slide 5

Slide 5 text

ݟͨ໨ (CSS) Ͱ΋
 ίϯϙʔωϯτࢦ޲͍ͨ͠ʂ ͋ͬͪͱͬͪ͜Ͱ "ߏ଄" ΋ "ৼΔ෣͍" ΋
 Ұॹ͚ͩͲ౰͍ͨͬͯΔελΠϧ͕ҧͬͯ
 ίϯϙʔωϯτͷݟͨ໨่͕ΕΔ
 
 Λ๷͍͗ͨ

Slide 6

Slide 6 text

CSS ͷείʔϓ໰୊ CSS ͸άϩʔόϧείʔϓͰ͔͠ఆٛͰ͖ͳ͍ มߋΛՃ͑ΔͱͲ͜ʹӨڹ͢Δ͔Θ͔Βͳ͍

Slide 7

Slide 7 text

CSS ͷείʔϓ໰୊ ด͡Δ͜ͱ͕Ͱ͖ͳ͚Ε͹ ίϯϙʔωϯτࢦ޲Ͱ͸ͳ͍ ดͨ͡ CSS Λॻ͘͜ͱ͕Ͱ͖Ε͹ ίϯϙʔωϯτࢦ޲Ͱ͖Δ (ʁ)

Slide 8

Slide 8 text

ดͨ͡ CSS Λॻ͘ํ๏ 4બ

Slide 9

Slide 9 text

1. Shadow DOM • Web Components ͷ࢓༷ͷͻͱͭ • Polymer ࢖͑͹ಈ͘ • Chrome ͱ Firefox Ͱ͸࣮૷͞Ε͍ͯΔ

Slide 10

Slide 10 text

ྫɿ video ཁૉͷίϯτϩʔϥ

Slide 11

Slide 11 text

ྫɿ video ཁૉͷίϯτϩʔϥ

Slide 12

Slide 12 text

1. Shadow DOM • ࣅඇ͡Όͳ͘Ϛδ΋ΜͷϩʔΧϧείʔϓ • ເ΋ෆ҆΋ͨ͘͞Μ٧·͍ͬͯΔ • ۀ຿Ͱ࢖͏ͷ͸·༷ͩࢠݟ͍ͨ͠ؾ࣋ͪ • Electron ͰͳΒ࢖͑ͦ͏

Slide 13

Slide 13 text

2. CSS in JS • ίϯϙʔωϯτʹ௚઀ελΠϧΛهड़͢Δ • React: CSS in JS • React ίϯϙʔωϯτʹ௚ॻ͖ • Radium • (ଞʹ΋͍͔ͭ͘πʔϧ͸͋Δׂ͕Ѫ)

Slide 14

Slide 14 text

+4ΦϒδΣΫτ ͱͯ͠ελΠϧΛ ॻ͘ ద༻ ྫɿ React ίϯϙʔωϯτʹ௚ॻ͖

Slide 15

Slide 15 text

2. CSS in JS • ཧ૝తͳΧλνͩͱ͸ࢥ͏͕ɺԿ͔ͱͭΒ͍ • طଘ CSS ͔ΒͷҠߦ͕μϧ͍ • ಉ͡ϑΝΠϧʹελΠϧ·Ͱॻ͍ͪΌ͏ͱ
 ίϯϙʔωϯτͷݟӫ͕͑Α͘ͳ͍ • ࢠཁૉʹΫϥε͚ͭΔͷखؒ • ٖࣅཁૉ΍ϝσΟΞΫΤϦ͕࢖͑ͳ͍

Slide 16

Slide 16 text

3. ໋໊ن໿ͰറΔ • OOCSS, BEM, SMACSS, FLOCSS ͳͲ • CSS ʹடংΛ΋ͨΒͨ͢Ίͷઃܭख๏ • CSS ͷϧʔϧΛΧςΰϥΠζ͢Δ • ΧςΰϦ͝ͱͷنଇʹैͬͯΫϥε໊͕ܾ·Δ

Slide 17

Slide 17 text

ྫɿ SMACSS • Base: ཁૉͦͷ΋ͷͷελΠϧ • Layout: ϖʔδΛ෼ׂ͢ΔελΠϧ • Module: ࠶ར༻Մೳͳύʔπ • State: Layout ΍ Module ͷঢ়ଶ • Theme: αΠτશମͷ৭΍େ͖͞ͳͲͷςʔϚ ίϯϙʔωϯτͱ ରʹ͢Δͱྑ͍

Slide 18

Slide 18 text

3. ໋໊ن໿ͰറΔ • ϕλʔͳํ๏ͬΆ͍ • ͘΍͍͠ (ཁग़య) • ʮӡ༻ͰΧόʔʯͰଥڠͯ͠Δײͳ͍Ͱ͔͢ • ͍ͪͲ໋໊ن໿ΛറΔͱมߋͮ͠Β͍ • ࡞Γ࢝Ίʹ໋໊ن໿Ͱ೰Ήͷ΋͍ͬͨͳ͍ • ΋ͬͱΧδϡΞϧʹॻ͍͍͖͍ͯͨ

Slide 19

Slide 19 text

4. CSS Modules • Ϋϥε໊ΛϋογϡԽ͢Δ͜ͱʹΑͬͯ
 (࣮࣭) ϩʔΧϧείʔϓʹͳΔ • webpack ͷ css-loader Λ࢖͏ͱ؆୯ • Browserify ൛͸ highly experimental • (ͦΕҎ֎͸Α͘Θ͔Βͳ͍)

Slide 20

Slide 20 text

FYQPSU DPNQJMF ద༻ ʊਓਓਓਓਓʊ ʼɹ͍͢͝ɹʻ ʉ:?:?:?:ʉ

Slide 21

Slide 21 text

CSS Modules • ࠓ·ͰͲ͓Γͷ CSS Λॻ͘ײ͡Ͱ CSS in JS Ͱ͖Δ • ໋໊ن໿ͱ͔ߟ͑ͣʹϩʔΧϧείʔϓʹͰ͖Δ • ࡶʹ CSS ॻ͚ͯ࠷ߴ • webpack ࢖ͬͯΔͳΒ΋͏͜ΕͰ͍͍ͷͰ͸ʁ

Slide 22

Slide 22 text

ดͨ͡ CSS Λॻ͘ํ๏ 1. Shadow DOM 2. CSS in JS 3. ໋໊ن໿ͰറΔ 4. CSS Modules

Slide 23

Slide 23 text

·ͱΊɿ ดͨ͡ CSS Λॻ͘ํ๏ • webpack ͳΒ css-loader ࢖͑͹Αͦ͞͏ • ͦΕҎ֎͸໋໊ن໿ͰറΔͷ͕ແ೉ • ಛघͳέʔε (Electron ͱ͔) Ͱ͋Ε͹
 Shadow DOM Λ࢖ͬͯΈͯ΋͍͍͔΋

Slide 24

Slide 24 text

΍ͬͯͯࢥͬͨ͜ͱ • ͪΌΜͱίϯϙʔωϯτઃܭ͓͚ͯ͠͹
 CSS Λॻ͘ͷ͸ͥΜͥΜͭΒ͘ͳ͍ • ઃܭ΋ָͩ͠ɺมߋ΋༰қ • ٕज़΍πʔϧͷྲྀߦΓഇΓ͸͋ΕͲɺ
 ίϯϙʔωϯτࢦ޲ͷߟ͑ํͦͷ΋ͷ͸
 ഇΕΔ͜ͱ͸ͳ͍͸ͣ

Slide 25

Slide 25 text

ίϯϙʔωϯτࢦ޲͸ ͍͍ͧ (^ω^)