あとから共通レイアウト増えると困る問題

Webアプリケーションを作成するときは設計が大事ですよね。
SvelteKitでガッツリ作り込んだWebアプリがあったのですが、後からLPを作りたいんだよね～という展開になりまして
本当は完全に別物として作りたかったのですが、LPとアプリで連携する部分があったため組み込むことになりました。

SvelteKitの共通レイアウト

SvelteKitでは、ヘッダー・フッターなど共通で使用するレイアウトは+layout.svelteに記載します。
最も上の階層に設置すると（src/routes/+layout.svelte）、すべてのページで引き継がれます。
特定のディレクトリに設置すると、それ以下のページに適用されます。

+layout.svelteを設置しない場合は、<slot></slot>が適用されます。空っぽのレイアウトですね。

そもそも共通で使いたいレイアウトが複数存在する可能性があるなら、最上階に+layout.svelteは設置しない方が良いです。
後からやっぱり全部のページにレイアウトが引き継がれると困るなあとなったときに、とても面倒くさいことになってしまいます（今回の私のように）。

ここでの困りポイントは、SvelteKitではsrc/routes/配下に設置したフォルダーの構成がそのままビルド後の階層となるため、+layout.svelteを思い通りに設置できない可能性があることです。

そこで活用するのが(group)という機能です。

Advanced layouts

(group)を使うと出力されるURLに影響しないグルーピングができます。

例えばアプリ・トップページ・LPと3種類の共通レイアウトが必要だったら

src/routes/
│ (app)/
│ ├ dashboard/
│ └ +layout.svelte
│ (top)/
│ ├ about/
│ ├ +layout.svelte
│ └ +page.svelte
│ (lp)/
│ ├ campaign/
│ └ +layout.svelte

という構成にすることができます。

カッコ付きでグルーピングされたディレクトリは、最終的に出力される階層には影響しません。
なのでこの構成でビルドした場合は

build/
├ dashboard/index.html
├ about/index.html
├ campaign/index.html
└ index.html

になります。

ここでは、出力されるindex.htmlやディレクトリがバッティングしないよう注意が必要です。
制作時は(group)を使って自由に設定できる分、その内部でディレクトリ名がカブったときに気づきにくいのでその点お気をつけください。

おわり

SvelteKitは書きやすくて好きなのですが、情報の少なさでウワアアアとなることが多いですね。
調べてみたら便利機能あるな～と気づくことも多いので、やはり公式を読み込むのは大事やなあって感じです。

それでは！