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で作るページビルダー
Search
maku.
December 07, 2019
Programming
0
270
Svelteで作るページビルダー
maku.
December 07, 2019
Tweet
Share
More Decks by maku.
See All by maku.
Agent on Rails - AIをDDDのレールの上で制御する
childhooooo
0
120
JavaScriptを使わない(Phoenix LiveViewの紹介)
childhooooo
0
900
DDD by Functional programming with TypeScript
childhooooo
2
2.1k
Other Decks in Programming
See All in Programming
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
NPOでのDevinの活用
codeforeveryone
0
840
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
830
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
PicoRuby on Rails
makicamel
2
130
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
How to Ace a Technical Interview
jacobian
278
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Language of Interfaces
destraynor
158
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Automating Front-end Workflow
addyosmani
1370
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
SvelteͰ࡞ΔϖʔδϏϧμʔ Gunma.web #37
େా෦ߊ ϩέοτ -> Web
ಘҙͳ͜ͱ ϋΠϘʔϧΛ࡞Δ͜ͱ
ۤखͳ͜ͱ λΠϐϯά
1. ίʔυ͕গͳͦ͏ʹݟ͑ͨSvelteͰ 2. ϖʔδϏϧμʔΛ࡞Δ
1. Svelteʹ͍ͭͯ
Svelteͱ ɾReactVue.jsͬΆ͍ϑϩϯτΤϯυϑϨʔϜϫʔΫ ɾHTMLʗJavaScriptʗCSSΛੜ͢ΔίϯύΠϥ ɾԾDOMΛ͍͡ΔΑ͏ͳϥϯλΠϜϥΠϒϥϦͰͳ͍ ɾϕϯνϚʔΫͰReactͷ35ഒɺVue.jsͷ50ഒ͍Β͍͠
Vue.jsͱͷൺֱ ʢ୯ҰϑΝΠϧίϯϙʔωϯτʣ
<template> <main class=”index”> <h1>ݟग़͠</h1> <p>ຊจ</p> <Block :content=”content”/> </main> </template> <script>
import Block from ‘...’ export default { components: { Block }, data() { return { content: ‘’ }... Vue.js
<template> <main class=”index”> <h1>ݟग़͠</h1> <p>ຊจ</p> <Block :content=”content”/> </main> </template> <script>
import Block from ‘...’ export default { components: { Block }, data() { return { content: ‘’ }... ɾςϯϓϨʔτλάͷԼʹ1ͭͷࢠཁૉ ɾexport default { … } ɾϓϩύςΟΛdataؔͰఆٛ ɾ༻ίϯϙʔωϯτΛͯ͢એݴ etc... Vue.js
<h1>ݟग़͠</h1> <p>ຊจ</p> <Block {content}/> <script> import Block from ‘...’; export
let content; </script> Svelte
<h1>ݟग़͠</h1> <p>ຊจ</p> <Block {content}/> <script> import Block from ‘...’; export
let content; </script> Svelte ɾ࠷ݶͷHTMLλά ɾίϯϙʔωϯτimport͢Δ͚ͩ ɾϓϩύςΟมͱͯ͠એݴ͢Δ͚ͩ
{#if show} <Preview></Preview> {/if} <script> import Preview from '...'; export
let componentId; let show = true; $: ((id) => { show = false; setTimeout(() => show = true, 0); })(componentId); </script> Svelte
{#if show} <Preview></Preview> {/if} <script> import Preview from '///'; export
let componentId; let show = true; $: ((id) => { show = false; setTimeout(() => show = true, 0); })(componentId); </script> Svelte ɾҙਤͨ͠λΠϛϯάͰॳظԽͰ͖ͣɺ ɹҰ෦ແཧΓ࠶ඳը͢Δඞཁ͕͋ͬͨ ɾDOMΛ·Δ͝ͱॻ͖͑Δॲཧ͕࿈ଓ ɹͨ͠ͷಈ͖͕Πέͯͳ͍
None
Vue.jsʢͨͿΜReactʣ ϥϯλΠϜϥΠϒϥϦͳͷͰϞδϡʔϧΛ͔ͬ͠Γఆٛ ͠ͳ͚ΕͳΒͣهड़͕໘ɻ Svelte ੜDOMΛ͍͡Δͷ͕Πέͯͳ͍ɻ
2. ϖʔδϏϧμʔ͍ͭͯ
࠷ۙ͜Μͳͷ͋Γ·͕͢
ߴػೳ͗͢Δʢࢲʹʣ
ॊೈੑѱʢࢲʹʣ
ॊೈੑѱ ɾόϥόϥʹͳΓ͕ͪͳ༨ന ɾ༧ଌ͠ʹ͍͘Ϩεϙϯγϒ࣌ͷಈ͖ ɾѲ͖͠Εͳ͍ઃఆ߲ ɾ݁ہඞཁʹͳΔHTML&CSSͷࣝ ɾඍௐʹ͔͔Δ࣌ؒ
ࣗ༝ͷϖʔδϏϧμʔΛ࡞ͬͯΈͨ
ηΫγϣϯΛॎʹ SECTION SECTION
ίϯϙʔωϯτΛԣʹ COMPONENT COMPONENT COMPONENT SECTION
ηΫγϣϯΛॎʹ
ίϯϙʔωϯτΛԣʹ
σϞ
Eruda͍͢͝
<div class={{class}} id={{id}}> <p>{{ຊจ:content:text=αϯϓϧ}}</p> </div> <style> .{{class}} { position: relative;
} .{{id}} p { font-size: {{αΠζ:size:rem=1.2}}rem; } </style>