フルスタックなWebフレームワーク SvelteKit の始め方

# SvelteKit とは

[SvelteKit] とは [Next.js] や [NuxtJS] のような、SSR（Server Side Rendering） も可能なフルスタックWebアプリケーションフレームワークです。
対応関係はこんな感じです。

|フロントライブラリ|フルスタックフレームワーク|
|---|---|
|[Svelte]|[SvelteKit]|
|[React]|[Next.js]|
|[Vue.js]|[NuxtJS]|

# ついに 1.0 がリリースされました！

2022年12月14日、待望の SvelteKit 1.0 がリリースされましたー！

https://svelte.dev/blog/announcing-sveltekit-1.0

# SvelteKit の学習

事前に用意するものは [Chrome] だけで十分です。前提知識は（たぶん）必要ありません。（[SSR と CSR の違い](https://qiita.com/fsd-tetsu/items/5363878fd5466c6de28f) を理解できてれば怖いものなしです。）

さっそく [チュートリアル](https://learn.svelte.dev/tutorial/introducing-sveltekit) （[日本語版](https://learn.svelte.jp/tutorial/introducing-sveltekit)） にアクセスしましょう！

このチュートリアルは [Svelteのとき](https://qiita.com/fsd-tetsu/items/e32c44f2725dd1f1c021) と同様よくできていて、ブラウザ上でコードを書いて動かすことができます。
しかも、フォルダのツリー構造が表示されるため、より分かり易いです。
画面構成は以下の様になっていて、①説明を読む ②コードを書く ③結果を確認する を1画面でスムーズに進めることができます。（Svelteのチュートリアルと同じですね！）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/f0ed0367-aeeb-a68a-4549-b26938063297.png)

進め方はだいたいわかると思うのでここでは省きます。
チュートリアルを完了できれば SvelteKit の基礎が身につきます。

# 本格的にアプリケーションを作成したくなったら

[GitHub Codespaces] を使うのが便利です。 [Chrome] さえあれば開発環境が全て揃います！

## GitHub にリポジトリを作成する

[GitHub] にアクセスしてアカウントを作成しましょう。
その後、以下の様にリポジトリの新規作成を開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/d7ecb392-efcf-6425-33b2-f113054fb7b3.png)

で、こんな感じでリポジトリの設定をして「Create repository」ボタンをクリックします。
（`Public` を選択するのが重要です。じゃないと無料アカウントで [GitHub Codespaces] を利用できないはずです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/d9d6af95-ea81-49a4-31e2-9873c2ae90cc.png)

リポジトリが作成されましたー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/176c9934-8866-3aad-9047-7b3b060d04e1.png)

## GitHub Codespaces を起動する

以下の様に「Create codespace on main」ボタンをクリックすると Codespaces が別タブで起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/08829e3d-6959-89d3-72cc-3c00762dcb20.png)

こんな感じです。ほぼ [VSCode] ですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/d35e73ad-2f13-03ca-cfab-ffd7dd4f8446.png)

## SveteKit をセットアップする

[ドキュメント](https://kit.svelte.dev/docs/creating-a-project)に記載された手順を参考にプロジェクトを作成します。
Codespaces の「ターミナル」領域でコマンドを実行できます。

```sh:ターミナル
$ npm create svelte@latest .
```
いろいろ聞かれるので、こんな感じで回答します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/7055236b-c2a0-e410-282e-b811ea36f052.png)

## 起動する

以下のコマンドを実行します。

```sh:ターミナル
npm install
npm run dev
```

すると、以下の様にブラウザーで開くかどうかをポップアップで表示されるので「ブラウザ―で開く」ボタンをクリックします。(尚、キーボードの Ctrl キーを押しながら `http://127.0.0.1:5173/`をクリックしても同じ結果になります。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/5073a33c-83b1-f22c-fc38-62c3c4234dab.png)

:::note warn
たまにポートフォワードがうまくいかず 502 エラーが発生します。
この場合、コマンド末尾に -- --host 127.0.0.1 を追加してみてください。
:::

こんな感じで表示されます。ちゃんとアプリにアクセスできました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/10793e8f-a435-1ed1-960e-c5fb687daace.png)

## Codespaces で動かす際の注意点

POST 送信時に CORS チェックでエラーになってしまいます。
これは csrf の設定を false にすることで回避できます。

以下の様に設定します。が、**この設定はコミットしてはいけません**。

```diff_javascript:svelte.config.js
import adapter from '@sveltejs/adapter-auto';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
-    adapter: adapter()
+    adapter: adapter(),
+    csrf: false
  }
};
 
export default config;
```

## その後...

あとは前出のチュートリアルを見ながら好きなように実装しましょう！
[Next.js] や [NuxtJS] に比べて起動速度と修正が反映される速度がとても速いです。実装するのが（たぶん）楽しく感じるはずです。

# まとめ

以上の様に、[SvelteKit] は [Chrome] さえあれば手軽に始めることができます。
是非試してみてください！😀

# 情報源

- [SvelteKit]／[SvelteKit（日本版）]
- [Svelte]／[Svelte（日本版）]
- [Discord]／[Discord（日本版）]


[Svelte]:https://svelte.dev
[SvelteKit]:https://kit.svelte.dev/
[Discord]:https://svelte.dev/chat
[Svelte（日本版）]:https://svelte.jp/
[SvelteKit（日本版）]:https://kit.svelte.jp/
[Discord（日本版）]:https://discord.com/invite/YTXq3ZtBbx
[React]:https://reactjs.org/
[Next.js]:https://nextjs.org/
[Vue.js]:https://vuejs.org/index.html
[NuxtJS]:https://nuxtjs.org/
[GitHub]:https://www.github.com
[GitHub Codespaces]:https://github.co.jp/features/codespaces
[VSCode]:https://code.visualstudio.com/
[Chrome]:https://www.google.com/intl/ja_jp/chrome/