Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Copyright© M&Aクラウド Svelteの特徴は?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Copyright© M&Aクラウド No virtual DOM 仮想DOMは速いんじゃないの? 引用:React vs. Svelte: The War Between Virtual and Real DOM

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Copyright© M&Aクラウド Svelteって、実際どうなのか? チームメンバーの前提知識 HTML/CSS/JavaScriptは問題なく扱える ・Vue.js 3年~、Nuxt.js ~3年 ・React 0 ~ 3年(経験者1人)、Next.js ほぼなし ・Svelte 趣味程度に(経験者1人)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Copyright© M&Aクラウド 本日のおさらい ● 特徴は ○ 1 Write less code(少ないコードで書ける) ○ 2 No virtual DOM(仮想DOMは使わない) ○ 3 Truly reactive(リアクティブに書ける) ● まずは ○ 1 チュートリアルから始めよう ○ 2 小さくコンポーネントを作ってみよう

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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