Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今日からSvelteで開発だ！​ どうする？何から始める？

Avatar for AkitoTsukahara AkitoTsukahara
October 27, 2022
Programming
0
310

今日からSvelteで開発だ！​ どうする？何から始める？

Avatar for AkitoTsukahara

AkitoTsukahara

October 27, 2022
Tweet

More Decks by AkitoTsukahara

See All by AkitoTsukahara
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
980
PHP8.2にバージョンアップして もっと型表現を豊かにしよう
Avatar for AkitoTsukahara akitotsukahara
0
470
オンボーディングのために 私はプロダクト考古学者になりました！
Avatar for AkitoTsukahara akitotsukahara
3
480
プロダクトチームから他部署に 伝播するふりかえり文化
Avatar for AkitoTsukahara akitotsukahara
0
490
スピンオフサービス構築で培われた開発ノウハウをご紹介！
Avatar for AkitoTsukahara akitotsukahara
0
170
ビルドツールViteを10分で解説！
Avatar for AkitoTsukahara akitotsukahara
0
1.2k
どのくらい速くなるの？Laravel MixとViteを性能比較してみました！
Avatar for AkitoTsukahara akitotsukahara
0
11k
スクラムマスターを経験して得られた学びとエンジニアとしての成長
Avatar for AkitoTsukahara akitotsukahara
0
430
チームでカレーを作ろう！アジャイルカレークッキング
Avatar for AkitoTsukahara akitotsukahara
1
2.6k

Other Decks in Programming

See All in Programming
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.8k
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1k
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.4k
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
600
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
760
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
870
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
Avatar for Takashi Kokubun k0kubun
1
390
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
240
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
410
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
50
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k

Transcript

  1. Copyright© M&Aクラウド 今日からSvelteで開発だ！ どうする？何から始める？ Nextbeat Tech Bar：SvelteKit導入企業2社による本音LT会

  2. Copyright© M&Aクラウド 2 自己紹介 塚原彰仁 AkitoTsukahara 株式会社M&Aクラウド AkitoTsukahara akito_tsukahara

  3. Copyright© M&Aクラウド M&Aクラウドでは 今年の夏からSvelteKitでの プロダクト開発が始まりました🎉 3

  4. Copyright© M&Aクラウド 4 馴染みのない「Svelte」と 上手くやっていけるのか 不安でした...🫤

  5. Copyright© M&Aクラウド 想像以上に Svelteは書きやすくて、 今ではお気に入りの フレームワークです😁 5

  6. Copyright© M&Aクラウド この資料でお伝えしたいこと Svelteは簡単で書きやすいよ！ すでにSvelteに触れたことがある人 ・周りの人にSvelteイケてるよ！と伝えられるように まだSvelteに触れたことがない人 ・Svelteイケてるじゃん！と感じてもらえるように

  7. Copyright© M&Aクラウド Svelteの特徴は？

  8. Copyright© M&Aクラウド Write less code Svelte

  9. Copyright© M&Aクラウド Write less code Vue.js

  10. Copyright© M&Aクラウド Write less code React

  11. Copyright© M&Aクラウド No virtual DOM 仮想DOMは速いんじゃないの？ 引用：仮想DOMのメリット

  12. Copyright© M&Aクラウド No virtual DOM 仮想DOMは速いんじゃないの？ 引用：React vs. Svelte: The

    War Between Virtual and Real DOM

  13. Copyright© M&Aクラウド Truly reactive ← $: というJSラベル構文

  14. Copyright© M&Aクラウド Svelteって、実際どうなのか？ 実際のところはどうなのか？ 弊社メンバーにSvelteで 開発してみた印象をインタビューしてみました🙋‍♂️

  15. Copyright© M&Aクラウド Svelteって、実際どうなのか？ チームメンバーの前提知識 HTML/CSS/JavaScriptは問題なく扱える ・Vue.js 3年~、Nuxt.js ~3年 ・React 0

    ~ 3年（経験者1人）、Next.js ほぼなし ・Svelte 趣味程度に（経験者1人）

  16. Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelteで開発するよ！と聞いた時の印象は？ いいじゃん！と思った チュートリアル見た感じ大丈夫そうな印象を受けた フロントエンドはReactのシェアが大きいので、あえての選 択という印象を受けた。（普通ならReact？） もっと盛り上がっていくことに期待！

  17. Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelteは書きやすい？もう慣れた？ クセの強い書き方もないので書きやすい Vue.jsに近い印象。慣れるのに時間はかからなかった React経験者的には再描画までのライフサイクルに違和感が あった。いい感じにやってくれるので戸惑った

  18. Copyright© M&Aクラウド Svelteって、実際どうなのか？ Svelte理解できたかな？と最初に思えたタイミングは？ 小さくコンポーネントを作成して、リアクティブを把握で きたところ ストアを含めて複数のコンポーネントを繋げて、値が変わ るところまで実装したところ

  19. Copyright© M&Aクラウド じゃあ、何から始めていったら良いのか？ Svelteに触れてみようかな？と思ったら、 どこから始めていくといいのか？🏃‍♂️

  20. Copyright© M&Aクラウド まずは何から始めていこう？ まずはチュートリアルをやってみよう！

  21. Copyright© M&Aクラウド まずは何から始めていこう？ ・小さいコンポーネントから作成する StorybookやREPLで動きを確認できるものを作ってみる ・イベント、Props、リアクティブを利用するコンポーネントを作成する 主な機能を押さえることで、これまでの経験則と接続できる 例）Event forwarding

  22. Copyright© M&Aクラウド 社内メンバーにSvelteの感想を聞いてみました デメリットを挙げるとしたら？

  23. Copyright© M&Aクラウド 本日のおさらい • 特徴は ◦ １ Write less code（少ないコードで書ける）

    ◦ ２ No virtual DOM（仮想DOMは使わない） ◦ ３ Truly reactive（リアクティブに書ける） • まずは ◦ １ チュートリアルから始めよう ◦ ２ 小さくコンポーネントを作ってみよう

  24. Copyright© M&Aクラウド まとめ Svelteは簡単で書きやすいよ！ すでにSvelteに触れたことがある人 ・周りの人にSvelteイケてるよ！と伝えられるように まだSvelteに触れたことがない人 ・Svelteイケてるじゃん！と感じてもらえるように

  25. 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

  26. Copyright© M&Aクラウド ありがとうございました！ 26