SvelteKitのルーティングについて

この記事はSvelteKit Advent Calendar 2022の6日目の記事です。
@kubotakです。

今回はSvelteKitのルーティングについて紹介したいと思います。
といっても基本的な紹介はドキュメントを見ていただくのが一番わかり易いと思います。

そこで、この記事ではSvelteKitのルーティングの面白いところを紹介していきたいと思います。

命名規則

SvelteKitはファイルシステムベースのルーティングを採用しています。ReactのNext.jsやVue.jsのNuxtと同様です。
しかしそれらのフレームワークとは少し変わった規則になっています。

例えば/aboutページを作るとき、大抵は以下のようなファイルベースを想像しますよね？

(誤)

• src/routes/about.(ts|js)
• src/routes/about/index.ts

しかしSvelteKitでは+page.svelteというファイルで作成する必要があります。
(正)

• src/routes/about/+page.svelte

一見するとよくわからないルールですが他のコンポーネントを理解するとよくできた命名だと思います。
（とはいえプラスが付くのは未だに違和感がある）

サーバー側で実行される処理

続いてサーバー側で実行される処理を定義するファイルは次のようになります。

src/about/+page.server.(ts|js)

ページコンポーネント同様に+pageから始まり、.server.tsとサーバー側で処理されることが明確な命名になっています。
これはSSR時にはサーバー側でページコンポーネントと処理されHTMLを構成するが、CSRになると__data.json、今回の構成だと/about/__data.jsonというエンドポイントとして実行されます。
このエンドポイントはCSRで画面遷移する際にページ遷移前に呼ばれ、この結果を次のページコンポーネントのpropsとして扱われます。

レイアウト

ヘッダーやフッター、メニューなどのページとは別に固定された要素がある場合はレイアウトが活用できます。
レイアウト及びレイアウトのサーバー処理は次のように定義できます。

• src/+layout.svelte
• src/+layout.server.(ts|js)

このレイアウトは、routesディレクトリ直下に定義しているため、それ以降のディレクトリのすべてのページに作用します。
そのため、下位の階層のみに定義したい場合は次のように該当ディレクトリでレイアウトを定義することもできます。

• src/about/+layout.svelte
• src/about/+layout.server.(ts|js)

より高度の分離

例えば/と/aboutで別のレイアウトを利用したい場合があると思います。
ここで問題になるのは/はディレクトリ直下のため、そこで定義しているレイアウトが/aboutにも作用してしまうという点です。

少しコードを例にします。

src/routes/about/+page.svelte

<p>About Page</p>

src/routes/about/+layout.svelte

<h2>子レイアウト</h2>
<slot />

src/routes/+layout.svelte

<h1>親レイアウト</h1>
<slot />

それではページを見てみましょう。

このように上位の階層にあるレイアウトが影響します。
この仕組をうまく活用すると、Nuxtのミドルウェアのように上位階層でユーザー情報取得処理を集約するなど使い所もあります。
しかし、今回のケースでは別のレイアウトを使いたい場合、この仕様が問題になってしまいます。
そこでSvelteKitではAdvanced layoutsの(group)という仕組みが用意されています。

先程のコードを次のようにディレクトリを分離します。

src/
└── routes
    ├── (about)
    │   └── about
    │       ├── +layout.svelte
    │       └── +page.svelte
    └── (root)
        ├── +layout.svelte
        └── +page.svelte

(root)と(about)という({name})命名のディレクトリを作成しました。ブラウザでの結果は次のようになります。

(group)の仕組みを使うことでディレクトリ上で上下関係にあったレイアウトを分離することで影響を避けることができるようになります。
また、この()のディレクトリはルーティング上は影響しないものなのでパスが変わることはありません。
うまく使うことでレイアウトをきれいに分離させることができると思います。

さいごに

SvelteKitのルーティングの個人的に面白いと思ったところを紹介しました。
初見では戸惑うこともありそうなルールですが、実際に触ってみるといい感じに責務が分離されているし、ある程度拡張も可能なので実運用に耐えうる仕組みだと思いました。
まだSvelteKit触ったこと無いという方はぜひ一度体験してみてください！