Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Componentsが破った約束とは / What is the broken promise of Web Components

tipo159
November 18, 2017

Web Componentsが破った約束とは / What is the broken promise of Web Components

"Regarding the broken promise of Web Components"の内容とWeb Componentsライブラリの紹介
秋のJavaScript祭 in mixi 2017のLT

tipo159

November 18, 2017
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. Web Components͕ഁͬͨ໿ଋͱ͸ ळͷJavaScriptࡇ in mixi 2017 2017.11.18 tipo159

  2. ൃද಺༰ • ”Regarding the broken promise of Web Components”ͷ೔ ຊޠͷهࣄ͕ݟ͔ͭΒͳ͔ͬͨͷͰࠓճ঺հ

    • ”The broken promise of Web Components”ʹର͢Δճ౴ʁ • https://dmitriid.com/blog/2017/03/the-broken-promise-of- web-components/ • http://robdodson.me/regarding-the-broken-promise-of-web- components/ 2
  3. ϕϯμʔϩοΫΠϯ • Webඪ४Λ໨ࢦ͍ͯͨ͠ʹ΋ؔΘΒͣɼطଘͷWeb ComponentsΛ࢖͏ͨΊʹ͸Polymer͕ඞਢ ಛʹ൓࿦ͳ͠ • WEBCOMPONENTS.ORGʹొ࿥͞Ε͍ͯΔWeb Componentsͷ΄ͱΜͲ ͕Polymerʹґଘ͠ɼͦͷόʔδϣϯ΋༷ʑ 3

  4. DOM • ࣮DOMΛॻ͖׵͑Δͷ͸஗͍ • DOMૢ࡞API͕ॻ͖ʹ͍͘ Ծ૝DOMͷDOMॻ͖׵͑଎౓͸଎͍͕ɼϥΠϒϥϦϩʔ υ͕࣌ؒ௕͍ DOMૢ࡞APIΑΓJSXͱԾ૝DOMͷํ͕ྑ͍͜ͱ͸ಉҙ 4

  5. σʔλόΠϯσΟϯά • σʔλόΠϯσΟϯά͕ඪ४Խ͞Ε͍ͯͳ͍ Web ComponentsఏҊ࣌ʹModel Driven Views(MDL)͕ಉ ࣌ʹఏҊ͞Ε͕ͨɼMDL͸ඪ४Խ͞Ε͍ͯͳ͍ʢεςʔΫ ϗϧμؒͷ߹ҙ͕ग़དྷͳ͔ͬͨΒ͍͠ʣ PolymerͷσʔλόΠϯσΟϯά͸MDLΛϕʔεʹ͍ͯ͠Δ

    Β͍͠ 5
  6. จࣈྻΞτϦϏϡʔτ • จࣈྻΞτϦϏϡʔτ͸͍͚͍ͯͳ͍ Custom Element͸୯ͳΔclassΠϯελϯεͳͷͰɼ ES2015ͷgetters/settersͰΠϯλϑΣʔεΛఏڙ͢Ε͹Α ͍ 6

  7. Web ComponentϥΠϒϥϦ 7 ໊শ ֓ཁ αϙʔτاۀ 1PMZNFS w 0OFXBZͱ5XPXBZͷσʔλόΠϯσ ΟϯάΛఏڙ

    w ֤छ1PMZpMMΛఏڙ (PPHMF 4LBUFKT w ؔ਺ܕͰޮ཰ͷΑ͍8FC$PNQPOFOU Λ࡞੒͢ΔͨΊͷϥΠϒϥϦ w 3FBDU౳ͷଞϑϨʔϜϫʔΫͱγʔϜ Ϩεʹಈ࡞ 95BH w 8FC$PNQPOFOUඪ४"1*ͷϥούʔ ϥΠϒϥϦ .JDSPTPGU 4MJNKT w 8FC$PNQPOFOUʹ֦ுΠϯλϑΣʔ εΛఏڙ͢ΔܰྔϥΠϒϥϦ w σʔλόΠϯσΟϯά͸&4ͷܧ ঝͰఏڙ