📚

[2021年版]Svelte学習リソース集

4 min read

こんにちは、@miruoです。

Svelte をこれから学びたい&使っている人が日々増えている中、
日本語で書かれたリソース集がなかったのでコメントもいれつつまとめてみました。
随時更新します!

※Sapper/SvelteKit については本記事では取り上げません。(Kit のほうが安定してきた頃合いに別途記事を作ろうと思います)

公式ガイド

公式サイト

https://svelte.dev/

まず最初は Svelte の公式サイトです。チュートリアルや API リファレンスはもちろんありますが、
Svelte サイトの一番の強みは Examples ページだと思ってます。
この Example 集、簡単なものから難しめのものまで豊富なアプリ例が記載されており、例をあげると次のものがあります。

  • Rick Astley の gif 画像が表示されるアプリ(※海外では rickroll というミームネタでかなり有名です)
  • マップアプリ
  • 動画プレイヤー
  • Hacker News クローンアプリ

ただ眺めるだけでも楽しいですが、REPL という Svelte 版 CodePen の機能を使い、こちらでコードを編集してアプリを作ることもできます。
(CodePen と同じくコード共有もできます)

ちなみに日本語翻訳版もあるのでこちらも是非!

https://sveltejp.dev/

Svelte Society

https://sveltesociety.dev

Svelte Society は公式コミュニティーサイトです。
こちらでは公式サイトには載っていないコードレシピ・有用なライブラリ集・チートシートが載っています。
公式サイトに載ってないことを知りたかったらここも覗いてみるといいでしょう。

その他イベント情報がまとめられており、先日は「Svelte Summit Spring 2021」が開催されました。この「Svelte Summit Spring 2021」で発表されたことについては@tomoamさんがまとめてくださってます。
(イベントで発表されるサンプルアプリも良い学習リソースなので気になる人は是非!)

https://zenn.dev/tomoam/articles/889618f2e6e62f

記事・本

Svelte とは?をまず知りたい人は以下の記事がおすすめです。

https://zenn.dev/toshitoma/articles/what-is-svelte

MDN のチュートリアル

JS 関係でいつもお世話になる MDN Web Docs にも Svelte チュートリアルコースがあります。
(他のフレームワークもあったことを初めて知った)
まだ英語しかないので日本語版も作成したいところですね。

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started

REPL はこちら

https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2

(英語の記事はあまり追えてないので少しずつまとめていきたい)

Svelte 3 Up and Running

svelte-spa-routerの作者 Alessandro Segala 氏が書いた洋書です。
Svelte を使いながら SPA アプリの使い方を学べる一冊だそうです。デプロイや CI/CD の設定まで書かれているみたいで私が今年読みたい本の一冊です。

https://www.amazon.co.jp/-/en/Alessandro-Segala-ebook/dp/B08D6T6BKS

ビデオコース

Svelte Tutorial for Beginners

チャンネル登録者数 70 万人を超える人気プログラミング講師 The Net Ninja 氏のコースです。
公式のチュートリアルで触れられているトピックを中心に 1 本 5 分程度でサクッとみれます。

https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO

Svelte Mastery

こちらは動画というよりもチャンネルの紹介になります。

Svelte 専門チャンネルとして、他のライブラリを Svelte で使用する方法などコードレシピを中心に動画を投稿されています。
Svelte で組み合わせたい外部ライブラリがあったらこのチャンネルをチェックしてみるといいです。

https://www.youtube.com/channel/UCg6SQd5jnWo5Y70rZD9SQFA

lihautan

こちらもチャンネルの紹介になります。
Svelte のコアメンテナーの一人@tanhauhau氏の YouTube チャンネルです。

https://www.youtube.com/c/lihautan/featured

Svelte についてほぼ毎日動画を出されており、サムネに「Svelte Tutorial for Beginners」や「Svelte 101」と書かれたシリーズは初心者におすすめです。
前述した The Net Ninja 氏よりさらに広範囲のトピックをメンテナーとしての視点で解説されているので Svelte が好きな人は必見です!

https://www.youtube.com/playlist?list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR

Svelte.js - The Complete Guide (incl. Sapper.js)

Udemy のコースとなります。18,000 円になってますが Udemy は頻繁にセールするので、セールを気長に待ちましょう。
全部で 12.5 時間(!)のコンプリートコースになります。
Svelte 事始めから Sapper を使用したアプリ作成・デプロイまでが網羅されています。

https://www.udemy.com/course/sveltejs-the-complete-guide/

コミュニティー

前述した公式サイトや Svelte Society 以外にも以下のコミュニティーがあります。

Discord

公式 Discord サーバーです。

svelte チャンネルで雑談や質問ができます。
resources チャンネルでは記事や動画が紹介されています。

個人的には showcase チャンネルで色んな Svelte アプリが紹介されていて見ていて楽しいです。

https://svelte.dev/chat

Reddit

Reddit は海外ではかなり有名な掲示板です。
こちらにも 公式 svelte チャンネルがあります。

Svelte で作ったアプリの紹介や質問、ディスカッションなどができます。
Discord で載ってないことが投稿されているかも?

https://www.reddit.com/r/sveltejs/

Svelte 日本 Discord

東北に住むカナダ人のウェブ開発者の方が作成された日本の Svelte コミュニティです。
いつの間にか 100 人超えのサーバーになりました。

日本語で雑談・質問したり、投稿された Svelte 記事の RSS を見ることができます。(RSS は毎日楽しみにしています!)
その他ドキュメント翻訳作業を行うこともあります。
先日「Svelte Summit Spring 2021」が開催された時にはみんなでライブ配信を見ながら雑談もしてました!

https://discord.com/invite/YTXq3ZtBbx

詳しくは以下の記事で

https://zenn.dev/tomoam/articles/6c81ced3fd47b7
https://qiita.com/am_nimitz3/items/762d774e434c568fe000

StackOverFlow

Svelte 関連の質問は svelte や svelte-3 とタグ付けることが公式で推奨されています。
質問するとメンテナーの方たちから回答が返ってくるかも?

既存の質問は以下のページから見れます

https://stackoverflow.com/questions/tagged/svelte+or+svelte-3

SvelteRadio

公式のインターネットラジオです。
もちろん英語のみですが一部のエピソードは transcript がついてます。
イントロの音楽がすごく好きです。

https://www.svelteradio.com/

もっとリソースを知りたい人&おわり

非公式になりますが、awesome-svelte で今回の記事でフォローできなかったリソース集がたくさん掲載されています!
追加したいページがあったら是非 Contribute しましょう!

https://github.com/TheComputerM/awesome-svelte

このページもいいよ!とかあったら是非コメント欄でフィードバックお願いします!

GitHubで編集を提案

Discussion

ログインするとコメントできます