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
280
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
67
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
630
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
yashi8484
0
79
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
690
Other Decks in Programming
See All in Programming
WindowInsetsだってテストしたい
ryunen344
1
220
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
420
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
5
3.9k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
570
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
410
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Create a website using Spatial Web
akkeylab
0
310
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Optimizing for Happiness
mojombo
379
70k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Done Done
chrislema
184
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Being A Developer After 40
akosma
90
590k
Writing Fast Ruby
sferik
628
62k
Typedesign – Prime Four
hannesfritz
42
2.7k
A Tale of Four Properties
chriscoyier
160
23k
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!