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
Svelteで作るWebComponents / svelte-web-components
Search
やし
October 30, 2019
Programming
2
2.1k
Svelteで作るWebComponents / svelte-web-components
Vue.js Night #1
https://giftee.connpass.com/event/150145/
にて発表した資料です。
やし
October 30, 2019
Tweet
Share
More Decks by やし
See All by やし
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
330
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
67
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
660
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
yashi8484
0
84
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
720
Other Decks in Programming
See All in Programming
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
980
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
Software Architecture
hschwentner
6
2.3k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
2.9k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
210
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
8
1.6k
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
160
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
640
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Embracing the Ebb and Flow
colly
88
4.8k
Agile that works and the tools we love
rasmusluckow
331
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Why Our Code Smells
bkeepers
PRO
339
57k
It's Worth the Effort
3n
187
28k
Designing for humans not robots
tammielis
254
26k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Docker and Python
trallard
46
3.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Transcript
SvelteͰ࡞Δ WebComponents @yashi848484
ࣗݾհ • Twitter: @yashi848484 • Like: WebϑϩϯτΤϯυ • Love: ΑΑ
• Recent troubles: ཱྀߦؼࠃศɺ෩Ͱܽߤ
ຊ͍͑ͨ͜ͱ • SvelteͱͲ͏͍͏frameworkͳͷ͔ • ֤छframeworkʹґଘ͠ͳ͍ܗͰcomponentΛ࡞Δ ͱɺ༷ʑͳϓϩμΫτͰcomponentΛڞ༗Ͱ͖ͯศ རͦ͏
࡞ͬͨͷ • SvelteͰcustom elements(WebComponents)Λ࡞ͬͨ • ࡞ͬͨcustom elementsΛɺVue applicationͱReact applicationͷ྆ํͰͬͯΈͨ
Svelteͱ • https://svelte.dev/ • svélt: ͢ΒΓͱͨ͠ɺ͢ΜͳΓͱͨ͠ • .svelteίʔυΛɺjsʹม͢ΔίϯύΠϥ • (ࠓճɺ.svelte→custom
elementsͱͯ͠ు͖ग़͢ ܗͰ༻)
Svelteͱ • ίʔυྔগͳ͘ॻ͚Δ͜ͱΛతͱ͍ͯ͠Δ • Virtual DOMΛΘͣɺDOMΛॻ͖͑ΔΞϓ ϩʔν • ࣮ߦ࣌ͷύϑΥʔϚϯε͕ྑ͍ɺͱݴΘΕ͍ͯΔ
Svelteͱ • ύϑΥʔϚϯεʹؔͯ͠ɺVueReactͱൺֱ͞ΕΔ ͜ͱ͕ଟ͍ • →jQueryͱൺֱ͢Δ΄͏͕ϕλʔʁ
<template> <h1>Hello {{ name }}</h1> </template> <script> export default {
data() { return { name: "world" }; } }; </script> <script> let name = "world"; </script> <h1>Hello {name}</h1> 7VF 4WFMUF Svelte syntax
<template> <h1>Hello world</h1> </template> <style scoped> h1 { color: red;
} </style> <style> h1 { color: red; } </style> <h1>Hello world </h1> Svelte syntax 7VF 4WFMUF
<template> <div> <div>count: {{ count }}</div> <button @click="handleClick"> button</button> </div>
</template> <script> export default { data() { return { count: 0 }; }, methods: { handleClick() { this.count += 1; } } }; </script> <script> let count = 0; function handleClick() { count += 1; } </script> <div>count: {count}</div> <button on:click={handleClick} >button</button> Svelte syntax 7VF 4WFMUF
Svelte syntax • data binding, style binding • if, eachͳͲͷϒϩοΫ
• slot • ϥΠϑαΠΫϧϝιου • (؆қతͳ)store • transition, animation • (ҰԠ)contextAPI
WebComponents • ࠶ར༻ՄೳͳಠࣗͷΧελϜཁૉΛ࡞͠ɺ͜ΕΛ ΣϒΞϓϦͰར༻͢ΔͨΊͷٕज़ • Custom elements • Shadow DOM
• HTML templates • HTML imports←ഇࢭ
Demo
<script> export let title = "Svelte Card"; export let message
= "This is card component created by svelte"; let selected = false; function handleOnClick() { selected = !selected; } </script> <style> /* লུ */ </style> <svelte:options tag="svelte-card" /> <div class="card" class:selected on:click={handleOnClick}> <div class="card-title">{title}</div> <div class="card-body">{message}</div> <slot name="footer" /> </div> Svelte CustomElement
<template> <div class="container"> <h1>Svelte x {{ name }}</h1> <div class="content-wrapper">
<template v-for="card in cards"> <svelte- card :title="card.title" :message="card.message" :key="car d.id"> <svelte-button slot="footer" @click="handleButtonOnClick" ></svelte-button> </svelte-card> </template> </div> </div> </template> <script> import "../public/svelte-elements"; WebComponents in Vue
return ( <div className="container"> <h1>Svelte x {props.name}</h1> <div className="content-wrapper"> {cards.map((card,
i) => ( <svelte- card title={card.title} message={card.message} key= {i}> <svelte-button slot="footer" onClick={handleButtonOnClick} ></svelte-button> </svelte-card> ))} </div> </div> ); WebComponents in React
ྑͦ͞͏ͳͱ͜Ζ • Svelteɺsyntax͕Vueʹࣅ͍ͯΔ ɹˠVue.jsΛॻ͍͍ͯΔਓͰ͋ΕɺΩϟονΞοϓָͦ͏ • ͔ͭɺΑΓίʔυྔগͳ͘ॻ͘͜ͱ͕Ͱ͖Δ • طʹVueͱReactͷϓϩμΫτ͕͋Γɺޙ͔ΒσβΠϯͷ౷Ұ ԽΛਤΓ͍ͨ߹ͳͲʹWebComponentsศརͦ͏
՝ • SvelteʹΑΔcustom elementsు͖ग़͠ɺSvelteͷ͓·͚ػೳ ɹˠΞϓϦέʔγϣϯ࡞༻్ͰਅՁΛൃشͰ͖Δ⭕ • SvelteTypeScriptະαϙʔτ ɹˠࠓޙαϙʔτ͞ΕΔ༧ఆ • WebComponentsॳΊͯͬͨͷͰɺࠓޙࣝΛਂΊ͍͖͍ͯͨ
Source https://github.com/yashi8484/svelte-custom-elements
Thank you!