Zenn
🐌

SvelteKitなんもわからん

2024/11/24に公開
Svelte
SvelteKit
tech

概要

前回Svelteなんもわからんかったのに、そのままSvelteKitに進んじゃう。（背徳感）

Svelteはコンポーネントを作るフレームワークで、
SvelteKitはアプリを作るフレームワーク。

Node.jsやnpmを知っていることが前提になっています。

あいのこ

SvelteKitはシングルページアプリケーションとサーバーサイドレンダリングのあいのこのようなもの。

SPAだとSEOに無力ですが、サーバーサイドレンダリングがあるのでSEOできたり、良いとこどりを目指しています。

getting started

https://learn.svelte.jp/tutorial/introducing-sveltekit

をやっていき。

Webアプリフレームワークとして

SvelteKitは

  1. ルーティング
  2. ローディング
  3. レンダリング
    をしてくれるっぽいです。

ディレクトリベースルーティング

Webアプリにはルーティング（スラッシュ区切りのurl文字列に基づいた動作をさせる機能）があるものです。

src/routes/にファイル構造を作ると、その通りにRoutingされます。これがディレクトリベースです。
これはどのような仕組みになっているのだろうか？
サーバーサイドのコードを書いていないのだからサーバーサイドではないし・・・

実はこの段階からシングルページアプリケーションとサーバーサイドレンダリングのあいのこになっているそうです。

レンダリング結果として、+pages.svelteの内容が表示されます。
共通部分は+layout.svelteに書きます。<slot />の位置に各ページがレンダリングされます。

<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

<slot />

ローディング・レンダリング

データをロードしてテンプレに埋めて、レンダリングするとページが表示されると思われます。

大体は

<script>
	export let data;
</script>

すればいい感じです。dataは+page.server.jsで、ファイルやDBから読んだり、CMSから読んだりしてきます。

ディレクトリベースルーティングの欠点を補う$lib

ディレクトリベースでurl生成してくれるのはありがたい一方、import from ../../..とか書くのだるくなります。そこで

import { hoge } from $lib/hoge.js

で動く！どこかにあるsrc/libを自動で見つけてくれます。$lib便利！！！

$の意味って、「自動でやってくれる」みたいな意味なんでしょうね。

  • auto-relative（従属変数の自動更新）
  • auto-subscribe（グローバル変数みたいなやつの値が変わった時の通知）
  • store-binding（上の関連のシュガーシンタックス）

でも使われていましたから。（前回記事）

$env

多分実務上一番大切なのがこれ

.env
.env.local
.env.[mode]

に書いたこと（VAR=hogeなど）を

import { VAR } from '$env/static/private';

で読みます。$env/dynamicはちょっと難しいからいいです。

サーバー機能の活用

  • Header
  • Cookie
  • form

を操作することができます。

<form method="POST">
    <input />
</form>

だとサーバーサイドのdefaultが呼べ

<form method="POST" action="?/action1">
    <input />
</form>

だとサーバーサイドのaction1が呼べます。

サーバーサイドからのresponseを受けておく必要はあります

export const actions = {
    default: async ({ cookies, request }) => {}
}

# defaultと名前付きは共存不可
export const actions = {
    action1: async ({ cookies, request }) => {},
    action2: async ({ cookies, request }) => {}
}

ただerrorの受け方がめっちゃ癖あるっす

+page.svelteで

<script>
export let form;
</script>

{#if form?.error}
  <p>{form.error}</p>
{/if}

とやる必要があります。また、errorは標準ではだれも投げてくれないので、+page.server.jsに

import { fail } from '@sveltejs/kit';
return fail(422, {
				description: data.get('description'),
				error: error.message
			})

みたいなの書かなくてはいけません。

APIサーバーとして

export function GET() {
    // generate result

	return new Response(result, {
		headers: {
			'Content-Type': 'application/json'
		}
	})
}

// suger syntax
import { json } from '@sveltejs/kit';
export function GET() {
    return json(result);
}

こんな感じ。

感想

とにかくルールを覚えると良しなにやってくれる

って感想です。Webアプリフレームワークみんなそう。私はいつもこういう頭ごなしにルール覚えて！みたいなブラックボックスが苦手なので苦手だなぁという感想を持ちました。

だから社会に適応できないんでしょうね

蛇足

ここからは知らなくても当面困らなさそうなことです。

命名規則

+から始まるファイルが、SvelteKitが処理するファイルなんだと思います。

  • +page.svelte
  • +page.server.js
  • +layout.svelte
  • +layout.server.js
  • +server.js

+page.svelteが多分クライアントサイドでレンダリングされて
+server.jsが多分サーバーサイドで実行されてるんだろうなぁ
などと思いつつ、しくみは我々のような愚民にはまだ明示されてないのでよくわからんでした。

仕組み

まだなんもわからん、わかったら書く

Stores

グローバル変数っぽいやつだったStoreがSvelteKitにもあります。

  • page
    • url / params / route / status / error / data / form
  • navigating
    • from / to / type
  • updated
    • true: 最初にページを開いてからそれ以降にアプリの新バージョンがデプロイされた

phpと違ってわざわざ言及しなきゃいけないんでめんどい

<script>
	import { page } from '$app/stores';
</script>

error, redirect

import { error, redirect } from '@sveltejs/kit';

javascriptのデフォルトじゃないいい感じのことができます

Discussion