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 がリリースされましたー！
SvelteKit の学習
事前に用意するものは Chrome だけで十分です。前提知識は（たぶん）必要ありません。（SSR と CSR の違い を理解できてれば怖いものなしです。）
さっそく チュートリアル （日本語版） にアクセスしましょう！
このチュートリアルは Svelteのとき と同様よくできていて、ブラウザ上でコードを書いて動かすことができます。
しかも、フォルダのツリー構造が表示されるため、より分かり易いです。
画面構成は以下の様になっていて、①説明を読む ②コードを書く ③結果を確認する を1画面でスムーズに進めることができます。（Svelteのチュートリアルと同じですね！）
進め方はだいたいわかると思うのでここでは省きます。
チュートリアルを完了できれば SvelteKit の基礎が身につきます。
本格的にアプリケーションを作成したくなったら
GitHub Codespaces を使うのが便利です。 Chrome さえあれば開発環境が全て揃います！
GitHub にリポジトリを作成する
GitHub にアクセスしてアカウントを作成しましょう。
その後、以下の様にリポジトリの新規作成を開始します。
で、こんな感じでリポジトリの設定をして「Create repository」ボタンをクリックします。
（Public を選択するのが重要です。じゃないと無料アカウントで GitHub Codespaces を利用できないはずです。）
リポジトリが作成されましたー。
GitHub Codespaces を起動する
以下の様に「Create codespace on main」ボタンをクリックすると Codespaces が別タブで起動します。
こんな感じです。ほぼ VSCode ですね！
SveteKit をセットアップする
ドキュメントに記載された手順を参考にプロジェクトを作成します。
Codespaces の「ターミナル」領域でコマンドを実行できます。
$ npm create svelte@latest .
いろいろ聞かれるので、こんな感じで回答します。
起動する
以下のコマンドを実行します。
npm install
npm run dev
すると、以下の様にブラウザーで開くかどうかをポップアップで表示されるので「ブラウザ―で開く」ボタンをクリックします。(尚、キーボードの Ctrl キーを押しながら http://127.0.0.1:5173/をクリックしても同じ結果になります。)
たまにポートフォワードがうまくいかず 502 エラーが発生します。
この場合、コマンド末尾に -- --host 127.0.0.1 を追加してみてください。
こんな感じで表示されます。ちゃんとアプリにアクセスできました！
Codespaces で動かす際の注意点
POST 送信時に CORS チェックでエラーになってしまいます。
これは csrf の設定を false にすることで回避できます。
以下の様に設定します。が、この設定はコミットしてはいけません。
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 さえあれば手軽に始めることができます。
是非試してみてください！😀