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

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

Avatar for AkitoTsukahara AkitoTsukahara
October 27, 2022
Programming
0
290

今日から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
690
PHP8.2にバージョンアップして もっと型表現を豊かにしよう
Avatar for AkitoTsukahara akitotsukahara
0
450
オンボーディングのために 私はプロダクト考古学者になりました！
Avatar for AkitoTsukahara akitotsukahara
3
450
プロダクトチームから他部署に 伝播するふりかえり文化
Avatar for AkitoTsukahara akitotsukahara
0
450
スピンオフサービス構築で培われた開発ノウハウをご紹介！
Avatar for AkitoTsukahara akitotsukahara
0
150
ビルドツールViteを10分で解説！
Avatar for AkitoTsukahara akitotsukahara
0
1.1k
どのくらい速くなるの？Laravel MixとViteを性能比較してみました！
Avatar for AkitoTsukahara akitotsukahara
0
11k
スクラムマスターを経験して得られた学びとエンジニアとしての成長
Avatar for AkitoTsukahara akitotsukahara
0
370
チームでカレーを作ろう！アジャイルカレークッキング
Avatar for AkitoTsukahara akitotsukahara
1
2.5k

Other Decks in Programming

See All in Programming
React は次の10年を生き残れるか：3つのトレンドから考える
Avatar for Yuka O’oka oukayuka
41
16k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
5
620
構文解析器入門
Avatar for ydah ydah
7
2k
대규모 트래픽을 처리하는 프론트 개발자의 전략
Avatar for Seungmin 마량 maryang
0
110
Understanding Kotlin Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
250
Android 15以上でPDFのテキスト検索を爆速開発！
Avatar for tonionagauzzi tonionagauzzi
0
180
DataformでPythonする / dataform-de-python
Avatar for snhryt snhryt
0
130
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
Avatar for のんちゃん non0113
2
250
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
Avatar for ktr ktr_0731
3
920
DatadogのArchived LogsをSnowflakeで高速に検索する方法（Archive Searchでオワコンにならないことを祈って） / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
Avatar for Civitaspo civitaspo
0
100
TypeScriptでDXを上げろ！ Hono編
Avatar for Yusuke Wada yusukebe
4
920
The Niche of CDK Grant オブジェクトって何者？/the-niche-of-cdk-what-isgrant-object
Avatar for hassaku63 hassaku63
1
740

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
44
7.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.6k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k

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