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

ノウハウ

2024.10.15

この記事は約3分で読めます。

よっしー

こんにちは。よっしーです(^^)

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

背景
SvelteKitでのアプリ構築について
1. コード解説
プレビュー
おわりに

背景

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 アプリケーションのサーバーサイド初期化に関するものです。このコードの主な要素と目的を解説します：

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

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

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

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

if (!building) { setupMyDatabase(); }

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

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

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

このコードの意図：

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

プレビュー

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