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
1
320
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
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
450
Gleamという選択肢
comamoca
6
740
A2A プロトコルを試してみる
azukiazusa1
2
830
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
110
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
3
250
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
0
120
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
280
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
180
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
245
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
It's Worth the Effort
3n
184
28k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Gamification - CAS2011
davidbonilla
81
5.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
BBQ
matthewcrist
89
9.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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