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
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.4k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
140
Web Share API
1000ch
0
160
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
66
開発生産性と組織 / Productivity and Organization
1000ch
0
1.2k
なぜ私達は働くのか / Why We Work?
1000ch
0
95
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
110
Web Standards Interop 2022
1000ch
0
340
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
840
Other Decks in Technology
See All in Technology
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
470
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
500
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
260
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.4k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
190
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
270
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Writing Fast Ruby
sferik
629
62k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
The Cost Of JavaScript in 2023
addyosmani
53
9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
BBQ
matthewcrist
89
9.8k
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✨