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

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

Shogo Sensui
February 25, 2017

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

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

Shogo Sensui

February 25, 2017
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. *OTJEF'SPOUFOE

    !DI4IPHP4FOTVJ
    8FCؿٗٝزؒٝسחֶֽ׷
    ؝ٝه٦طٝز⻉ך،فٗ٦ث

    View full-size slide

  2. !DI
    ‣ 4IPHP4FOTVJ
    ‣ BLBDIPO*OUFSOFU
    ‣ $ZCFS"HFOU *OD
    ‣ 8FC*OJUJBUJWF$FOUFS
    ‣ 4PGUXBSF&OHJOFFS
    ‣ 8FCDMJFOUTJEFEFWFMPQNFOU
    ‣ 0QFO4PVSDF4PGUXBSF

    View full-size slide

  3. ?㼰׃⵸ך8FCחֶֽ׷
    ؝ٝه٦طٝزחꟼׅ׷鑧겗

    View full-size slide

  4. أة؎ٕؖ؎س

    View full-size slide

  5. $44ךأة؎ٕؖ؎س 䔲儗

    ‣ فٗآؙؑز6*ךسًُؗٝزה׃ג
    ‣ )5.-$44ך朐䡾׾鋅ִ׷⻉׃׋׮ך
    ‣ ؿٗٝزؒٝسؒٝآص،ָ؝ؾل׃ג⢪ְ׋ְ
    ‣ رؠ؎ش٦הך⼿噟䩛媮ה׃ג
    ‣ 椚䟝فٗآؙؑز6*ך侭椚װⱄⵃ欽ך׋׭
    ‣ 植㹋ًٝذشٝأׁ׸זְկ؝ؾلⵃ欽ׅ׵דֹזְ

    View full-size slide

  6. !
    ⡦׾鍑寸ׅ׸לְְךַ
    劤颵涸ח鋅ִגזַ׏׋

    View full-size slide

  7. ؝ٝه٦طٝزהכ
    ְ׏׋ְז׿זךַ
    ?

    View full-size slide

  8. اؿزؐؑ،חְֶגכ暴㹀ך堣腉ծ暴ח
    ⱄⵃ欽׾罋ִג害欽חꟚ涪ׁ׸׋׮ך
    չ؝ٝه٦طٝزպהכ˘

    View full-size slide


  9. 圫ղזꟚ涪؝ٝذؗأز
    $MJFOU4JEF
    #SPXTFS J04 "OESPJE
    4FSWFS4JEF
    8JOEPXT -JOVY 
    ̞

    View full-size slide

  10. ؝ٝه٦طٝزך⣣⦼
    ‣ رؠ؎ٝחְֶג
    ‣ ِ٦ؠ٦؎ٝة٦ؿؑ٦أך♧顐䚍٥害欽䚍
    ‣ 堣腉ח♷ִ׷،ؿؓ٦تٝأ
    ‣ اؿزؐؑ،חְֶג
    ‣ فؚٗٓيךⱄⵃ欽䚍٥害欽䚍
    ‣ ذأةؽٔذ؍

    View full-size slide

  11. ?
    8FCؙٓ؎،ٝز؟؎س
    חֶֽ׷؝ٝه٦طٝز

    View full-size slide

  12. 剑穄䧭卓暟ך⣣⦼׾
    䊩〸׃䖤׷׮ך
    "

    View full-size slide

  13. ֿ׸תדך㉏겗挿
    ‣ ؝ٝه٦طٝزך盖椚䩛媮ך㉏겗
    ‣ ؙٓ؎،ٝز؟؎س㹋鄲ך彘㉏겗
    ‣ ؝ٝه٦طٝز׾㹋植ׅ׷♳דך䪮遭涸铬겗

    View full-size slide

  14. ?
    ؙٓ؎،ٝز؟؎سחֶֽ׷
    ؝ٝه٦طٝزך盖椚倯岀

    View full-size slide

  15. )5.-$44ד⡲䧭ׅ׷
    أة؎ٕؖ؎سכוֲזךַ

    View full-size slide

  16. رؠ؎ٝر٦ة׾⿫罋חׅ׷
    رؠ؎ٝر٦ة׾刿倜ׅ׷
    %FTJHO
    %FWFMPQ
    )5.-$44דⱄ植ׅ׷
    أة؎ٕؖ؎س׾刿倜ׅ׷

    View full-size slide

  17. 铩ָًٝذشٝأׅ׷㉏겗
    ‣ رؠ؎ش٦ָ)5.-$44׾⥜姻♶腉ז׵䝤䩛
    ‣ رؠ؎ش٦͑؝ٝه٦طٝز盖椚罏ז؛٦أָ㣐⼱
    ‣ ♧倯鸐遤ד֮׷ֲ׍כ䛊׵ֻٙ٦ؙ׃זְ
    ‣ ׉׮׉׮؝ٝه٦طٝز鏣鎘כ8FCח⣛㶷׃זְ
    ‣ J04װ"OESPJEד׮؝ٝه٦طٝزך罋ִ倯כずׄ
    ‣ 8FCꣲ㹀ךفٗتؙزז׵葺瘻ַ׮׃׸זְ
    ‣ ؝ٝه٦طٝز♧鋮׾8FCד鋅׸׷ךכ葺ְө

    View full-size slide

  18. رؠ؎ش٦הر؍كٗحػ٦ך⚕倯חծ؝
    ٝه٦طٝزך鏣鎘ה麊欽ח顑⟣׾《׶竲
    ֽ׷䠐陎ָ⵸䲿ח䗳銲׌׏׋
    "ؙٓ؎،ٝز㹋鄲罏ך顑⹡

    View full-size slide

  19. رؠ؎ٝؿ؋؎ٕד盖椚ׅ׷
    ‣ ؝ٝه٦طٝز⽃⡘דⴓⶴׅ׷ךָꅾ銲
    ‣ رؠ؎ش٦ָ竰竲׃גًٝذشٝأדֹ׷
    ‣ 盖椚ׅ׷♳דل٦آ歗꬗הְֲ嚊䙀כ♶銲
    ‣ הכְִծل٦آؿ؋؎ٕכ䗳銲חז׷˘
    ‣ ؝ٝه٦طٝزؿ؋؎ٕ׾⿫撑׃ג圓䧭ׅ׷
    ‣ 1IPUPTIPQכ㢩鿇ؿ؋؎ٕ׾⿫撑〳腉ծ4LFUDIכ♶〳腉

    View full-size slide

  20. 4LFUDI*NQPSU4ZNCPMT
    IUUQTHJUIVCDPNLNFSDTLFUDIJNQPSUTZNCPMT

    View full-size slide

  21. رؠ؎ٝر٦ة׾⿫罋חׅ׷
    رؠ؎ٝر٦ة׾刿倜ׅ׷
    %FTJHO
    %FWFMPQ
    )5.-$44דⱄ植ׅ׷
    أة؎ٕؖ؎س׾刿倜ׅ׷

    View full-size slide

  22. ?
    ؙٓ؎،ٝز؟؎س㹋鄲ך彘

    View full-size slide

  23. ⼿⫴ך׋׭ךرؠ؎ٝ䙼罋ךⱄ圓眠DPVME
    IUUQXXXZBTVIJTBDPNDPVMEBSUJDMFEEEPPVYKPC
    hDPVME

    View full-size slide

  24. Ꟛ涪فٗإأ♳ך䗳搫
    ‣ Ⰻ⡤⫷ך邌植ָ铬ׇ׵׸׷رؠ؎ش٦
    ‣ 㹏⯓פך䲿周ծٌحؙ،حفך⡲䧭ծFUD
    ‣ 銲⟝♶⪒װأ؛آُ٦ٕ㖇鶕ח״׶ծ䖓䩛חז׷
    ‣ 㹋鄲ך⵸䲿ד֮׶ծ㹋鄲פך⣛㶷ָ䓼ְ
    ‣ 歗꬗؟؎ؤװ堣腉ך罋䣁怩׸כ㹋鄲٥麊欽؝أزח湫穠ׅ׷
    ‣ رؠ؎ش٦הؒٝآص،ך娄׫㺔׶ָ実׭׵׸׷

    View full-size slide

  25. رؠ؎ش٦כ㹋鄲׾椚鍑׃
    ؒٝآص،כرؠ؎ٝ׾椚鍑ׇ״

    View full-size slide

  26. 8FCؿٗٝزؒٝسך
    $44הְֲ⡂גꬊז׷铬겗
    ?

    View full-size slide

  27. فٓحزؿؓ٦ي嫣ך
    ؝ٝه٦طٝز׾䧭ׅ䪮遭

    View full-size slide

  28. )5.-$44 %0.
    4UPSZCPBSE
    7JFX
    GSBHNFOUYNM
    'SBHNFOU
    'SBHNFOU
    "DUJWJUZ
    7JFX
    7JFX$POUSPMMFS
    #SPXTFS
    J04
    "OESPJE
    鋅׋湡ך㹋鄲 䮶׷莸ְך㹋鄲
    )5.-$44
    )5.-$44׌ֽأ؝٦فָזְ

    View full-size slide

  29. $44כأ؝٦فָזֻ
    腚ֻ㠨׸װְׅ鎉铂

    View full-size slide

  30. أ؝٦فָזֻג鳞ְٔأز
    ‣ 〳䵤䚍ָזְծֿ׸ח㽴ֹ׷
    ‣ ז׈ז׵$BTDBEJOH4UZMF4IFFU׌ַ׵
    ‣ 㥴⡦ח⮚׸׋؝ٝه٦طٝز鏣鎘ד׮♳剅ֹ׾꣇־זְ
    ‣ $44鏣鎘כ剑⡚ꣲךأػ؜ذ؍㼎瘻ח麓ֺזְ
    ‣ 劤颵涸ח؝ٝه٦طٝز⻉׾酡⸔ׅ׷׮ךדכזְ
    ‣ $44ָ灶笼ׅ׷ַやַכرؠ؎ٝח⣛㶷ׅ׷

    View full-size slide

  31. $44כ鏣鎘׾䊨㣗׃ג׮
    رؠ؎ٝ如痥ד灶笼ׅ׷
    ˟暟✲ָծ⥜䗁׃״ֲָזְקוֲתֻ遤ַזֻז׷ֿהկ遤ֹ鑥ת׷ֿהկ

    View full-size slide

  32. הכְִأ؝٦فכ妜׃ְ

    View full-size slide

  33. $44.PEVMFTה$44JO+4
    ‣ $44.PEVMFT
    ‣ $44ؿ؋؎ٕ׾JNQPSUד⿫撑ׅ׷
    ‣ $44JO+4
    ‣ +BWB4DSJQUךؔـآؙؑزד$44׾鎸鶢ׅ׷
    ‣ $44ך鎉铂涸ז䓲ׁ׾⯘剪ׅ׷،فٗ٦ث

    View full-size slide

  34. /* style.css */
    .className {
    color: green;
    }
    import styles from "./style.css";
    element.innerHTML = ``;

    View full-size slide

  35. import jss from 'jss';
    const styles = jss.createStyleSheet({
    className: {
    color: green
    }
    }).attach();
    element.innerHTML = ``;

    View full-size slide

  36. 4IBEPX%0.
    ‣ أ؝٦فך㹋植
    ‣ 銲稆⽃⡘ךأ؝٦ف׾㹀纏דֹ׷
    ‣ ⱄꂁ䋒〳腉ז劤勻ך؝ٝه٦طٝزָ卓׋ׁ׸׷
    ‣ $VTUPN&MFNFOUTח״׷銲稆ךⱄ㹀纏
    ‣ ⟣䠐ך6*װ䮶׷莸ְ׾תה׭׵׸׷
    ‣ 8FC$PNQPOFOUT

    View full-size slide


  37. :host { display: inline-block; }


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

    View full-size slide

  38. ֿֿתדך㉏겗挿ך侭椚
    ‣ ؝ٝه٦طٝزכاؿزؐؑ،ךㅷ颵חꟼ׻׷
    ‣ וךأةحؙחְֶג׮ずֿׄהָ鎉ִ׷
    ‣ أة؎ٕؖ؎سד겥㖈⻉׃׋㉏겗
    ‣ ؝ٝه٦طٝزך盖椚倯岀ה׃ג黝ⴖז䩛媮דכזַ׏׋
    ‣ رؠ؎ش٦הؒٝآص،ך꟦ך䠐陎ך룪뤍
    ‣ ؙٓ؎،ٝز؟؎س㹋鄲חꟼ׻׷➂ך⼿⸂ָ♶〳妀
    ‣ 8FCؿٗٝزؒٝس㔿剣ך㹋鄲♳ך㉏겗כ鍑寸׃אא֮׷
    ‣ ׻ַ׏גכְ׷ֽוծזַזַ㹋騧דֹזְ؎و؝؝

    View full-size slide

  39. ⼿噟㹋騧חぢֽ׋倯ꆙ
    ‣ 耵腉ず㡦ך娄׫㺔׶BU植㜥
    ‣ رؠ؎ش٦כ㹋鄲׾ծؒٝآص،כرؠ؎ٝ׾㷕ע
    ‣ ♧倯鸐遤זꟚ涪חז׵זְ׋׭ך铡䖤勞俱ך䲿爙
    ‣ Ꟛ涪♳ךًٔحزOPUؒٝآص،鿪さ
    ‣ ㅷ颵♳ךًٔحزOPUؒٝآص،鿪さ
    ‣ ⯓➂ח㷕ע
    ‣ فٗإأ׾ؿٖ٦يٙ٦ؙח䔲גכ׭׷

    View full-size slide

  40. 耵腉ך娄׫㺔׶BU植㜥
    ‣ 铡䖤勞俱ך❛䳔
    ‣ Ꟛ涪♳ךًٔحزⱄⵃ欽䚍ծ⥂㸚䚍ծꟚ涪؝أز
    ‣ ㅷ颵♳ךًٔحزرؠ؎ٝװ⹛⡲ך♧顐䚍
    ‣ ֶ✼ְך⡲噟׾㼭ֻׁⴓ䬐
    ‣ ✮劍ׁ׸׷䮶׷莸ְ׾ؒٝآص،ָٖؽُ٦ׅ׷הַ
    ‣ 6*ך邌植鿇ⴓ׾رؠ؎ش٦ָ㹋鄲׃ג׫׷הַ
    ‣ ꦄ䱸ׅ׷耵腉ָ実׭׷ֿהך椚鍑

    View full-size slide

  41. زحفتؐٝז鑧
    ‣ أذ٦ؙمٕت٦הךさ䠐䕎䧭
    ‣ ⠓爡װ穈籼ٖكٕדך《׶穈׫⻉
    ‣ 넝䏝ז佟屚⸂ָ㉏׻׸׷
    ‣ رؠ؎ٝءأذي׾鐰⣣ׅ׷ⵖ䏝
    ‣ 穈籼װفٗآؙؑزךـٓٝر؍ؚٝ
    ⠓爡
    鿇縭
    فٗآؙؑز
    Ꟛ涪罏
    ̕

    View full-size slide

  42. نزي،حفז鑧
    ‣ 植㜥⚺㼪ך虊ך呎崞⹛
    ‣ Ꟛ涪فٗإأ⻉ׅ׷ֿהדך㹀滠
    ‣ 竰竲ׅ׷呎孡ָ㉏׻׸׷
    ‣ 䩛岀٥ؿٖ٦يٙ٦ؙך㼪Ⰵ
    ‣ Ꟛ涪鄩ꆀָ֮׷ז׵穈籼涸鍑寸״׶植㹋涸
    ‣ 䧭⸆✲⢽⻉
    ⠓爡
    鿇縭
    فٗآؙؑز
    Ꟛ涪罏
    ̓

    View full-size slide

  43. "UPNJD%FTJHO

    View full-size slide

  44. 陎罏ח㷕ע

    View full-size slide

  45. 陎罏
    َأؼ؟ׁ׿
    ח㷕ע
    ‣ ֿך䖓ך"."ـ٦أפぢֲַ
    ‣ !ZIBTTZ㹂חًٝءّׅٝ׷
    ‣ IUUQBVUPNBHJDGN׾耮ֻ
    ‣ IUUQZBTVIJTBDPNDPVME׾鋅׷

    View full-size slide

  46. #DI
    $ DI
    %DIOFU
    5IBOLZPV✨

    View full-size slide