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
Childhooooo
December 07, 2019
Programming
0
240
Svelteで作るページビルダー
Childhooooo
December 07, 2019
Tweet
Share
More Decks by Childhooooo
See All by Childhooooo
JavaScriptを使わない(Phoenix LiveViewの紹介)
childhooooo
0
820
DDD by Functional programming with TypeScript
childhooooo
2
2k
Other Decks in Programming
See All in Programming
Kotlin 2.0 and Beyond
antonarhipov
2
150
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
160
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
How to Break into Reading Open Source
kaspth
2
220
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Why Prism?
kddnewton
4
1.7k
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Ruby Parser progress report 2024
yui_knk
2
230
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
A Philosophy of Restraint
colly
202
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Scaling GitHub
holman
458
140k
BBQ
matthewcrist
83
9.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Web development in the modern age
philhawksworth
205
10k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
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>