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

by Shogo Sensui

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

!DI

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

أة؎ٕؖ؎س

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

4LFUDI*NQPSU4ZNCPMT IUUQTHJUIVCDPNLNFSDTLFUDIJNQPSUTZNCPMT

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

hDPVME

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

:host { display: inline-block; } 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);

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

"UPNJD%FTJHO

Slide 48

Slide 48 text

陎罏ח㷕ע

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

#DI $ DI %DIOFU 5IBOLZPV✨