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
250
Svelteで作るページビルダー
Childhooooo
December 07, 2019
Tweet
Share
More Decks by Childhooooo
See All by Childhooooo
JavaScriptを使わない(Phoenix LiveViewの紹介)
childhooooo
0
860
DDD by Functional programming with TypeScript
childhooooo
2
2.1k
Other Decks in Programming
See All in Programming
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Domain-Driven Transformation
hschwentner
2
1.9k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
WebDriver BiDiとは何なのか
yotahada3
1
140
技術を根付かせる / How to make technology take root
kubode
1
240
ARA Ansible for the teams
kksat
0
150
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
チームリードになって変わったこと
isaka1022
0
190
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
We Have a Design System, Now What?
morganepeng
51
7.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Making Projects Easy
brettharned
116
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Six Lessons from altMBA
skipperchong
27
3.6k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
GitHub's CSS Performance
jonrohan
1030
460k
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>