Svelte入門：SvelteKitでルーティング -Vol.5-

よっしー

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

今日は、ルーティングについて解説しています。

スポンサーリンク

背景

ルーティングについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

$types

これまでの例では、$types.d.tsファイルから型をインポートしてきました。これは、TypeScript（またはJSDoc型注釈を使用したJavaScript）を使用している場合に、SvelteKitが隠しディレクトリに作成するファイルで、ルートファイルを扱う際に型の安全性を提供します。例えば、export let dataをPageData（または+layout.svelteファイルの場合はLayoutData）で注釈すると、TypeScriptはdataの型がloadから返されたものであると認識します。

// src/routes/blog/[slug]/+page.svelte
<script>
	/** @type {import('./$types').PageData} */
	export let data;
</script>

+page.js、+page.server.js、+layout.js、+layout.server.jsファイルに対して、PageLoad、PageServerLoad、LayoutLoad、LayoutServerLoadでload関数を注釈すると、パラメータと戻り値が正しく型付けされます。

VS CodeやTypeScriptプラグインをサポートするIDEを使用している場合、これらの型を省略できます。SvelteのIDEツールが正しい型を挿入してくれるため、自分で型を記述しなくても型チェックが行われます。これは、コマンドラインツールのsvelte-checkでも機能します。

詳細は、$typesの省略に関するブログ記事をご覧ください。

Zero-effort type safety

More convenience and correctness, less boilerplate

svelte.dev

その他のファイル

ルートディレクトリ内の他のファイルはSvelteKitによって無視されます。これにより、必要なルートと一緒にコンポーネントやユーティリティモジュールを配置できます。

複数のルートで必要なコンポーネントやモジュールは、$libに配置するのが良いです。

$lib

これは、src/lib、または config.kit.files.lib として指定されたディレクトリへの単純なエイリアスです。これにより、../../../../ なしで、一般的なコンポーネントやユーティリティ モジュールにアクセスできるようになります。

おわりに 

今日は、 ルーティングについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)