【ITニュース解説】SvelteKit Routing Tutorial: Layouts, Nested Routes & Multi-Page Apps

現代のWebアプリケーションは、ホームページ、ブログ、設定画面など、複数のページで構成されるのが一般的である。SvelteKitは、このような複数ページのアプリケーションを非常に直感的に構築できるフレームワークだ。その最大の特徴は「ファイルベースルーティング」という仕組みにある。これは、ファイルシステムのフォルダ構造がそのままWebサイトのURLに対応するという考え方で、従来のように複雑な設定ファイルを手動で記述する必要がない。開発者はsrc/routesという特別なフォルダの中にファイルやフォルダを配置するだけで、自動的にWebページのURLが決定され、表示されるようになる。このシンプルさにより、開発者はルーティングの設定に煩わされることなく、アプリケーションの機能開発に集中できる。

各Webページの実体は、+page.svelteという決められた名前のファイルで作成する。例えば、src/routes/aboutというフォルダを作成し、その中に+page.svelteを配置すれば、アプリケーションには自動的に/aboutというURLのページが追加される。フォルダ階層を深くすれば、/dashboard/settingsのような階層的なURLも、フォルダ構造を真似るだけで簡単に実現可能だ。さらに、多くのページで共通して使用するナビゲーションバーやフッターといったUI部品を効率的に管理するための「レイアウト」機能も備わっている。+layout.svelteというファイルを作成すると、そのファイルが置かれたフォルダとその配下にあるすべてのページに共通のレイアウトが適用される。これにより、同じコードを何度も記述する手間が省け、サイト全体のデザインに一貫性を持たせることができる。レイアウトは入れ子にすることも可能で、サイト全体に適用する大枠のレイアウトと、特定のセクションだけで使用する詳細なレイアウトを組み合わせる、といった柔軟な設計も行える。

Webアプリケーションでは、ブログ記事やユーザープロフィールのように、URLが事前に固定されていないページも必要になる。SvelteKitでは、このような「動的ルート」も簡単に扱うことができる。フォルダ名を[slug]のように角括弧で囲んで作成すると、その部分は可変のパラメータとして扱われる。例えば、src/routes/blog/[slug]という構造にすれば、/blog/first-postや/blog/my-second-postといった様々なURLに、単一の+page.svelteファイルで対応できる。URLに含まれる具体的な値、この例ではfirst-postといった文字列は、プログラム内で取得して、表示するコンテンツを動的に切り替えるために利用する。

ページの表示には、多くの場合、データベースや外部APIからのデータ取得が伴う。SvelteKitには、このデータ取得処理を洗練された方法で扱うための仕組みが用意されている。ページのコンポーネントファイルである+page.svelteと同じ階層に+page.jsまたは+page.server.jsというファイルを作成し、その中にloadという名前の関数を定義する。このload関数がデータを取得し、その結果を返すと、そのデータは自動的に+page.svelteコンポーネントにdataという名前のプロパティとして渡される。この仕組みにより、UIを記述するコードと、データを取得するためのロジックを明確に分離することができ、コードの可読性や保守性が向上する。

データ取得用のファイルには2種類あり、用途によって使い分ける。+page.jsに記述したload関数は、ユーザーが最初にページにアクセスした際はサーバー上で実行され、その後サイト内を遷移する際にはブラウザ上で実行される。これにより、初回表示の速さと、ページ遷移時のスムーズな体験を両立できる。一方、+page.server.jsに記述したload関数は、常にサーバーサイドでのみ実行される。このコードはブラウザに送信されないため、APIキーやデータベースの接続情報といった、外部に漏洩してはならない機密情報を安全に取り扱うことができる。どちらのファイルでも、SvelteKitが提供する特別なfetch関数を使用できるため、サーバーとブラウザの環境の違いを意識することなく、同じ記述方法でデータ通信処理を実装可能だ。また、データ取得に失敗した場合も、error関数を投げるだけでSvelteKitがエラーページを適切に表示してくれるため、堅牢なエラーハンドリングも容易に行える。このようにSvelteKitは、直感的なルーティングと強力なデータローディング機能を統合し、効率的で安全なWebアプリケーション開発を実現している。