SvelteKit の使い方をわかりやすく解説してみる - Svelte Vol.2

暗黙の世界

SvelteKit は脳みそが小さい連中が嫌う暗黙のルールで溢れ返っている
なので、そう言うのが嫌いなら絶対に使うべからず
逆に暗黙が好きなら最高の使用感を得られるはずだ

基本的に同一階層にファイルを作るだけで暗黙の継承がバンバン行われたりする

基本のファイル

src/routes/ 以下に +page.svelte を置くだけで / でアクセス可能になる
src/routes/hoge/ 以下に置けば /hoge でアクセス可能

+page.svelte

こいつがキモ
サンプルを下記してみる

<script>
  console.log('TOP +page.svelte')
  export let data
</script>
<template lang="pug">
  h2 TOP
  pre {JSON.stringify(data, null, 2)}
</template>

んーシンプル？

export let data

何じゃこいつと思った人は正常！

なんかここから出しそうじゃん？何をどこに出すの？って感じじゃん？？

違うんだなコレが
+で始まるファイル名よりも激キモセンスなんだわ、これが

+page.js とか +page.server.js から export されたデータを暗黙で import してんだなぁこれ・・・ｷﾓｯ

え、何これ？アラブの石油王が飼ってるチンパンジーが作ったの？
コレをキモいと感じないやつと同じ空気吸いたく無いレベルで酷い実装なのはグッと我慢だ(そのうち破壊的変更入りそ～)

+page.js

ブラウザ側で +page.svelte にデータを注入する

console.log('TOP +page.js')
export function load() {
  console.log('TOP +page.js LOAD')
  return {
    top: 'TOP'
  }
}

load() で値を返すと、そいつが激キモなあいつで受け取れると言う寸法

+page.server.js

サーバ側で +page.svelte にデータを注入する
APIキーだの Secret だの見えちゃマズいやつはこっちでやるし、DB に接続するなら 100% こっち

console.log('TOP +page.server.js')
export function load() {
  console.log('TOP +page.server.js LOAD')
  return {
    topServer: 'TOP SERVER'
  }
}

呼ばれる順番

TOP +page.js
TOP +page.server.js
TOP +page.server.js LOAD
TOP +page.js LOAD
TOP +page.svelte

js -> server.js -> server.js LOAD -> js LOAD -> svelte

.js は内部的に import されているようなので、その後どれだけリロードだのスーパーリロードだのしても呼ばれるのは

server.js LOAD -> js LOAD -> svelte

だけ

ここをちゃんと意識しないと単体テストでは問題が出ず、結合テストでぶっ壊れて大パニックになる
(実際大手SIerで助けを求められたアホみたいなトラブル。そんときゃ Java で Tomcat で Thread だったが同じようなもん)

素人向けに注意喚起しておくと node は シングルプロセスなので誰か一人アクセスし import されてメモリ上にデータがのると
それを誰がアクセスしても使い回す事になる
キャッシュとして使えるわけだが、毎度初期化されると思って使ってるとトラブルの種になる

よくわからないなら

console.log('TOP +page.server.js')
const now = new Date()
export function load() {
  console.log('TOP +page.server.js LOAD')
  return {
    now,
    topServer: 'TOP SERVER'
  }
}

と now を定義してやって、ブラウザでシークレットだのゲストだの切り替えて叩いてみると良い
now の値は一切変わらないから

+page.js は +page.server.js を打ち消してしまう

TOP
{
  "top": "TOP"
}

表示がこうなる

1. page.js の load を消すと

TOP
{
  "topServer": "TOP SERVER"
}

こうなる

ゆえに +page.js と +page.server.js を同時に作ったところで意味無し
なので +page.js はこれから先のメモでは消す

Layout

+layout.svelte を置くと、+page.svelte のガワを定義出来る

+layout.svelte

<script>
  console.log('BASE +layout.svelte')
  export let data
</script>
<template lang="pug">
  h1 BASE LAYOUT
  pre {JSON.stringify(data, null, 2)}
  slot
</template>

slot に +page.svelte の出力が入る

+layout.server.js

+page.server.js の layout 版

console.log('BASE +layout.server.js')
export async function load() {
  console.log('BASE +layout.server.js LOAD')
  return {
    baseLayoutServer: 'BASE LAYOUT_SERVER',
  }
}

画面

BASE LAYOUT
{
  "baseLayoutServer": "BASE LAYOUT_SERVER"
}
TOP
{
  "baseLayoutServer": "BASE LAYOUT_SERVER",
  "topServer": "TOP SERVER"
}

slot のところに +page.svelte のコンテンツが出力される
そして、+page.svelte の激キモデータに +layout.server.js のデータがマージされる

呼ばれる順番

BASE +layout.server.js
TOP +page.server.js
BASE +layout.server.js LOAD
TOP +page.server.js LOAD
BASE +layout.svelte
TOP +page.svelte

page よりも layout の方が当然先に呼ばれる

続きはまた後日