Web フロントエンドにおけるコンポーネント化のアプローチ / Component of Web Frontend

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
February 25, 2017

Web フロントエンドにおけるコンポーネント化のアプローチ / Component of Web Frontend

2017年2月25日に開催された Inside Frontend の「Web フロントエンドにおけるコンポーネント化のアプローチ」のセッション資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

February 25, 2017
Tweet

Transcript

  1. 2.
  2. 3.

    !DI ‣ 4IPHP4FOTVJ ‣ BLBDIPO*OUFSOFU ‣ $ZCFS"HFOU *OD ‣ 8FC*OJUJBUJWF$FOUFS

    ‣ 4PGUXBSF&OHJOFFS ‣ 8FCDMJFOUTJEFEFWFMPQNFOU ‣ 0QFO4PVSDF4PGUXBSF
  3. 6.

    $44ךأة؎ٕؖ؎س 䔲儗 ‣ فٗآؙؑز6*ךسًُؗٝزה׃ג ‣ )5.- $44ך朐䡾׾鋅ִ׷⻉׃׋׮ך ‣ ؿٗٝزؒٝسؒٝآص،ָ؝ؾل׃ג⢪ְ׋ְ ‣

    رؠ؎ش٦הך⼿噟䩛媮ה׃ג ‣ 椚䟝فٗآؙؑز6*ך侭椚װⱄⵃ欽ך׋׭ ‣ 植㹋ًٝذشٝأׁ׸זְկ؝ؾلⵃ欽ׅ׵דֹזְ
  4. 11.
  5. 19.
  6. 24.
  7. 27.
  8. 32.

    )5.- $44 %0. 4UPSZCPBSE  7JFX GSBHNFOUYNM 'SBHNFOU 'SBHNFOU 

    "DUJWJUZ 7JFX  7JFX$POUSPMMFS #SPXTFS J04 "OESPJE 鋅׋湡ך㹋鄲 䮶׷莸ְך㹋鄲 )5.- $44 )5.- $44׌ֽأ؝٦فָזְ
  9. 38.

    /* style.css */ .className { color: green; } import styles

    from "./style.css"; element.innerHTML = `<input class="${styles.className}">`;
  10. 39.

    import jss from 'jss'; const styles = jss.createStyleSheet({ className: {

    color: green } }).attach(); element.innerHTML = `<input class="${styles.className}">`;
  11. 41.

    <template> <style> :host { display: inline-block; } </style> <input type="checkbox">

    </template> <script> class SwitchElement extends HTMLElement { constructor() { super(); const o = document.currentScript.ownerDocument; const t = o.querySelector('template'); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(t.content.cloneNode(true)); } } customElements.define('switch-element', SwitchElement); </script>
  12. 42.

    ֿֿתדך㉏겗挿ך侭椚 ‣ ؝ٝه٦طٝزכاؿزؐؑ،ךㅷ颵חꟼ׻׷ ‣ וךأةحؙחְֶג׮ずֿׄהָ鎉ִ׷ ‣ أة؎ٕؖ؎سד겥㖈⻉׃׋㉏겗 ‣ ؝ٝه٦طٝزך盖椚倯岀ה׃ג黝ⴖז䩛媮דכזַ׏׋ ‣

    رؠ؎ش٦הؒٝآص،ך꟦ך䠐陎ך룪뤍 ‣ ؙٓ؎،ٝز؟؎س㹋鄲חꟼ׻׷➂ך⼿⸂ָ♶〳妀 ‣ 8FCؿٗٝزؒٝس㔿剣ך㹋鄲♳ך㉏겗כ鍑寸׃אא֮׷ ‣ ׻ַ׏גכְ׷ֽוծזַזַ㹋騧דֹזְ؎و؝؝
  13. 44.

    耵腉ך娄׫㺔׶BU植㜥 ‣ 铡䖤勞俱ך❛䳔 ‣ Ꟛ涪♳ךًٔحزⱄⵃ欽䚍ծ⥂㸚䚍ծꟚ涪؝أز ‣ ㅷ颵♳ךًٔحزرؠ؎ٝװ⹛⡲ך♧顐䚍 ‣ ֶ✼ְך⡲噟׾㼭ֻׁⴓ䬐 ‣

    ✮劍ׁ׸׷䮶׷莸ְ׾ؒٝآص،ָٖؽُ٦ׅ׷הַ ‣ 6*ך邌植鿇ⴓ׾رؠ؎ش٦ָ㹋鄲׃ג׫׷הַ ‣ ꦄ䱸ׅ׷耵腉ָ実׭׷ֿהך椚鍑
  14. 46.

    نزي،حفז鑧 ‣ 植㜥⚺㼪ך虊ך呎崞⹛ ‣ Ꟛ涪فٗإأ⻉ׅ׷ֿהדך㹀滠 ‣ 竰竲ׅ׷呎孡ָ㉏׻׸׷ ‣ 䩛岀٥ؿٖ٦يٙ٦ؙך㼪Ⰵ ‣

    Ꟛ涪鄩ꆀָ֮׷ז׵穈籼涸鍑寸״׶植㹋涸 ‣ 䧭⸆✲⢽⻉ ⠓爡 鿇縭 فٗآؙؑز Ꟛ涪罏 ̓