Svelte入門：SvelteKitでのアプリ構築

今日は、SvelteKitでのアプリ構築について解説しています。

背景

SvelteKitでのアプリ構築について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

SvelteKitでのアプリ構築について

SvelteKitアプリのビルドは2段階で行われます。これらの段階は両方ともvite buildを実行したとき（通常はnpm run buildを介して）に発生します。

まず、Viteがサーバーコード、ブラウザコード、そしてサービスワーカー（存在する場合）の最適化された本番ビルドを作成します。適切な場合、プリレンダリングもこの段階で実行されます。

次に、アダプターがこの本番ビルドを取り、ターゲット環境に合わせて調整します。

SvelteKit は、ビルド中に分析のために +page/layout(.server).js ファイル (およびそれらがインポートするすべてのファイル) を読み込みます。この段階で実行しないコードはすべて、$app/environment からのビルドが false であることを確認する必要があります。

import { building } from '$app/environment';
import { setupMyDatabase } from '$lib/server/database';

if (!building) {
	setupMyDatabase();
}

export function load() {
	// ...
}

コード解説

上記のコードは SvelteKit アプリケーションのサーバーサイド初期化に関するものです。このコードの主な要素と目的を解説します：

1. import { building } from '$app/environment';

• SvelteKit の環境変数 building をインポートしています。
• この変数は、アプリケーションがビルド中かどうかを示すブール値です。

1. import { setupMyDatabase } from '$lib/server/database';

• カスタムの setupMyDatabase 関数をインポートしています。
• これはおそらくデータベース接続を設定する関数です。

1. if (!building) { setupMyDatabase(); }

• アプリケーションがビルド中でない場合にのみ、データベースのセットアップを行います。
• これは、ビルド時にデータベース接続を試みることを防ぐためのものです。

1. export function load() { // ... }

• SvelteKit のロード関数をエクスポートしています。
• この関数の詳細な実装は省略されています。

このコードの意図：

• ビルド時にデータベース接続を試みることを避け、実際のサーバー運用時にのみデータベースをセットアップすることを目的としています。

プレビュー

ビルド後、vite preview（npm run previewを介して）を使用して、ローカルで本番ビルドを確認することができます。ただし、これはアプリをNode上で実行するため、デプロイされたアプリの完全な再現ではありません – platformオブジェクトのようなアダプター固有の調整は、プレビューには適用されません。

おわりに

今日は、 SvelteKitでのアプリ構築について解説しました。