2017年2月25日に開催された Inside Frontend の「Web フロントエンドにおけるコンポーネント化のアプローチ」のセッション資料です。
*OTJEF'SPOUFOE!DI4IPHP4FOTVJ8FCؿٗٝزؒٝسחֶֽ؝ٝه٦طٝز⻉ך،فٗ٦ث
View Slide
!DI
!DI‣ 4IPHP4FOTVJ‣ BLBDIPO*OUFSOFU‣ $ZCFS"HFOU *OD‣ 8FC*OJUJBUJWF$FOUFS‣ 4PGUXBSF&OHJOFFS‣ 8FCDMJFOUTJEFEFWFMPQNFOU‣ 0QFO4PVSDF4PGUXBSF
?㼰׃ך8FCחֶֽ؝ٝه٦طٝزחꟼׅ鑧겗
أة؎ٕؖ؎س
$44ךأة؎ٕؖ؎س 䔲儗‣ فٗآؙؑز6*ךسًُؗٝزה׃ג‣ )5.-$44ך朐䡾鋅ִ⻉׃ך‣ ؿٗٝزؒٝسؒٝآص،ָ؝ؾل׃ג⢪ְְ‣ رؠ؎ش٦הך⼿噟䩛媮ה׃ג‣ 椚䟝فٗآؙؑز6*ך侭椚װⱄⵃ欽ך‣ 植㹋ًٝذشٝأׁזְկ؝ؾلⵃ欽ׅדֹזְ
!⡦鍑寸ׅלְְךַ劤颵涸ח鋅ִגזַ
؝ٝه٦طٝزהכְְזזךַ?
اؿزؐؑ،חְֶגכ暴㹀ך堣腉ծ暴חⱄⵃ欽罋ִג害欽ח涪ׁךչ؝ٝه٦طٝزպהכ˘
☁圫ղז涪؝ٝذؗأز$MJFOU4JEF#SPXTFS J04 "OESPJE4FSWFS4JEF8JOEPXT -JOVY ̞
؝ٝه٦طٝزך⣣⦼‣ رؠ؎ٝחְֶג‣ ِ٦ؠ٦؎ٝة٦ؿؑ٦أך♧顐䚍٥害欽䚍‣ 堣腉ח♷ִ،ؿؓ٦تٝأ‣ اؿزؐؑ،חְֶג‣ فؚٗٓيךⱄⵃ欽䚍٥害欽䚍‣ ذأةؽٔذ؍
?8FCؙٓ؎،ٝز؟؎سחֶֽ؝ٝه٦طٝز
剑穄䧭卓暟ך⣣⦼䊩〸׃䖤ך"
ֿתדך㉏겗挿‣ ؝ٝه٦طٝزך盖椚䩛媮ך㉏겗‣ ؙٓ؎،ٝز؟؎س㹋鄲ך彘㉏겗‣ ؝ٝه٦طٝز㹋植ׅ♳דך䪮遭涸铬겗
?ؙٓ؎،ٝز؟؎سחֶֽ؝ٝه٦طٝزך盖椚倯岀
)5.-$44ד⡲䧭ׅأة؎ٕؖ؎سכוֲזךַ
رؠ؎ٝر٦ة罋חׅرؠ؎ٝر٦ة刿倜ׅ%FTJHO%FWFMPQ)5.-$44דⱄ植ׅأة؎ٕؖ؎س刿倜ׅ
铩ָًٝذشٝأׅ㉏겗‣ رؠ؎ش٦ָ)5.-$44⥜姻♶腉ז䝤䩛‣ رؠ؎ش٦͑؝ٝه٦طٝز盖椚罏ז؛٦أָ㣐⼱‣ ♧倯鸐遤דֲ֮כ䛊ֻٙ٦ؙ׃זְ‣ ؝ٝه٦طٝز鏣鎘כ8FCח⣛㶷׃זְ‣ J04װ"OESPJEד؝ٝه٦طٝزך罋ִ倯כずׄ‣ 8FCꣲ㹀ךفٗتؙزז葺瘻ַ׃זְ‣ ؝ٝه٦طٝز♧鋮8FCד鋅ךכ葺ְө
رؠ؎ش٦הر؍كٗحػ٦ך⚕倯חծ؝ٝه٦طٝزך鏣鎘ה麊欽ח顑⟣《竲ֽ䠐陎ָ䲿ח䗳銲"ؙٓ؎،ٝز㹋鄲罏ך顑
رؠ؎ٝؿ؋؎ٕד盖椚ׅ‣ ؝ٝه٦طٝز⽃⡘דⴓⶴׅךָꅾ銲‣ رؠ؎ش٦ָ竰竲׃גًٝذشٝأדֹ‣ 盖椚ׅ♳דل٦آ歗הְֲ嚊䙀כ♶銲‣ הכְִծل٦آؿ؋؎ٕכ䗳銲חז˘‣ ؝ٝه٦طٝزؿ؋؎ٕ撑׃ג圓䧭ׅ‣ 1IPUPTIPQכ㢩鿇ؿ؋؎ٕ撑〳腉ծ4LFUDIכ♶〳腉
4LFUDI*NQPSU4ZNCPMTIUUQTHJUIVCDPNLNFSDTLFUDIJNQPSUTZNCPMT
?ؙٓ؎،ٝز؟؎س㹋鄲ך彘
⼿⫴ךךرؠ؎ٝ䙼罋ךⱄ圓眠DPVMEIUUQXXXZBTVIJTBDPNDPVMEBSUJDMFEEEPPVYKPChDPVME
hDPVME
涪فٗإأ♳ך䗳搫‣ Ⰻ⡤⫷ך邌植ָ铬ׇرؠ؎ش٦‣ 㹏⯓פך䲿周ծٌحؙ،حفך⡲䧭ծFUD‣ 銲⟝♶⪒װأ؛آُ٦ٕ㖇鶕ח״ծ䖓䩛חז‣ 㹋鄲ך䲿ד֮ծ㹋鄲פך⣛㶷ָ䓼ְ‣ 歗؟؎ؤװ堣腉ך罋䣁怩כ㹋鄲٥麊欽؝أزח湫穠ׅ‣ رؠ؎ش٦הؒٝآص،ך娄㺔ָ実
رؠ؎ش٦כ㹋鄲椚鍑׃ؒٝآص،כرؠ؎ٝ椚鍑ׇ״
8FCؿٗٝزؒٝسך$44הְֲ⡂גꬊז铬겗?
فٓحزؿؓ٦ي嫣ך؝ٝه٦طٝز䧭ׅ䪮遭
)5.-$44 %0.4UPSZCPBSE7JFXGSBHNFOUYNM'SBHNFOU'SBHNFOU"DUJWJUZ7JFX7JFX$POUSPMMFS#SPXTFSJ04"OESPJE鋅湡ך㹋鄲 䮶莸ְך㹋鄲)5.-$44)5.-$44ֽأ؝٦فָזְ
$44כأ؝٦فָזֻ腚ֻ㠨װְׅ鎉铂
أ؝٦فָזֻג鳞ְٔأز‣ 〳䵤䚍ָזְծֿח㽴ֹ‣ זז$BTDBEJOH4UZMF4IFFUַ‣ 㥴⡦ח⮚؝ٝه٦طٝز鏣鎘ד♳剅ֹ־זְ‣ $44鏣鎘כ剑⡚ꣲךأػذ؍㼎瘻ח麓ֺזְ‣ 劤颵涸ח؝ٝه٦طٝز⻉酡⸔ׅךדכזְ‣ $44ָ灶笼ַׅやַכرؠ؎ٝח⣛㶷ׅ
$44כ鏣鎘䊨㣗׃גرؠ؎ٝ如痥ד灶笼ׅ˟暟✲ָծ⥜䗁׃״ֲָזְקוֲתֻ遤ַזֻזֿהկ遤ֹ鑥תֿהկ
הכְִأ؝٦فכ妜׃ְ
$44.PEVMFTה$44JO+4‣ $44.PEVMFT‣ $44ؿ؋؎ٕJNQPSUד撑ׅ‣ $44JO+4‣ +BWB4DSJQUךؔـآؙؑزד$44鎸鶢ׅ‣ $44ך鎉铂涸ז䓲ׁ⯘剪ׅ،فٗ٦ث
/* style.css */.className {color: green;}import styles from "./style.css";element.innerHTML = ``;
import jss from 'jss';const styles = jss.createStyleSheet({className: {color: green}}).attach();element.innerHTML = ``;
4IBEPX%0.‣ أ؝٦فך㹋植‣ 銲稆⽃⡘ךأ؝٦ف㹀纏דֹ‣ ⱄꂁ䋒〳腉ז劤勻ך؝ٝه٦طٝزָ卓ׁ‣ $VTUPN&MFNFOUTח״銲稆ךⱄ㹀纏‣ ⟣䠐ך6*װ䮶莸ְתה‣ 8FC$PNQPOFOUT
: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/>
ֿֿתדך㉏겗挿ך侭椚‣ ؝ٝه٦طٝزכاؿزؐؑ،ךㅷ颵חꟼ‣ וךأةحؙחְֶגずֿׄהָ鎉ִ‣ أة؎ٕؖ؎سד겥㖈⻉׃㉏겗‣ ؝ٝه٦طٝزך盖椚倯岀ה׃ג黝ⴖז䩛媮דכזַ‣ رؠ؎ش٦הؒٝآص،ךך䠐陎ך룪뤍‣ ؙٓ؎،ٝز؟؎س㹋鄲חꟼ➂ך⼿⸂ָ♶〳妀‣ 8FCؿٗٝزؒٝس㔿剣ך㹋鄲♳ך㉏겗כ鍑寸׃אא֮‣ ַגכְֽוծזַזַ㹋騧דֹזְ؎و؝؝
⼿噟㹋騧חぢֽ倯ꆙ‣ 耵腉ず㡦ך娄㺔BU植㜥‣ رؠ؎ش٦כ㹋鄲ծؒٝآص،כرؠ؎ٝ㷕ע‣ ♧倯鸐遤ז涪חזזְך铡䖤勞俱ך䲿爙‣ 涪♳ךًٔحزOPUؒٝآص،鿪さ‣ ㅷ颵♳ךًٔحزOPUؒٝآص،鿪さ‣ ⯓➂ח㷕ע‣ فٗإأؿٖ٦يٙ٦ؙח䔲גכ
耵腉ך娄㺔BU植㜥‣ 铡䖤勞俱ך❛䳔‣ 涪♳ךًٔحزⱄⵃ欽䚍ծ⥂㸚䚍ծ涪؝أز‣ ㅷ颵♳ךًٔحزرؠ؎ٝװ⹛⡲ך♧顐䚍‣ ֶ✼ְך⡲噟㼭ֻׁⴓ䬐‣ ✮劍ׁ䮶莸ְؒٝآص،ָٖؽُ٦ׅהַ‣ 6*ך邌植鿇ⴓرؠ؎ش٦ָ㹋鄲׃גהַ‣ ꦄ䱸ׅ耵腉ָ実ֿהך椚鍑
زحفتؐٝז鑧‣ أذ٦ؙمٕت٦הךさ䠐䕎䧭‣ ⠓爡װ穈籼ٖكٕדך《穈⻉‣ 넝䏝ז佟屚⸂ָ㉏‣ رؠ؎ٝءأذي鐰⣣ׅⵖ䏝‣ 穈籼װفٗآؙؑزךـٓٝر؍ؚٝ⠓爡鿇縭فٗآؙؑز涪罏̕
نزي،حفז鑧‣ 植㜥⚺㼪ך虊ך呎崞⹛‣ 涪فٗإأ⻉ֿׅהדך㹀滠‣ 竰竲ׅ呎孡ָ㉏‣ 䩛岀٥ؿٖ٦يٙ٦ؙך㼪Ⰵ‣ 涪鄩ꆀָ֮ז穈籼涸鍑寸״植㹋涸‣ 䧭⸆✲⢽⻉⠓爡鿇縭فٗآؙؑز涪罏̓
"UPNJD%FTJHO
陎罏ח㷕ע
陎罏َأؼ؟ׁח㷕ע‣ ֿך䖓ך"."ـ٦أפぢֲַ‣ !ZIBTTZ㹂חًٝءّׅٝ‣ IUUQBVUPNBHJDGN耮ֻ‣ IUUQZBTVIJTBDPNDPVME鋅
#DI$ DI%DIOFU5IBOLZPV✨
1000ch
moyheen
irof
mixi_engineers
k6s4i53rx
mii3king
yujisoftware
hakubishin3
k1low
kojira
oracle4engineer
okazuki
trycycle
aarron
keavy
colly
searls
destraynor
bermonpainter
denniskardys
matthewcrist
revolveconf
pedronauck
speakerdeck
edds