強まっていこう

あっちゃこっちゃへ強まっていくためのブログです。

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で助けを求められたアホみたいなトラブル。そんときゃ JavaTomcat で 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 の方が当然先に呼ばれる

続きはまた後日

Svelte 使ってるけど良い感じ。でもドキュメントが微妙過ぎて終わってる - Svelte Vol.1

表題の通り。公式サイトは御託だらけで読みづらいくせして情報が色々足りない
色々苦労したのでメモがてらに皆に共有

(※ あくまで個人ユースで遊びで使っている限りはイケている感じ
これを本格的なプロジェクトにぶっこんで規模のデカいものを開発した時
React みたいな悲惨なことにならんかどうかはまだ解らず)

SvelteKit

プロジェクト起こすにはコイツ。Vue みたいに CDN から読んでちょろっと試すとかは出来無い

プロジェクト作成 & 開発サーバ起動

npm create svelte@latest test
cd test
npm i
npm run dev

Skeleton project
Type Script なんぞ時間の余っている知ったかぶりクソ Noob 以外は使わなくて良し
その他も要らん

訳のわからんポートで立ち上がるので 8080 で起動し localhost 以外からアクセスしたい

npm run dev --host 0.0.0.0 --port 8080

クソめんどいので、package.json に以下を追加

"s": "vite dev  --host 0.0.0.0 --port 8080",

さらにバカめんどいので、yarn で叩く
さらに zshrc に alias を追加

alias y='yarn'
y s

ヨシ

alias nr='npm run'

もオススメしたい

Pug & SCSS

HTML とかブレインデッドなバカの書くもの
CSS もダルさ爆発

SvelteKit はサクッと Pug と SCSS をサポートしてくれる!最高!!

npm i -D svelte-preprocess pug sass

svelte.config.js

import preprocess from 'svelte-preprocess'; <- 追加

const config = {
  preprocess: preprocess(), <- 追加

たったこれだけで、こんな風に書ける!
ゴイゴイスーを差し上げたいんだが、千鳥 -> かまいたちの大ブレイクと来たが、ダイアンはそこまで行か無いと思うなぁ
ちーちゃんとからんだりしてるとことかおもろいしんだけどももっとほかのすとりーまーとからんだほうがいいんじゃないかn・・・

<script>
  console.log('hoge')
</script>
<template lang="pug">
  h1 HOGE
</template>
<style lang="scss">
  $color: red;
  h1 {
    color: $color;
  }
</style>

ページを追加

src/routes/hoge/+page.svelte

/hoge が追加される

+hoge.svelte じゃダメ(昔はこれも良かったんだがバカが封じた)

vi

全く空気が読めていないクソみたいな + が先頭に付くファイルを vi で開こうとすると

Error detected while processing command line:
E492: Not an editor command: page.svelte

とエラー吐いて死ぬ

zshrc に以下を追加しろ

alias vi='vi --'


Plugin は

https://github.com/leafOfTree/vim-svelte-plugin
https://github.com/digitaltoad/vim-pug

あたりを入れると良し
そして、.vimrc に

let g:vim_svelte_plugin_use_pug=1
let g:vim_svelte_plugin_use_sass=1

を追加すると良い
ただ注意として