[2021年版]Svelte学習リソース集
こんにちは、@miruoです。
Svelte をこれから学びたい＆使っている人が日々増えている中、
日本語で書かれたリソース集がなかったのでコメントもいれつつまとめてみました。
随時更新します！
※Sapper/SvelteKit については本記事では取り上げません。（Kit のほうが安定してきた頃合いに別途記事を作ろうと思います）
公式ガイド
公式サイト
まず最初は Svelte の公式サイトです。チュートリアルや API リファレンスはもちろんありますが、
Svelte サイトの一番の強みは Examples ページだと思ってます。
この Example 集、簡単なものから難しめのものまで豊富なアプリ例が記載されており、例をあげると次のものがあります。
- Rick Astley の gif 画像が表示されるアプリ（※海外では rickroll というミームネタでかなり有名です）
- マップアプリ
- 動画プレイヤー
- Hacker News クローンアプリ
ただ眺めるだけでも楽しいですが、REPL という Svelte 版 CodePen の機能を使い、こちらでコードを編集してアプリを作ることもできます。
（CodePen と同じくコード共有もできます）
ちなみに日本語翻訳版もあるのでこちらも是非！
Svelte Society
Svelte Society は公式コミュニティーサイトです。
こちらでは公式サイトには載っていないコードレシピ・有用なライブラリ集・チートシートが載っています。
公式サイトに載ってないことを知りたかったらここも覗いてみるといいでしょう。
その他イベント情報がまとめられており、先日は「Svelte Summit Spring 2021」が開催されました。この「Svelte Summit Spring 2021」で発表されたことについては@tomoamさんがまとめてくださってます。
（イベントで発表されるサンプルアプリも良い学習リソースなので気になる人は是非！）
記事・本
Svelte とは？をまず知りたい人は以下の記事がおすすめです。
MDN のチュートリアル
JS 関係でいつもお世話になる MDN Web Docs にも Svelte チュートリアルコースがあります。
（他のフレームワークもあったことを初めて知った）
まだ英語しかないので日本語版も作成したいところですね。
REPL はこちら
（英語の記事はあまり追えてないので少しずつまとめていきたい）
Svelte 3 Up and Running
svelte-spa-routerの作者 Alessandro Segala 氏が書いた洋書です。
Svelte を使いながら SPA アプリの使い方を学べる一冊だそうです。デプロイや CI/CD の設定まで書かれているみたいで私が今年読みたい本の一冊です。
ビデオコース
Svelte Tutorial for Beginners
チャンネル登録者数 70 万人を超える人気プログラミング講師 The Net Ninja 氏のコースです。
公式のチュートリアルで触れられているトピックを中心に 1 本 5 分程度でサクッとみれます。
YouTubeのvideoIDが不正です
Svelte Mastery
こちらは動画というよりもチャンネルの紹介になります。
Svelte 専門チャンネルとして、他のライブラリを Svelte で使用する方法などコードレシピを中心に動画を投稿されています。
Svelte で組み合わせたい外部ライブラリがあったらこのチャンネルをチェックしてみるといいです。
YouTubeのvideoIDが不正です
lihautan
こちらもチャンネルの紹介になります。
Svelte のコアメンテナーの一人@tanhauhau氏の YouTube チャンネルです。
YouTubeのvideoIDが不正です
Svelte についてほぼ毎日動画を出されており、サムネに「Svelte Tutorial for Beginners」や「Svelte 101」と書かれたシリーズは初心者におすすめです。
前述した The Net Ninja 氏よりさらに広範囲のトピックをメンテナーとしての視点で解説されているので Svelte が好きな人は必見です！
YouTubeのvideoIDが不正です
Svelte.js - The Complete Guide (incl. Sapper.js)
Udemy のコースとなります。18,000 円になってますが Udemy は頻繁にセールするので、セールを気長に待ちましょう。
全部で 12.5 時間（！）のコンプリートコースになります。
Svelte 事始めから Sapper を使用したアプリ作成・デプロイまでが網羅されています。
コミュニティー
前述した公式サイトや Svelte Society 以外にも以下のコミュニティーがあります。
Discord
公式 Discord サーバーです。
svelte チャンネルで雑談や質問ができます。
resources チャンネルでは記事や動画が紹介されています。
個人的には showcase チャンネルで色んな Svelte アプリが紹介されていて見ていて楽しいです。
Reddit は海外ではかなり有名な掲示板です。
こちらにも 公式 svelte チャンネルがあります。
Svelte で作ったアプリの紹介や質問、ディスカッションなどができます。
Discord で載ってないことが投稿されているかも？
Svelte 日本 Discord
東北に住むカナダ人のウェブ開発者の方が作成された日本の Svelte コミュニティです。
いつの間にか 100 人超えのサーバーになりました。
日本語で雑談・質問したり、投稿された Svelte 記事の RSS を見ることができます。（RSS は毎日楽しみにしています！）
その他ドキュメント翻訳作業を行うこともあります。
先日「Svelte Summit Spring 2021」が開催された時にはみんなでライブ配信を見ながら雑談もしてました！
詳しくは以下の記事で
StackOverFlow
Svelte 関連の質問は svelte や svelte-3 とタグ付けることが公式で推奨されています。
質問するとメンテナーの方たちから回答が返ってくるかも？
既存の質問は以下のページから見れます
SvelteRadio
公式のインターネットラジオです。
もちろん英語のみですが一部のエピソードは transcript がついてます。
イントロの音楽がすごく好きです。
もっとリソースを知りたい人＆おわり
非公式になりますが、awesome-svelte で今回の記事でフォローできなかったリソース集がたくさん掲載されています！
追加したいページがあったら是非 Contribute しましょう！
このページもいいよ！とかあったら是非コメント欄でフィードバックお願いします！
Discussion