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
140
JavaScriptを使わない(Phoenix LiveViewの紹介)
childhooooo
0
910
DDD by Functional programming with TypeScript
childhooooo
2
2.2k
Other Decks in Programming
See All in Programming
CSC305 Summer Lecture 06
javiergs
PRO
0
100
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
100
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
160
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.2k
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
200
AHC051解法紹介
eijirou
0
630
パスタの技術
yusukebe
1
400
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
520
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
BBQ
matthewcrist
89
9.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Statistics for Hackers
jakevdp
799
220k
Six Lessons from altMBA
skipperchong
28
4k
Raft: Consensus for Rubyists
vanstee
140
7.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Practical Orchestrator
shlominoach
190
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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>