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

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

5f533aeab28ed4f70c26e336e71296f7?s=47 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

5f533aeab28ed4f70c26e336e71296f7?s=128

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ͷܧ ঝͰఏڙ