今からフロントエンドを0から勉強するならSvelteもありかも

Toranomon Tech Hub 第三回 技術異種格闘技戦〜好きな技術LT大会〜
2025/04/21
https://toranomon-tech-hub.connpass.com/event/344781/

Transcript

1. 今からフロントエンドを 
 0から勉強するなら 
 Svelteもありかも 
 
 
 三海 純(ミカイジュン)

2. ミカイ ジュン (三海 純) 
 • 株式会社 ゆめみ 
 • 趣味: もくもく会、アニメ、ラブカ(ラブライブTCG) 
 • 好きな有名人 
 ◦ 後藤 ひとり 
 ◦ 鐘 嵐珠
 ◦ 千早 愛音
 ◦ 八木 唯

3. キャリア 
 • 2020年 ~ 2023年: 正社員 
 • 2023年 ~ 2024年: フリーランス 
 • 2025年: 株式会社 ゆめみ 

4. みなさん、 Svelte ご存知ですか？ 
 
 画像引用元: https://svelte.jp/ 

5. Svelte とは？
 
 引用元: https://svelte.jp/ 
 Svelte はコンパイラを使用する UI フレームワークで、息を呑むほ ど簡潔にコンポーネントを記述でき、 ブラウザで最小限の動作と なるようにしてくれます。 
 開発者には 既知の言語である HTML、CSS、JavaScript を使うこ とができます。 
 これは、web 開発へのラブレターです。 

6. 要するにSvelteは・・・ 
 
 ちょっと機能を 
 加えただけのHTML 

7. コード比較 
 
 Svelte 
 
 React.js 
 

8. 1つのファイルで全部書ける！ 
 

9. Svelte は仮想DOMがない 
 
 • 仮想DOMってなに？ 
 ◦ 画面（DOM）をいきなり変えるのではなく、まず「仮想DOM」というお絵かきの下書きみた いなものを使います。そこですべての変更点を計算してから、本物の画面を更新します。 
 • でも、余計な計算が増える！ 
 ◦ 仮想DOMを使うと、変更点を見つけるためにたくさん計算をする必要があります。これ が、場合によってはコンピュータに余計な負担（オーバーヘッド）をかけてしまうのです。 
 • Svelteはどうするの？ 
 ◦ Svelteは、コードを書いているときに、必要な更新方法をあらかじめ計算してしまいます。 つまり、実行中に余計な計算をする必要がなく、直接画面を上手に更新できるのです。 
 参考情報: https://svelte.jp/blog/virtual-dom-is-pure-overhead 

10. React.jsのHooksを覚えなくて良い 
 
 • トップレベルでの呼び出し 
 ◦ Hooksはコンポーネントのトップレベルで呼び出す必要があります。条件分岐、ループ、またはネス トされた関数内で呼び出すと、Reactのレンダリング順序が崩れ、不具合の原因になる 
 • ReactコンポーネントまたはカスタムHooks内でのみ使用 
 ◦ HooksはReactの関数コンポーネント、または自作のカスタムHooks内でのみ使用可能 
 • 依存配列の正確な設定 
 ◦ useEffect、useCallback、useMemoなどのHooksでは、依存配列に必要な変数を漏れなく設定する ことが重要です。これにより、不要な再実行や古い値の使用を防げる 
 • 副作用のクリーンアップ 
 ◦ useEffectで副作用を扱う場合、必要に応じてクリーンアップ関数を返し、コンポーネントのアンマウ ント時や依存関係の変更時に適切な処理を実行することが大切 
 • パフォーマンス最適化のためのHooks 
 ◦ useMemoやuseCallbackを利用して、レンダリング時の再計算や関数の再生成を抑え、パフォーマ ンスの向上を図る方法も覚えておくと良い 

11. Svelte使ってみましょう！ 

12. ご清聴ありがとうござ います！