kurosame’s diary

フロントエンド中心です

SvelteKit（β 版）を見てみる

Svelte SvelteKit

はじめに

Svelte+SvelteKit の環境がコマンド 1 つで構築できるので、その構成を軽く見てみようと思います

Web フレームワークのSvelteKitはSapperの後継で将来的にこちらに置き換わります

この記事の@sveltejs/kitのバージョンは1.0.0-next.151です
まだ β 版です

セットアップ

npm init svelte@next Project-name

インタラクティブに環境をセットアップできる
以下を選択

  • Which Svelte app template?
    • SvelteKit demo app
  • Use TypeScript?
    • Yes
  • Add ESLint for code linting?
    • Yes
  • Add Prettier for code formatting?
    • Yes

設定周りで気になった点

  • .prettierrcは最初に自分用の設定に変えておく
  • package.json に"type": "module"が設定してある
    • これはスコープ内の JS ファイルを ES Modules（import/export）として扱う
    • この設定の影響を受けるのはsvelte.config.jsで、試しに"type": "commonjs"とかにすると、この config が動かない
    • また、.eslintrc.jsも影響を受けてて、こちらは ESM として扱うと動かないので、拡張子を変えて.eslintrc.cjsで CJS 化されている
    • JS ファイルは書かない想定なので、"type": "module"を削除して、svelte.config.mjsにしようかと試したが、node_modules/@sveltejs/kit/dist/cli.jsでsvelte.config.jsという名前で読み込んでいるので、それもできなかった
  • TypeScript を動かすにはプリプロセッサが必要
    • svelte-preprocessというパッケージで公開されていて、これがsvelte.config.jsで設定されている
  • svelte.config.jsのkit: { target: '#svelte' }の設定
    • これは SSR された HTML を<div id="svelte">に hydrate する設定、OFF にすることは無さそう
  • TODO デモアプリ（/todos）で追加・削除したデータが永続化されている
  • ビルドが速すぎだった
    • ビルドツールに Vite を使ってる

追加した設定

  • ESLint にeslint-config-airbnb-baseのルールを追加した

コマンド

  • dev（svelte-kit dev）
    • .svelte-kit/devにビルド結果が出力される
    • 同時にサーバーを立ち上げる
    • HMR で開発できる
  • build（svelte-kit build）
    • 本番用ビルド
    • svelte.config.jsで adapter を指定し、デプロイ環境にあわせてビルド結果を切り替えることができる
    • 特定環境の adapter（adapter-netlifyやadapter-vercelなど）もあり、自作することも可能（NPM レジストリに色んな adapter が公開されている）
      • この仕組みはいいなって思った
    • とりあえず@sveltejs/adapter-staticを使うことにしたが、npm i -D @sveltejs/adapter-static@nextにしないとエラーで動かなかった（β 版なのであまり参考にならないが）
      • 結果は/buildディレクトリに出力される
      • ちゃんと静的ビルドされてるっぽかった
  • preview（svelte-kit preview）
    • svelte-kit buildの結果を表示できる
    • 本番ビルドの結果をローカルで確認する用
    • 注意点として、/buildではなく、.svelte-kit/outputの方を参照してるので、adapter でビルドされた結果は見ていない
  • check（svelte-check）
    • 未使用 CSS、A11y、TS 型チェックを行う
    • Lint やフォーマッターと一緒に CI で走らすと良さそう

ここまでのsvelte.config.jsは以下

import adapter from '@sveltejs/adapter-static'
import preprocess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    target: '#svelte'
  }
}

export default config

コード（src配下）

SvelteKit のディレクトリ構成はsvelte.config.jsの files プロパティで定義されており、以下のドキュメントにデフォルト値が書いてある
https://kit.svelte.dev/docs#configuration

  • hooks（src/hooks）
    • SSR 時に実行される
    • handle、handleError、getSession、externalFetch という関数が用意されている
    • たとえば、handle 関数はクライアントとサーバーのすべてのリクエストを handle し、処理を挟める
    • ちなみに React Hooks は関係ない
  • lib（src/lib）
  • routes（src/routes）
    • ルーティング周り、Next.js や Nuxt.js でいう pages ディレクトリ
    • サーバーのみで動くエンドポイントもページごとに置ける
      • .tsファイルで作成する
      • Node.js 周りの処理を書く
    • ルーティングに含めたくない private なファイルは_を先頭に付ければ良い
    • routes/__layout.svelteは、Nuxt.js にもあるレイアウトコンポーネント
  • serviceWorker（src/service-worker）
    • ここに SW を置けば Vite が自動で登録してくれる
  • template（src/app.html）
    • テンプレート

このデモアプリのコード色々やってて、勉強になる

この後やること

  • テスト
  • UI コンポーネント入れる
    • なんとなくSmelte良さそう
      • React の Chakra UI みたいな感じにみえる
  • リンター、フォーマッター、svelte-check をどこで走らすか考える
    • npm run devか Git コミットする前か CI か