Svelteの概要 / Svelteの始め方 / SvelteKitの近況と今後

Transcript

1. Svelteの概要 / Svelteの始め方 / SvelteKitの近況と今後 2022/04/11 VS Code Meetup
2. • Svelteの日本語翻訳サイトの管理人 ◦ https://svelte.jp ◦ https://kit.svelte.jp • Svelte日本(日本のSvelteコミュニティ)に出没します ◦ https://discord.com/invite/YTXq3ZtBbx • Svelteにほんのちょっとだけコントリビュート @tomoam_mat @tomoam 自己紹介
3. 話すこと • Svelte/SvelteKitの概要 • Svelteの始め方 ◦ 効率よくSvelteを学ぶ方法の紹介 • SvelteKitの近況と今後
4. Svelte/SvelteKitの概要
5. Svelteとは オープンソースのUIフレームワーク ◦ ReactやVueと同じカテゴリに括られることが多い • 書き味は素のHTML/CSS/JavaScriptに近い • コード量が少なくなる • 仮想DOMがないため軽量、高速 • 真にリアクティブである • etc… https://svelte.jp 特徴やメリットはドキュメントサイトのトップに 書いてあるので興味がある方は読んでみてください
6. SvelteKitとは • ハイパフォーマンスなWebサイト/アプリを構築するためのフレームワーク ◦ ReactにとってのNext.js、VueにとってのNuxt.js ◦ ファイルシステムベースのルーティング、コード分割などの最適化 ◦ adapterと呼ばれる仕組みでデプロイ先に適したビルドをしてくれる • 2021年3月にβ版として公開 ◦ 2022年4月現在はまだβ版だが、プロダクション環境での採用事例有り • 多くのベンダーが率先してサポート ◦ Cloudflare, Vercel, Netlify, etc…
7. • バックエンドフレームワークの「満足度」 ◦ 2021 : 1位 Svelte / SvelteKit に対する評価 • フロントエンドフレームワークの「満足度」 ◦ 2019 : 2位、2020 : 1位、2021 : 2位 State Of JavaScript Survey Stack Overflow Developer Survey 2021 • 「最も愛されるWebフレームワーク」に選出 https://2021.stateofjs.com/en-US/libraries/back-end-frameworks/#back_end_frame works_experience_ranking https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_f rameworks_experience_ranking
8. Svelteの採用事例 また、日本国内においても徐々に採用事例が増えてきている https://svelte.jp 中段より転載
9. Svelteの始め方 ※これはSvelte公式の見解ではなく、あくまで私個人の意見です
10. Svelteの始め方 - おすすめはチュートリアルから • ドキュメントやExampleより まずチュートリアル • ローカルでいじるより まずチュートリアル • 内容・構成がよく練られており 本当に素晴らしい • フロントエンド開発者なら 業務の片手間でやっても数日 • JavaScript少しだけ、 というレベルの方でも 1週間程度 https://svelte.jp/tutorial/basics
11. Svelteの始め方 - チュートリアルの効率的な進め方① コピペをしない • 自分で書くことによって 記憶に残りやすくなる 詰まったら「Show me」ボタン • 正解のコードで上書きしてくれる • その前に書いたコードが 消去されるので要注意 少しずつで良いので毎日取り組む • Svelteに限らず これをコピペせずに 自分で書きましょう 詰まったらこのボタンをクリック
12. Svelteの始め方 - チュートリアルの効率的な進め方② チュートリアルのうち以下の箇所は一旦飛ばして後回しにする • 「1. Introduction」の “g. Making an app” ◦ プラグインやローカル環境のセットアップ方法が紹介されているが、 チュートリアルをこなすだけであればこのタイミングでセットアップは不要 • 「9. Motion」「10. Transitions」「11. Animations」 ◦ これらの機能自体はとてもパワフルだが、他の機能とは独立しているため 使うタイミングで学習しても大丈夫 ◦ 余裕があればやっても良いし、「Show me」「Reset」ボタンを使って どんなことができるか見ておくのもOK
13. Svelteの始め方 - チュートリアルの効率的な進め方③ • JavaScriptに馴染みのない方向けのリファレンス ◦ JavaScriptに全く触れたことが無い方向け ▪ ウェブ入門 - ウェブ開発を学ぶ | MDN ▪ JavaScript Primer ◦ チュートリアルに頻出するJavaScriptの標準APIや構文 ▪ fetch() - Web API | MDN ▪ setInterval() - Web API | MDN ▪ clearInterval() - Web API | MDN ▪ アロー関数式 - Web API | MDN
14. Svelteの始め方 - チュートリアルが終わったら ローカルに開発環境を構築する • Node.js • Visual Studio Code ◦ 公式のExtension Svelte for VS Code を必ずインストール！ “Setup”もちゃんと読んで適切に設定を！ サンプルアプリを作るなら • 個人的にはいきなりSvelteKitから始めるのをおすすめします ◦ Getting startedに従ってSvelteKitプロジェクトを作成 ◦ ルーティングをよく読み、作成したSvelteKitプロジェクトのsrc/routes内にある .svelteファイルを編集してみま しょう • 公式が提供しているSvelteKitサイト/アプリの例もあります • ライブラリを探すなら sveltesociety.dev
15. Sveltekitの近況と今後 ※これはSvelte公式の見解ではなく、あくまで私個人の推測です
16. Sveltekitの近況と今後 • 2022年4月現在 ◦ β版だがバグの報告は大分落ち着いてきているように見受けられる ◦ APIや機能の破壊的な変更はある ▪ 追従は難しくないし、使いやすくなるのでそこまで気にならない (※個人の感想です) • Rich Harris - The Road to SvelteKit 1.0 (Svelte Society NYC) ◦ 2022/4/6に行われたSvelte Society NYCにRich Harris氏が登壇 ◦ 前半は最近SvelteKitに追加された機能のデモ ◦ 後半(19:52~)に、1.0までに追加したい機能、 1.0リリース後に追加したい機能について説明 ▪ これらは決定事項ではないことにご留意ください • もっと詳しい情報は 4/30に開催される Svelte Summit で発表されるかも？ (※個人の予想です)
17. まとめ • Svelteは使いやすく、軽量で高パフォーマンス • 開発者の評価も高い • チュートリアルから始めるのをおすすめします • SvelteKitの近況はRich Harris氏の発表とSvelte Summitを要チェック