とりあえず SvelteKit 試してみた

## [What's the deal with SvelteKit?](https://svelte.dev/blog/whats-the-deal-with-sveltekit)

`SvelteKit` をご存知でしょうか？

これは、ずっとバージョン 1.0 にならなかった `Sapper` を `Svelte` に取り込み再構築したものみたいです。
`Sapper` を使って Web サービスを公開した身としては、これを使ってみない手はないですね。

ということで、まだオーブンベータも始まっていませんが、 `SvelteKit` を試していこうと思います！



## 試した環境

- Windows10
- `Node.js` `14.15.4`
- `npm` `6.14.10`
- `@sveltejs/kit` `1.0.0-next.24`

## インストール

プロジェクトフォルダで次のコマンドを打てば、 CLI によるインストールが開始します。

```console
npm init svelte@next
```

プロジェクトフォルダをインストール時に作成する場合は、

```console
npm init svelte@next my-app
```

このようにプロジェクト名を最後につければ OK です。

コマンドを実行すると……
![image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/7902c014-a979-ea12-4d14-bd142425bd35.png)

ｗｗ

**「まだ使う準備できてないからブレーキ踏んで！！」** だそうです。
ただ、警告を理解した上で自由に遊ぶのは OK みたいなので、続けていきましょう。

<br>

```
? Directory not empty. Continue? » (y/N)
```

インストール先にすでにファイルやフォルダがある場合に大丈夫か聞いてくれます。

```
? Use TypeScript in components? » (y/N)
```

`TypeScript` を使うかどうか聞いてくれます。

```
? What do you want to use for writing Styles in Svelte components? » - Use arrow-keys. Return to submit.
>   CSS
    Less
    SCSS
```

スタイルシートに `CSS` `Less` `SCSS` のどれを使うか聞いてくれます。
インストールしたら `SCSS` を導入しようと思っていたので、インストール時に選べるのは嬉しいですね！
<br>
`@sveltejs/kit` バージョン 1.0.0-next.24 時点では以上でインストールが完了します。

## アプリ起動

パッケージのインストールは、 `yarn` でも `npm` でも OK です。

```
yarn
```

```
npm i
```

ちなみに、僕の環境だと次のようなエラーが出ました。

```
error postcss@8.2.4: The engine "node" is incompatible with this module. Expected version "^10 || ^12 || >=14". Got "13.14.0"
```

なぜか `Node.js` のバージョン 13 はハブられているみたいなので、エラーが出た人はバージョンを上げると良いです。

あとは起動！

```
npm run dev
```

![image02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/4570c56f-7abf-54ba-a4c3-92311f14befd.png)
出ましたね！
`Sapper` に比べてあっさりした画面です。

## Sapper と比較してみる

### プロジェクト構造

#### SvelteKit

まずは `SvelteKit` のプロジェクト構造を見てみます。
![image03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/d62ff629-e31b-a129-a7e6-71b86c7df0fc.png)
画面と同じく、かなりあっさりしています。

#### Sapper

続いて `Sapper` 。
![image04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/b049421f-31fa-3e52-365d-4455c3bdbc7d.png)

#### 考察

プロジェクト構造はほとんど同じものになっていますが、大きな違いは `SvelteKit` がモジュールバンドラを使わずに `Snowpack` を利用しているという点です。
`Snowpack` を利用することで `Webpack` や `Rollup` を利用した場合よりも高速に開発が可能になります。

一方、 `Sapper` には SSR （サーバーサイドレンダリング）を実現するための機構が用意されていますが、 `SvelteKit` には現時点でそれがないようです。
公式のブログでは `Snowpack` と連携をとって SSR の準備をしているような記述がありますので、今後追加されるのではないでしょうか。

### ソースコード

#### SvelteKit

```html
<script>
	import Counter from '$components/Counter.svelte';
</script>

<main>
	<h1>Hello world!</h1>

	<Counter/>
	<p>Visit the <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
</main>

<style lang="scss">
	:root {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	main {
		text-align: center;
		padding: 1em;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4rem;
		font-weight: 100;
		line-height: 1.1;
		margin: 4rem auto;
		max-width: 14rem;
	}

	p {
		max-width: 14rem;
		margin: 2rem auto;
		line-height: 1.35;
	}

	@media (min-width: 480px) {
		h1 {
			max-width: none;
		}

		p {
			max-width: none;
		}
	}
</style>
```

まあ普通に `Svelte` のコードです。
インストールでも書きましたが、 `SCSS` がいきなり使えるのはありがたいです。

また、 `Snowpack` でエイリアスを設定しているため、コンポーネントをインポートする際のパスの書き方が `Sapper` と異なっています。

#### Sapper

```html
<script>
	import successkid from 'images/successkid.jpg';
</script>

<style>
	h1, figure, p {
		text-align: center;
		margin: 0 auto;
	}

	h1 {
		font-size: 2.8em;
		text-transform: uppercase;
		font-weight: 700;
		margin: 0 0 0.5em 0;
	}

	figure {
		margin: 0 0 1em 0;
	}

	img {
		width: 100%;
		max-width: 400px;
		margin: 0 0 1em 0;
	}

	p {
		margin: 1em auto;
	}

	@media (min-width: 480px) {
		h1 {
			font-size: 4em;
		}
	}
</style>

<svelte:head>
	<title>Sapper project template</title>
</svelte:head>

<h1>Great success!</h1>

<figure>
	<img alt="Success Kid" src="{successkid}">
	<figcaption>Have fun with Sapper!</figcaption>
</figure>

<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>
```

まあ普通に `Svelte` のコードです。
`SCSS` を使うためには個別にインストールが必要です。
（インストールするための方法を [こちら](https://qiita.com/azukisiromochi/items/d4bfd686b6bb4ca6dc78) にまとめていますので、興味がある方はどうぞ）

#### 考察

コーディングをする上で `SvelteKit` を選んでも、 `Sapper` を選んでも、大差がないです。
そもそも `Svelte` がかなり書きやすいフレームワークなので、コーディングのしやすさはそこから来ているものだと思います。

### Sapper から SvelteKit への移行について

これは公式ブログで言及されていますが、移行にかかる負担は少ないとのことです。
プロジェクト構造もソースコードも大きな差異がありませんでしたし、たしかにそのとおりだと思います。

現時点では SSR に関わる部分のみ修正が発生すると記載がありますが、これも解消に向かうのではないでしょうか。

## まとめ

`SvelteKit` を試してみましたが、かなり期待の持てるものだと思います！
これからオーブンベータが始まるということなので、引き続き動向を追っていきます！

現時点では Lint などの主要パッケージが入っていないようなので、そのあたりも試したら記事にしてみますね :yum: