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.9k
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.3k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
130
Web Share API
1000ch
0
160
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
61
開発生産性と組織 / Productivity and Organization
1000ch
0
1.2k
なぜ私達は働くのか / Why We Work?
1000ch
0
92
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
98
Web Standards Interop 2022
1000ch
0
330
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
830
Other Decks in Technology
See All in Technology
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
180
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
610
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
200
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
1
280
結局QUICで通信は速くなるの?
kota_yata
9
7.5k
Backboneとしてのtimm2025
yu4u
3
1.3k
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
240
PFEM Online Feature Flag @ newmo
shinyaishitobi
2
300
GCASアップデート(202506-202508)
techniczna
0
240
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
13
4k
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
280
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
390
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Building Applications with DynamoDB
mza
96
6.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✨