Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web フロントエンドにおけるコンポーネント化のアプローチ / Component of We...
Search
Shogo Sensui
February 25, 2017
Technology
8
8.8k
Web フロントエンドにおけるコンポーネント化のアプローチ / Component of Web Frontend
2017年2月25日に開催された Inside Frontend の「Web フロントエンドにおけるコンポーネント化のアプローチ」のセッション資料です。
Shogo Sensui
February 25, 2017
Tweet
Share
More Decks by Shogo Sensui
See All by Shogo Sensui
三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PRTimes Engineering
1000ch
0
2.1k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
110
Web Share API
1000ch
0
130
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
45
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
66
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
69
Web Standards Interop 2022
1000ch
0
300
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
800
Other Decks in Technology
See All in Technology
エンジニアリング 💰Moneyジャー / Engineering Money-ger
kenchan
2
360
アウトカムを最大化させるプロダクトエンジニアの動き
hacomono
PRO
0
320
社内限定だった「ChatGPTオペレーター勉強会」の極秘資料を無料で特別公開
tenho7_kodama
1
120
いまから始めるAWS CDK 〜モダンなインフラ構築入門〜/iac-night-cdk-introduction
tomoki10
6
2.1k
TechBullエンジニアコミュニティの取り組みについて
rvirus0817
0
520
Cloudflare Pages 4年使って分かった良さと注意点
kyosuke
0
190
ランチの間に GitHub Copilot Agent が仕事を終わらせてくれた話
bicstone
2
410
大人の学び - マイクの持ち方について
kawaguti
PRO
3
610
もうVPNは古い? VPNを使わずに オンプレサーバーを 管理する手法あれこれ
ebibibi
0
140
TDSE_20250311_AIxIoTビジネス共創ラボ第2回勉強会_発表資料.pdf
iotcomjpadmin
0
210
StotybookからはじめるVRT -個人開発編-
arrow2nd
1
960
Codar: Arte ou Ciência?! A Jornada de um DEV na Creator Economy
vclementino
0
190
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
14k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
The Language of Interfaces
destraynor
156
24k
Building Adaptive Systems
keathley
40
2.4k
Unsuck your backbone
ammeep
669
57k
Docker and Python
trallard
44
3.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Rails Girls Zürich Keynote
gr2m
94
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Transcript
*OTJEF'SPOUFOE !DI4IPHP4FOTVJ 8FCؿٗٝزؒٝسחֶֽ ؝ٝه٦طٝز⻉ך،فٗ٦ث
!DI
!DI ‣ 4IPHP4FOTVJ ‣ BLBDIPO*OUFSOFU ‣ $ZCFS"HFOU *OD ‣ 8FC*OJUJBUJWF$FOUFS
‣ 4PGUXBSF&OHJOFFS ‣ 8FCDMJFOUTJEFEFWFMPQNFOU ‣ 0QFO4PVSDF4PGUXBSF
?㼰׃ך8FCחֶֽ ؝ٝه٦طٝزחꟼׅ鑧겗
أة؎ٕؖ؎س
$44ךأة؎ٕؖ؎س 䔲儗 ‣ فٗآؙؑز6*ךسًُؗٝزה׃ג ‣ )5.- $44ך朐䡾鋅ִ⻉׃ך ‣ ؿٗٝزؒٝسؒٝآص،ָ؝ؾل׃ג⢪ְְ ‣
رؠ؎ش٦הך⼿噟䩛媮ה׃ג ‣ 椚䟝فٗآؙؑز6*ך侭椚װⱄⵃ欽ך ‣ 植㹋ًٝذشٝأׁזְկ؝ؾلⵃ欽ׅדֹזְ
! ⡦鍑寸ׅלְְךַ 劤颵涸ח鋅ִגזַ
؝ٝه٦طٝزהכ ְְזזךַ ?
اؿزؐؑ،חְֶגכ暴㹀ך堣腉ծ暴ח ⱄⵃ欽罋ִג害欽ח涪ׁך չ؝ٝه٦طٝزպהכ˘
☁ 圫ղז涪؝ٝذؗأز $MJFOU4JEF #SPXTFS J04 "OESPJE 4FSWFS4JEF 8JOEPXT -JOVY
̞
None
؝ٝه٦طٝزך⣣⦼ ‣ رؠ؎ٝחְֶג ‣ ِ٦ؠ٦؎ٝة٦ؿؑ٦أך♧顐䚍٥害欽䚍 ‣ 堣腉ח♷ִ،ؿؓ٦تٝأ ‣ اؿزؐؑ،חְֶג ‣
فؚٗٓيךⱄⵃ欽䚍٥害欽䚍 ‣ ذأةؽٔذ؍
? 8FCؙٓ؎،ٝز؟؎س חֶֽ؝ٝه٦طٝز
剑穄䧭卓暟ך⣣⦼ 䊩〸׃䖤ך "
ֿתדך㉏겗挿 ‣ ؝ٝه٦طٝزך盖椚䩛媮ך㉏겗 ‣ ؙٓ؎،ٝز؟؎س㹋鄲ך彘㉏겗 ‣ ؝ٝه٦طٝز㹋植ׅ♳דך䪮遭涸铬겗
? ؙٓ؎،ٝز؟؎سחֶֽ ؝ٝه٦طٝزך盖椚倯岀
)5.- $44ד⡲䧭ׅ أة؎ٕؖ؎سכוֲזךַ
رؠ؎ٝر٦ة罋חׅ رؠ؎ٝر٦ة刿倜ׅ %FTJHO %FWFMPQ )5.- $44דⱄ植ׅ أة؎ٕؖ؎س刿倜ׅ
铩ָًٝذشٝأׅ㉏겗 ‣ رؠ؎ش٦ָ)5.- $44⥜姻♶腉ז䝤䩛 ‣ رؠ؎ش٦͑؝ٝه٦طٝز盖椚罏ז؛٦أָ㣐⼱ ‣ ♧倯鸐遤דֲ֮כ䛊ֻٙ٦ؙ׃זְ ‣ ؝ٝه٦طٝز鏣鎘כ8FCח⣛㶷׃זְ
‣ J04װ"OESPJEד؝ٝه٦طٝزך罋ִ倯כずׄ ‣ 8FCꣲ㹀ךفٗتؙزז葺瘻ַ׃זְ ‣ ؝ٝه٦طٝز♧鋮8FCד鋅ךכ葺ְө
رؠ؎ش٦הر؍كٗحػ٦ך⚕倯חծ؝ ٝه٦طٝزך鏣鎘ה麊欽ח顑⟣《竲 ֽ䠐陎ָ䲿ח䗳銲 "ؙٓ؎،ٝز㹋鄲罏ך顑
رؠ؎ٝؿ؋؎ٕד盖椚ׅ ‣ ؝ٝه٦طٝز⽃⡘דⴓⶴׅךָꅾ銲 ‣ رؠ؎ش٦ָ竰竲׃גًٝذشٝأדֹ ‣ 盖椚ׅ♳דل٦آ歗הְֲ嚊䙀כ♶銲 ‣ הכְִծل٦آؿ؋؎ٕכ䗳銲חז˘ ‣
؝ٝه٦طٝزؿ؋؎ٕ撑׃ג圓䧭ׅ ‣ 1IPUPTIPQכ㢩鿇ؿ؋؎ٕ撑〳腉ծ4LFUDIכ♶〳腉
4LFUDI*NQPSU4ZNCPMT IUUQTHJUIVCDPNLNFSDTLFUDIJNQPSUTZNCPMT
رؠ؎ٝر٦ة罋חׅ رؠ؎ٝر٦ة刿倜ׅ %FTJHO %FWFMPQ )5.- $44דⱄ植ׅ أة؎ٕؖ؎س刿倜ׅ
None
? ؙٓ؎،ٝز؟؎س㹋鄲ך彘
⼿⫴ךךرؠ؎ٝ䙼罋ךⱄ圓眠DPVME IUUQXXXZBTVIJTBDPNDPVMEBSUJDMFEEEPPVYKPC hDPVME
hDPVME
涪فٗإأ♳ך䗳搫 ‣ Ⰻ⡤⫷ך邌植ָ铬ׇرؠ؎ش٦ ‣ 㹏⯓פך䲿周ծٌحؙ،حفך⡲䧭ծFUD ‣ 銲⟝♶⪒װأ؛آُ٦ٕ㖇鶕ח״ծ䖓䩛חז ‣ 㹋鄲ך䲿ד֮ծ㹋鄲פך⣛㶷ָ䓼ְ ‣
歗؟؎ؤװ堣腉ך罋䣁怩כ㹋鄲٥麊欽؝أزח湫穠ׅ ‣ رؠ؎ش٦הؒٝآص،ך娄㺔ָ実
رؠ؎ش٦כ㹋鄲椚鍑׃ ؒٝآص،כرؠ؎ٝ椚鍑ׇ״
8FCؿٗٝزؒٝسך $44הְֲ⡂גꬊז铬겗 ?
فٓحزؿؓ٦ي嫣ך ؝ٝه٦طٝز䧭ׅ䪮遭
)5.- $44 %0. 4UPSZCPBSE 7JFX GSBHNFOUYNM 'SBHNFOU 'SBHNFOU
"DUJWJUZ 7JFX 7JFX$POUSPMMFS #SPXTFS J04 "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 = `<input class="${styles.className}">`;
import jss from 'jss'; const styles = jss.createStyleSheet({ className: {
color: green } }).attach(); element.innerHTML = `<input class="${styles.className}">`;
4IBEPX%0. ‣ أ؝٦فך㹋植 ‣ 銲稆⽃⡘ךأ؝٦ف㹀纏דֹ ‣ ⱄꂁ䋒〳腉ז劤勻ך؝ٝه٦طٝزָ卓ׁ ‣ $VTUPN&MFNFOUTח״銲稆ךⱄ㹀纏 ‣
⟣䠐ך6*װ䮶莸ְתה ‣ 8FC$PNQPOFOUT
<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>
ֿֿתדך㉏겗挿ך侭椚 ‣ ؝ٝه٦طٝزכاؿزؐؑ،ךㅷ颵חꟼ ‣ וךأةحؙחְֶגずֿׄהָ鎉ִ ‣ أة؎ٕؖ؎سד겥㖈⻉׃㉏겗 ‣ ؝ٝه٦طٝزך盖椚倯岀ה׃ג黝ⴖז䩛媮דכזַ ‣
رؠ؎ش٦הؒٝآص،ךך䠐陎ך룪뤍 ‣ ؙٓ؎،ٝز؟؎س㹋鄲חꟼ➂ך⼿⸂ָ♶〳妀 ‣ 8FCؿٗٝزؒٝس㔿剣ך㹋鄲♳ך㉏겗כ鍑寸׃אא֮ ‣ ַגכְֽוծזַזַ㹋騧דֹזְ؎و؝؝
⼿噟㹋騧חぢֽ倯ꆙ ‣ 耵腉ず㡦ך娄㺔BU植㜥 ‣ رؠ؎ش٦כ㹋鄲ծؒٝآص،כرؠ؎ٝ㷕ע ‣ ♧倯鸐遤ז涪חזזְך铡䖤勞俱ך䲿爙 ‣ 涪♳ךًٔحزOPUؒٝآص،鿪さ ‣
ㅷ颵♳ךًٔحزOPUؒٝآص،鿪さ ‣ ⯓➂ח㷕ע ‣ فٗإأؿٖ٦يٙ٦ؙח䔲גכ
耵腉ך娄㺔BU植㜥 ‣ 铡䖤勞俱ך❛䳔 ‣ 涪♳ךًٔحزⱄⵃ欽䚍ծ⥂㸚䚍ծ涪؝أز ‣ ㅷ颵♳ךًٔحزرؠ؎ٝװ⹛⡲ך♧顐䚍 ‣ ֶ✼ְך⡲噟㼭ֻׁⴓ䬐 ‣
✮劍ׁ䮶莸ְؒٝآص،ָٖؽُ٦ׅהַ ‣ 6*ך邌植鿇ⴓرؠ؎ش٦ָ㹋鄲׃גהַ ‣ ꦄ䱸ׅ耵腉ָ実ֿהך椚鍑
زحفتؐٝז鑧 ‣ أذ٦ؙمٕت٦הךさ䠐䕎䧭 ‣ ⠓爡װ穈籼ٖكٕדך《穈⻉ ‣ 넝䏝ז佟屚⸂ָ㉏ ‣ رؠ؎ٝءأذي鐰⣣ׅⵖ䏝 ‣
穈籼װفٗآؙؑزךـٓٝر؍ؚٝ ⠓爡 鿇縭 فٗآؙؑز 涪罏 ̕
نزي،حفז鑧 ‣ 植㜥⚺㼪ך虊ך呎崞⹛ ‣ 涪فٗإأ⻉ֿׅהדך㹀滠 ‣ 竰竲ׅ呎孡ָ㉏ ‣ 䩛岀٥ؿٖ٦يٙ٦ؙך㼪Ⰵ ‣
涪鄩ꆀָ֮ז穈籼涸鍑寸״植㹋涸 ‣ 䧭⸆✲⢽⻉ ⠓爡 鿇縭 فٗآؙؑز 涪罏 ̓
"UPNJD%FTJHO
陎罏ח㷕ע
陎罏 َأؼ؟ׁ ח㷕ע ‣ ֿך䖓ך"."ـ٦أפぢֲַ ‣ !ZIBTTZ㹂חًٝءّׅٝ ‣ IUUQBVUPNBHJDGN耮ֻ ‣
IUUQZBTVIJTBDPNDPVME鋅
#DI $ DI %DIOFU 5IBOLZPV✨