SvelteKitについて

🚨 SvelteKitは初期開発段階です.バージョンが1.0に達する前に、いくつかの変更が発生する可能性があります.SvelteKit公式ドキュメント -
🚨 本明細書のほとんどの例示的なコードは、SvelteKit公式ドキュメントから来ている.
もしあなたがスヴィットとは何か知らないなら?ここです。
SvelteKit?
ResactにNextJS、VueにNuxtがあるように、SvelteにもSvelteKitがあります.NextJSとNuxtはSSR、SSGなど多様な機能を提供している.SvelteKitの最も魅力的な部分はSvelteを使うことです.SvleteとViteを使用すると、信じられない開発者体験が楽しめます.
💡 Viteについては、後で文章を書くつもりです.
SvelteKitは以下の機能をサポートしています.
1. Build Optimizations
2. Offline support
3. Prefetch
4. Configurable Rendering
5. SSR
6. CSR
7. SSG
また、SvelteKitは基本的にViteを内蔵しており、基本的にHMRをサポートしている.
使ってみればわかるように、HMRは本当に大きな開発者経験を提供しています.(保存ボタンを押すとページが更新されます!)
Installation & Setup
SvelteKitの設定を使うのはとても簡単です.

npm init svelte@next my-app
cd my-app
yarn
yarn run dev

ルート
NextJSを学んだことがある人なら、SvelteKitのRoutingはもう覚えていると思います.SvelteKitはfilesystem-based routerを使用し、src/routesフォルダ内のファイルはSvelteKitによって自動的にファイル名に従ってルーティングされます.例えば、home.svelteという名前のファイルをsrc/routesフォルダに入れると、/homeアドレスに達すると、home.svelteが自動的にレンダリングされる.
どうてきルーティング
動的ルーティングを使用する場合は、次のようにファイル名を次のように書くことができます.

[id].svelte

上記のファイルをproductsという名前のフォルダに作成すると、products/1、products/2などの後にどんな数字を付けてもsvletKit[id]が1つあります.svelteで接続します.
しゅうてん
NextJSとSvelteKitの中で一番素晴らしい部分だと思います.他のファイルとは異なり、エンドポイントは.tsまたは.jsによって記述され、ここで記述されたコードはブラウザで実行されず、サーバ上でのみ実行されます.セキュリティ上非常に安全な位置にあり、エンドポイントを使えばバックエンドなしで直接DBにアクセスできるという意味です.
また、ページとエンドポイントのファイル名が同じであれば、ページのPropsをエンドポイントからインポートします!これらはすべて自動的に完了し、開発者は設定する必要はありません.
サンプルコード

import db from '$lib/database';

/** @type {import('@sveltejs/kit').RequestHandler} */
export async function get({ params }) {
	// `params.id` comes from [id].js
	const item = await db.get(params.id);

	if (item) {
		return {
			body: { item }
		};
	}

	return {
		status: 404
	};
}

次のSvelteコードのitemは上のコードから自動的にインポートされます.

<script>
	// populated with data from the endpoint
	export let item;
</script>

<h1>{item.title}</h1>

POST, PUT, PATCH, DELETE
また、NextJSのようにget、post、put patch、delなどの関数も提供されています.methodではmethodとは何か、if文で区切るような面倒なことをする必要はありません.

import * as db from '$lib/database';

export async function get() {
	const items = await db.list();

	return {
		body: { items }
	};
}

export async function post({ request }) {
	const [errors, item] = await db.create(request);

	if (errors) {
		// return validation errors
		return {
			status: 400,
			body: { errors }
		};
	}

	// redirect to the newly created item
	return {
		status: 303,
		headers: {
			location: `/items/${item.id}`
		}
	};
}

<!-- src/routes/items.svelte -->
<script>
	// The page always has access to props from `get`...
	export let items;

	// ...plus props from `post` when the page is rendered
	// in response to a POST request, for example after
	// submitting the form below
	export let errors;
</script>

{#each items as item}
	<Preview item={item}/>
{/each}

<form method="post">
	<input name="title">

	{#if errors?.title}
		<p class="error">{errors.title}</p>
	{/if}

	<button type="submit">Create item</button>
</form>

次の例では、SvelteKit自身がgetに入るリクエストがget関数がpostに入るリクエストに対してpost関数を実行することを示します.この方法を使用すると、コードは非常に簡単できれいになります.比較のためにget,post関数を使用しないコードを持ってきました.

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    // put some code you want!
  }

  res.statusCode = 405;
  return res.end();
};

上のコードはNextJSの端点です.△NextJSも端点と呼ぶかどうか分かりません.受信した要求に応じて、その要求がGETであるかPOSTであるかを分類する必要がある.これらの細かいコードは可読性を下げる原因になると思いますので、SvelteKitのこれらの機能は本当に良いです.
Body parsingrequest.bodyも近づきやすいです.

export async function post({ request }) {
	const data = await request.formData(); // or .json(), or .text(), etc
}

リクエストの後に必要なデータフォーマットを貼り付けるだけで、必要なデータを簡単に抽出できます.
HTTP method overrides
HTMLのFormは基本的にGETとPOSTしかサポートしていません.ただし、SvelteKitで設定する場合は、PUT、PATCH、DELETEなど他の方法を使用することもできます.

// svelte.config.js
export default {
	kit: {
		methodOverride: {
			allowed: ['PUT', 'PATCH', 'DELETE']
		}
	}
};

<form method="post" action="/todos/{id}?_method=PUT">
	<!-- form elements -->
</form>

Private modules
ファイルまたはフォルダ名または.先頭にある場合は、ファイルとフォルダはルーティングされません.
高度なルーティング

