WebσβΠφʔʹฉ͖͍ͨ͜ͱ Co-EdoͰΤϯδχΞɾWebσβΠφʔҿΈձ 2017.12.8 tipo159 

LT಺༰ • 12/6ͷUX JAM 22Ͱ࿩ͨ͠WebσβΠφʔͷํɿʮίϯϙʔωϯτ Λ࢖ͬͯ͸͍Δ͕ɼແବͳ࡞ۀ͕૿͑Δ͔Βݏ͍ʯ • ผͷํɿࠓ೔Web ComponentʹΑͬͯCSSͷॻ͖ํ͕Ͳ͏มΘΔ͔ Λ࿩͢༧ఆͱݴͬͨΒɼʮWebσβΠφʔʹίʔσΟϯάدΓͷ࿩ ͸ฉ͍ͯ΋Β͑ͳ͍ͷͰ͸ʯ • ݸਓతʹWebσβΠφʔʹظ଴͢Δ͜ͱΛ࿩ͯ͠ɼͦΕ͕Ͳͷఔ౓ ड͚ೖΕΒΕΔͷ͔Λฉ͍ͯΈ͍ͨ • Ҏ߱ͷεϥΠυͷ྘ͷจࣈ͕ظ଴͢Δ͜ͱ 2 

ίϯϙʔωϯτԽ͸ආ͚ΒΕͳ͍ • Material Components for the webͳͲͷCSSϑϨʔϜϫʔΫ͚ͩͰ ͳ͘ɼReactɾVue.jsɾAngularͳͲͷJavaScriptϑϨʔϜϫʔΫ΋ ίϯϙʔωϯτΛ࢖͍ͬͯΔ •W3CͰWebίϯϙʔωϯτͷඪ४Խ͕ਐΜͰ͍Δ • Shadow DOM v1͸࡞ۀ૲Ҋ(Working Draft)͕ͩɼChrome, Chrome for Android, Safari, iOS SafariͰ࣮૷ࡁΈͰɼFirefox, EdgeͰ࣮૷த • AtomicσβΠϯʹج͍ͮͯɼUIίϯϙʔωϯτͷઃܭͯͩ͘͠͞ ͍ 3 

WebσβΠφʔͷ໾ׂ • WebΫϦΤʔλʔϘοΫεͷʮ͜Ε͔ΒͷWebσβΠϯ͸ɺίϯϙʔωϯτԽΛҙࣝ͠Α ͏ʯͱ͍͏هࣄͷʮ͜Ε͔ΒͷWebσβΠϯͷ੡࡞खॱ͸ʁʯʹ 1. ϓϥϯχϯά 2. αΠτϚοϓ࡞੒ 3. ϫΠϠʔϑϨʔϜɾϓϩτλΠϓ࡞੒ 4. ελΠϧΨΠυ࡞੒ɾίϯϙʔωϯτσβΠϯ 5. ֤σόΠεʹରԠͨ͠ը໘σβΠϯ 6. ը૾ͷॻ͖ग़͠ 7. HTMLϚʔΫΞοϓ 8. CSSͰ૊Έཱͯɾ૷০ 9. WebαΠτެ։ ͱॻ͔Ε͍ͯ·͕ͨ͠ɼWebσβΠφʔ͕1͔ΒࢀՃ͢Δ͜ͱ͸Ͳͷ͘Β͍͋Γ·͔͢ʁ https://www.webcreatorbox.com/inspiration/component-design 4 

ελΠϧΨΠυ͕ߋ৽͞Εͳ͍ͷ͸ͳ͔ͥʁ • WebΛݕࡧ͢Δͱʮ࠷ॳʹ࡞੒ͨ͠ελΠϧΨΠυ͕ɼߋ৽͞Εͣ ʹܗ֚Խ͢Δͱ͍͏ࣄྫʯ͕ଟ਺ݟ͔͕ͭͬͨɼελΠϧΨΠυ͕ ߋ৽͞Εͳ͍ͷ͸ͳͥͰ͔͢ʁ • WebΫϦΤʔλʔϘοΫεͷʮϒϥ΢β্ͰελΠϧΨΠυ͕࡞Ε ΔFrontifyΛࢼͯ͠ΈͨʯͰ঺հ͞Ε͍ͯΔɼFrontify Style Guideͷ Α͏ͳπʔϧΛར༻͢Δ͜ͱͰߋ৽ͷखؒΛ࡟ݮͰ͖ΔͷͰ͸ʁ https://www.webcreatorbox.com/webinfo/style- guide-frontify https://frontify.com/styleguide 5 

σβΠφʔͱΤϯδχΞͷڞಉ࡞ۀํ๏ • CSSϑΝΠϧΛϝʔϧ౳Ͱ΍ΓऔΓ <- ϋοΧιϯͰܦݧ͋Γ • GitHub౳ͰCSSϑΝΠϧΛڞ༗ • Storybook(React, React Native, Vue.jsʹରԠ)ͷΑ͏ͳUI։ൃπʔϧ https://storybook.js.org/ • InVisionͷΑ͏ͳϓϩτλΠϓ։ൃπʔϧ https://invisionapp.com/ • ReactStudio(ReactʹରԠ)ͷΑ͏ͳΞϓϦέʔγϣϯ։ൃπʔϧ https://reactstudio.com/ 6 

౰ॳ࿩ͦ͏ͱߟ͍͑ͯͨ͜ͱ • Shadow DOM v1ͰScoped CSSͰɼCSSηϨΫλʔͷ໊લͷڝ߹ ͕ແ͘ͳΔ • BEMͷΑ͏ͳ௕໋໊͍نଇ͸࢖Θͳͯ͘ྑ͘ͳΔ • CSS Containment Module Level 1(קࠂީิ:Candidate Recommendation)ͷcontainଐੑΛ࢖͏ͱɼʮཁૉͱͦͷ಺༰͕ɼ จॻ໦ͷ࢒Γ͔ΒՄೳͳݶΓಠཱͰ͋Δʯ͜ͱΛࢦࣔͰ͖ΔΑ͏ʹ ͳΔɽ • Chrome, Chrome for Android͸࣮૷ࡁΈɼ 7