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
AkitoTsukahara
October 27, 2022
Programming
340
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
今日からSvelteで開発だ！ どうする？何から始める？
AkitoTsukahara
October 27, 2022
More Decks by AkitoTsukahara
See All by AkitoTsukahara
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
1.2k
PHP8.2にバージョンアップして もっと型表現を豊かにしよう
akitotsukahara
0
510
オンボーディングのために 私はプロダクト考古学者になりました！
akitotsukahara
3
520
プロダクトチームから他部署に 伝播するふりかえり文化
akitotsukahara
0
560
スピンオフサービス構築で培われた開発ノウハウをご紹介！
akitotsukahara
0
210
ビルドツールViteを10分で解説！
akitotsukahara
0
1.3k
どのくらい速くなるの？Laravel MixとViteを性能比較してみました！
akitotsukahara
0
11k
スクラムマスターを経験して得られた学びとエンジニアとしての成長
akitotsukahara
0
500
チームでカレーを作ろう！アジャイルカレークッキング
akitotsukahara
1
2.7k
Other Decks in Programming
See All in Programming
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
210
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
pluu
0
220
Terraform標準の組織で AWS CDKをどう使うか
mu7889yoon
1
490
the container ship “Apple Silicon”@WWDC26 Recap -Japan-\(region).swift
shingangan
0
110
源内ハンズオン概要編
hideg
0
130
ビデオ通話が繋がる0.2秒で何が起きているのか
supurazako
2
180
PHP Application における Kubernetes 内 gRPC 通信
ganchiku
0
590
わからない話を追いかけたら、プログラミング言語を作る側にいた
ydah
3
480
メールのエイリアス機能を履き違えない
isshinfunada
0
230
Lean は証明の正しさを確認するためだけのツールって思ってませんか？
inoueasei
1
150
テーブルをDELETEした
yuzneri
0
140
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
akihisaikeda
1
180
Featured
See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
73
41k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
230
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.7k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
620
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
930
Producing Creativity
orderedlist
PRO
348
40k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
760
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Transcript
Copyright© M&Aクラウド 今日からSvelteで開発だ！ どうする？何から始める？ Nextbeat Tech Bar：SvelteKit導入企業2社による本音LT会
Copyright© M&Aクラウド 2 自己紹介 塚原彰仁 AkitoTsukahara 株式会社M&Aクラウド AkitoTsukahara akito_tsukahara
Copyright© M&Aクラウド M&Aクラウドでは 今年の夏からSvelteKitでの プロダクト開発が始まりました🎉 3
Copyright© M&Aクラウド 4 馴染みのない「Svelte」と 上手くやっていけるのか 不安でした...🫤
Copyright© M&Aクラウド 想像以上に Svelteは書きやすくて、 今ではお気に入りの フレームワークです😁 5
Copyright© M&Aクラウド この資料でお伝えしたいこと Svelteは簡単で書きやすいよ！ すでにSvelteに触れたことがある人 ・周りの人にSvelteイケてるよ！と伝えられるように まだSvelteに触れたことがない人 ・Svelteイケてるじゃん！と感じてもらえるように
Copyright© M&Aクラウド Svelteの特徴は？
Copyright© M&Aクラウド Write less code Svelte
Copyright© M&Aクラウド Write less code Vue.js
Copyright© M&Aクラウド Write less code React
Copyright© M&Aクラウド No virtual DOM 仮想DOMは速いんじゃないの？ 引用：仮想DOMのメリット
Copyright© M&Aクラウド No virtual DOM 仮想DOMは速いんじゃないの？ 引用：React vs. Svelte: The
War Between Virtual and Real DOM
Copyright© M&Aクラウド Truly reactive ← $: というJSラベル構文
Copyright© M&Aクラウド Svelteって、実際どうなのか？ 実際のところはどうなのか？ 弊社メンバーにSvelteで 開発してみた印象をインタビューしてみました🙋♂️
Copyright© M&Aクラウド Svelteって、実際どうなのか？ チームメンバーの前提知識 HTML/CSS/JavaScriptは問題なく扱える ・Vue.js 3年~、Nuxt.js ~3年 ・React 0
~ 3年（経験者1人）、Next.js ほぼなし ・Svelte 趣味程度に（経験者1人）
Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelteで開発するよ！と聞いた時の印象は？ いいじゃん！と思った チュートリアル見た感じ大丈夫そうな印象を受けた フロントエンドはReactのシェアが大きいので、あえての選 択という印象を受けた。（普通ならReact？） もっと盛り上がっていくことに期待！
Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelteは書きやすい？もう慣れた？ クセの強い書き方もないので書きやすい Vue.jsに近い印象。慣れるのに時間はかからなかった React経験者的には再描画までのライフサイクルに違和感が あった。いい感じにやってくれるので戸惑った
Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelte理解できたかな？と最初に思えたタイミングは？ 小さくコンポーネントを作成して、リアクティブを把握で きたところ ストアを含めて複数のコンポーネントを繋げて、値が変わ るところまで実装したところ
Copyright© M&Aクラウド じゃあ、何から始めていったら良いのか？ Svelteに触れてみようかな？と思ったら、 どこから始めていくといいのか？🏃♂️
Copyright© M&Aクラウド まずは何から始めていこう？ まずはチュートリアルをやってみよう！
Copyright© M&Aクラウド まずは何から始めていこう？ ・小さいコンポーネントから作成する StorybookやREPLで動きを確認できるものを作ってみる ・イベント、Props、リアクティブを利用するコンポーネントを作成する 主な機能を押さえることで、これまでの経験則と接続できる 例）Event forwarding
Copyright© M&Aクラウド 社内メンバーにSvelteの感想を聞いてみました デメリットを挙げるとしたら？
Copyright© M&Aクラウド 本日のおさらい • 特徴は ◦ １ Write less code（少ないコードで書ける）
◦ ２ No virtual DOM（仮想DOMは使わない） ◦ ３ Truly reactive（リアクティブに書ける） • まずは ◦ １ チュートリアルから始めよう ◦ ２ 小さくコンポーネントを作ってみよう
Copyright© M&Aクラウド まとめ Svelteは簡単で書きやすいよ！ すでにSvelteに触れたことがある人 ・周りの人にSvelteイケてるよ！と伝えられるように まだSvelteに触れたことがない人 ・Svelteイケてるじゃん！と感じてもらえるように
Copyright© M&Aクラウド 参考資料 • https://svelte.jp/ • https://speakerdeck.com/tomoam/sveltekitfalsejin-kuang-tojin-hou • https://www.sunapro.com/svelte/#index_id2 •
https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom- 59cbebbab9e9
Copyright© M&Aクラウド ありがとうございました！ 26
akitotsukahara
kanaru0928
pluu
mu7889yoon
shingangan
hideg
supurazako
ganchiku
ydah
isshinfunada
inoueasei
yuzneri
akihisaikeda
akihiro_kokubo
aleyda
afnizarnur
jdejongh
inesmontani
baasie
orderedlist
.jpg){kind=avatar}
cargoodrich
jeffersonlam
jcasabona
smashingmag