Rest parameters
複数のダイナミックルーティングが可能です.
Ex) src/routes/[category]/[item].svelte or src/routes/[category]-[item].svelte

💡 パラメータがx-y-zのようにぼやけている場合は、xをcategory、y-zをitemとして判別する.

Sorting

src/routes/[a].js
src/routes/[b].svelte
src/routes/[c].svelte
src/routes/[...catchall].svelte
src/routes/foo-[bar].svelte

上記のファイルがある場合、/foo-abcというアドレスはすべてのファイルと一致する.したがって、SvleteKitは、以下のルールに従って上のファイルをソートします.

が詳細であればあるほど、無条件優先度が高くなります.(Ex: src/routes/foo-[bar].svelte )

シングル・エンド・ポイントは、最も優先度が高い.

Restパラメータは、最も低い優先度を有する.

残りはアルファベット順に解決します.

src/routes/foo-[bar].svelte
src/routes/[a].js
src/routes/[b].svelte
src/routes/[c].svelte
src/routes/[...catchall].svelte

上記の規則に従って、ファイルは以下の順序で並べられ、/foo-abcはsrc/routes/foo-[bar].svelteと一致する.

Fallthrough routes

上記のルールでは、/foo-def度src/routes/foo-[bar].svelteではなく、/foo-def万src/routes/foo-[bar].svelteを組み合わせるべきで、src/routes/[b].svelteを組み合わせるならfallthroughを選ぶことができます.

<script context="module">
	export function load({ params }) {
		if (params.bar === 'def') {
			return { fallthrough: true };
		}

		// ...
	}
</script>

export function get({ params }) {
	if (params.a === 'foo-def') {
		return { fallthrough: true };
	}
 
	// ...
}

前述したように、src/routes/foo-[bar].svelteおよびsrc/routes/[a].svelteの両方がfallroughオプションを使用して要求を送信する場合、src/routes/[b].svelteに達する.
Layouts
多くのWebアプリケーションでは、各ページに表示しなければならない要素があり、Header、Footerなどはすべてのページに存在しなければならないので、これらの要素をすべてのページにコピーして貼り付けるのは面倒です.しかし、Layout componentsを使えば、面倒を減らすことができます.
まず、Layoutコンポーネントを作成するには、src/routes/__layout.svelteというファイルを作成する必要があります.
基本レイアウトは次のとおりです.

<slot></slot>

レイアウトページには任意の内容を追加できますが、<slot>を含める必要があります.レイアウトに<nav>を追加する場合は、次のように入力する必要があります.

<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/settings">Settings</a>
</nav>

<slot></slot>

レイアウトページにnavを作成すると、どのページに行ってもnavが常に表示されます.(コピー＆ペーストは不要!)
Nested layouts
実際の応用では,/settingsページしか存在しないことは多くない.ほとんどは/settings/profile、/settings/notificationsなどのネストされたページがあり、これらのページは重複する要素を有することが多い.したがって、/settingsの下のファイルにのみ適したレイアウトを作成する場合は、src/routes/settings/__layout.svelteという名前のファイルを作成できます.
Resets__layout.reset.svelteという名前のファイルを作成すると、フォルダ内のファイルは既存のレイアウトの影響を受けずにデフォルトのレイアウトを使用します.たとえば、src/routes/admin/__layout.reset.svelteという名前のファイルを作成すると、/adminフォルダの下にあるすべてのファイルがデフォルトのレイアウトを使用します.
Error pages
ページのロードに失敗した場合、SvelteKitはErrorpageを開くことができます.また、Errorpageは、__error.svelteというファイルでカスタマイズすることもできます.
たとえば、src/routes/settings/notifications/index.svelteのロードに失敗した場合、SvelteKitはsrc/routes/settings/notifications/__error.svelteをレンダリングしようとし、src/routes/settings/notifications/__error.svelteという名前のファイルがない場合、src/routes/settings/__error.svelteまたはsrc/routes/__error.svelteをレンダリングします.
また、エラーページにload関数がある場合、errorおよびstatusのパラメータが得られる.

<script context="module">
	/** @type {import('@sveltejs/kit').ErrorLoad} */
	export function load({ error, status }) {
		return {
			props: {
				title: `${status}: ${error.message}`
			}
		};
	}
</script>

<script>
	export let title;
</script>

<h1>{title}</h1>

Loading
pageまたはlayoutとして指定された構成部品は、loadという関数を使用できます.load関数は、構成部品の作成前に実行される関数です.この関数を使用すると、構成部品を作成する前にデータを取得し、ロードを解除できます.
データがエンドポイントから来ている場合は、この関数は必要ありませんが、外部APIを使用している場合は、この関数を使用できます.

<script context="module">
	/** @type {import('@sveltejs/kit').Load} */
	export async function load({ params, fetch, session, stuff }) {
		const response = await fetch(`https://cms.example.com/article/${params.slug}.json`);

		return {
			status: response.status,
			props: {
				article: response.ok && (await response.json())
			}
		};
	}
</script>

load関数の動作は、NextJSのgetStaticPropsまたはgetServerSidePropsと非常に類似している.しかし,load関数の違いはclientとserverが両方とも上で動作していることである.
SvelteKitのloadは特殊な機能を持っている.

サーバ上のCookieにアクセスできます.

HTTPコールを発行せずに、アプリケーション自体のエンドポイントを要求することができます.

を使用すると、水和のために応答のコピーが作成され、トップページロードに送信される.

詳細については、ここです。を参照してください.
n/a.結論
今日はSvelteKitについて知りました.本明細書に記載されていないHooks、モジュール、Service Workers、Anchor optionsなどについては、ここです。を参照してください.(難点は英語が読みにくいこと.)