Svelte4がリリースされました。Svelteを始めるなら今が良いかも！

# はじめに

2023年6月22日に [Svelte] 4 がリリースされました！

https://svelte.dev/blog/svelte-4


それを踏まえて [Svelte] 界隈の現状を鑑みると、今が Svelte のはじめ時として最適ではないかなと感じたので、その理由を記載します。

# なぜ今始めるのが良いのか？

理由は以下の3点です。

- 理由1：[Svelte] 3 の改善という位置づけのため、より使いやすくなっている。
- 理由2：[インタラクティブチュートリアル] が完全リニューアルされた。
- 理由3：[SvelteLab] のおかげでゼロセットアップで [SvelteKit] を開始できる。

## 理由1：Svelte 3 の改善という位置づけのため、より使いやすくなっている

[Svelte] 4 では、以下が主な変更点です。

- パフォーマンスの改善
- 開発者開発者エクスペリエンスの改善

つまりより使いやすくなっている、という扱いです。
このタイミングで [Svelte] を始めたほうが、より [Svelte] の良さを体験できるはずです。

例えば、transition のデフォルトの挙動の変更があります。
[SvelteKit] で以下の様にファイルを作成したとします。
```html:src/routes/+layout.svelte
<nav>
	<ul class="nav">
		<li>
			<a href="/">Home</a>
		</li>
		<li>
			<a href="/list">List</a>
		</li>
	</ul>
</nav>

<slot />
```

```html:src/routes/+page.svelte
Home
```

```html:src/routes/list/+page.svelte
<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 画面に移動すると、一時的に両方の画面が混在して表示されちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/da24eaef-f280-0d0a-d8a3-fc8c6a27c2c3.png)

これに対処するためには、以下の様に `|local` を付与する必要がありました。

```diff_html
-		<li transition:fly={{y:20}}>{item}</li>
+		<li transition:fly|local={{y:20}}>{item}</li>
```

[Svelte] 4 ではこの `local` がデフォルトの挙動になったので、こういった手間が不要になりました。

## 理由2：インタラクティブチュートリアル が完全リニューアルされた

以前はこんな画面でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/3c7e5494-4d23-b077-5c9f-de8ec08e1e45.png)

最新の [インタラクティブチュートリアル] はこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/551e4f86-c179-0b86-a972-a9dfe44cc4f5.png)
左上のハンバーガーメニューをクリックすると、章を選択できるメニューが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/2d00715f-6c58-9d16-e158-4ca7b06fa19d.png)

主な違いは以下になります。

- 章を検索できるようになった。
    - 以前はセレクトボックス形式なので、スクロールが手間でした。
- エクスプローラー風な見た目でファイルを作成できるようになった。
    - これによって、実開発時のファイル構成をイメージしやすくなりました。
- [SvelteKit] のチュートリアルも統合されている。
    - なのでスムーズに [SvelteKit] へステップアップできます。

ただし、残念な点もあります。スマホ(iPhoneで確認) では利用できなかったです。見た目上はスマホでも利用できるようにデザインされているように見えるのですが、仮想環境がうまく起動してくれなかったです。ここが改善されると、どこにいても [Svelte] の学習ができて便利なんですよね...:joy:
**2023/8/24 追記**：この事象について [issue](https://github.com/sveltejs/learn.svelte.dev/issues/416) に上がってるのを見つけましたー:smile:

## 理由3：SvelteLab のおかげでゼロセットアップで SvelteKit を開始できる

2023年5月だったと思いますが、Twitter で [SvelteLab] の存在を知りました。アクセスしてみて驚いたのは、ログインすることなく仮想環境が起動されて [SvelteKit] アプリを作成できるようになっていることです。仮想環境の構築には [Stackblitz](https://stackblitz.com/) が使われているとのことです。

アクセスした直後にIDEの様な画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/26e5c61a-da70-4d70-d44a-09acc7cfa4c9.png)
右の領域で動作確認できるようになっていますし、別タブで開いて動作確認することもできます。

また、[SvelteKit] の仕様に則ったファイル作成をサポートしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/893b650f-f49d-e04c-59c1-f5cbcadd0687.png)

他にも便利な機能がたくさんあるみたいです！

なぜこのようなサービスを開発したのか、その理由が [ドキュメントサイト](https://docs.sveltelab.dev/what-is-sveltelab) に記載されていたので紹介します。

:::note
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](https://www.deepl.com)】
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 ではどんなことになるのか、今から楽しみです！:smiley:


[Svelte]:https://svelte.dev/
[SvelteKit]:https://kit.svelte.dev/
[インタラクティブチュートリアル]:https://learn.svelte.dev/tutorial/welcome-to-svelte
[REPL]:https://svelte.dev/repl/
[SvelteLab]:https://www.sveltelab.dev/