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
0
280
今日からSvelteで開発だ! どうする?何から始める?
AkitoTsukahara
October 27, 2022
Tweet
Share
More Decks by AkitoTsukahara
See All by AkitoTsukahara
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
PHP8.2にバージョンアップして もっと型表現を豊かにしよう
akitotsukahara
0
440
オンボーディングのために 私はプロダクト考古学者になりました!
akitotsukahara
3
440
プロダクトチームから他部署に 伝播するふりかえり文化
akitotsukahara
0
440
スピンオフサービス構築で培われた開発ノウハウをご紹介!
akitotsukahara
0
140
ビルドツールViteを10分で解説!
akitotsukahara
0
1k
どのくらい速くなるの?Laravel MixとViteを性能比較してみました!
akitotsukahara
0
11k
スクラムマスターを経験して得られた学びとエンジニアとしての成長
akitotsukahara
0
360
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
1
2.4k
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Hack Claude Code with Claude Code
choplin
4
2.1k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
220
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
13k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
890
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
830
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
88
30k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Making Projects Easy
brettharned
116
6.3k
How to Ace a Technical Interview
jacobian
278
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Six Lessons from altMBA
skipperchong
28
3.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How GitHub (no longer) Works
holman
314
140k
Adopting Sorbet at Scale
ufuk
77
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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クラウド 本日のおさらい • 特徴は ◦ 1 Write less code(少ないコードで書ける)
◦ 2 No virtual DOM(仮想DOMは使わない) ◦ 3 Truly reactive(リアクティブに書ける) • まずは ◦ 1 チュートリアルから始めよう ◦ 2 小さくコンポーネントを作ってみよう
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