はじめに
2023年6月22日に Svelte 4 がリリースされました！
それを踏まえて Svelte 界隈の現状を鑑みると、今が Svelte のはじめ時として最適ではないかなと感じたので、その理由を記載します。
なぜ今始めるのが良いのか？
理由は以下の3点です。
- 理由1：Svelte 3 の改善という位置づけのため、より使いやすくなっている。
- 理由2：インタラクティブチュートリアル が完全リニューアルされた。
- 理由3：SvelteLab のおかげでゼロセットアップで SvelteKit を開始できる。
理由1：Svelte 3 の改善という位置づけのため、より使いやすくなっている
Svelte 4 では、以下が主な変更点です。
- パフォーマンスの改善
- 開発者開発者エクスペリエンスの改善
つまりより使いやすくなっている、という扱いです。
このタイミングで Svelte を始めたほうが、より Svelte の良さを体験できるはずです。
例えば、transition のデフォルトの挙動の変更があります。
SvelteKit で以下の様にファイルを作成したとします。
<nav>
<ul class="nav">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/list">List</a>
</li>
</ul>
</nav>
<slot />
Home
<script>
import { fly } from 'svelte/transition';
let list = [];
</script>
<button on:click={() => {list = [list.length, ...list]}}>add</button>
<ul>
{#each list as item (item)}
<li transition:fly={{y:20}}>{item}</li>
{/each}
</ul>
Svelte 3 の場合、List画面で 「add」した後に Home 画面に移動すると、一時的に両方の画面が混在して表示されちゃいます。
これに対処するためには、以下の様に |local を付与する必要がありました。
- <li transition:fly={{y:20}}>{item}</li>
+ <li transition:fly|local={{y:20}}>{item}</li>
Svelte 4 ではこの local がデフォルトの挙動になったので、こういった手間が不要になりました。
理由2：インタラクティブチュートリアル が完全リニューアルされた
以前はこんな画面でした。
最新の インタラクティブチュートリアル はこうなります。
左上のハンバーガーメニューをクリックすると、章を選択できるメニューが表示されます。
主な違いは以下になります。
- 章を検索できるようになった。
- 以前はセレクトボックス形式なので、スクロールが手間でした。
- エクスプローラー風な見た目でファイルを作成できるようになった。
- これによって、実開発時のファイル構成をイメージしやすくなりました。
-
SvelteKit のチュートリアルも統合されている。
- なのでスムーズに SvelteKit へステップアップできます。
ただし、残念な点もあります。スマホ(iPhoneで確認) では利用できなかったです。見た目上はスマホでも利用できるようにデザインされているように見えるのですが、仮想環境がうまく起動してくれなかったです。ここが改善されると、どこにいても Svelte の学習ができて便利なんですよね...
2023/8/24 追記：この事象について issue に上がってるのを見つけましたー
理由3：SvelteLab のおかげでゼロセットアップで SvelteKit を開始できる
2023年5月だったと思いますが、Twitter で SvelteLab の存在を知りました。アクセスしてみて驚いたのは、ログインすることなく仮想環境が起動されて SvelteKit アプリを作成できるようになっていることです。仮想環境の構築には Stackblitz が使われているとのことです。
アクセスした直後にIDEの様な画面が表示されます。
右の領域で動作確認できるようになっていますし、別タブで開いて動作確認することもできます。
また、SvelteKit の仕様に則ったファイル作成をサポートしてくれます。
他にも便利な機能がたくさんあるみたいです！
なぜこのようなサービスを開発したのか、その理由が ドキュメントサイト に記載されていたので紹介します。
SvelteLab is a supercharged REPL for SvelteKit, or in other words a development environment for quickly crafting and sharing Svelte code. Instantly try out an idea, reproduce that bug or share a cool pattern or problem and share it with the world!
【訳 by DeepL】
SvelteLabはSvelteKitのREPL、つまりSvelteコードを素早く作成し共有するための開発環境です。アイデアを即座に試したり、バグを再現したり、クールなパターンや問題を共有したり、そしてそれを世界と共有することができます！
素晴らしいですね！開発者のユーザーストリーを良くわかってらっしゃる！
おすすめの入門方法
以上の様に、ゼロセットアップで Svelte を学習できる環境が揃っています。それを踏まえて、私なりのおすすめ Svelte 入門方法を考えてみました。カッコ内は目安の時間です。
- （4時間）インタラクティブチュートリアル で Svelte（Part 1、Part 2） を学習
- （8時間）REPL で簡単なコンポーネントを作ったりして自信を深める。（REPLはスマホでも動くっぽい）
- （4時間）インタラクティブチュートリアル で SvelteKit（Part 3、Part 4）を学習
- （8時間）SvelteLab で簡単な SvelteKit アプリを作ったりして自信を深める。
- SvelteLab の利用は Chrome がおすすめです。（少なくとも Edge だとうまく動きませんでした）
まとめ
Svelte 4 は Svelte 5 への布石という位置づけでもあるそうです。Svelte 5 ではどんなことになるのか、今から楽しみです！