Zenn
🚪

【SvelteKit 入門】はじめに

2022/10/08に公開・約4,000字
Svelte
SvelteKit
tech

SvelteKitもここ数年で着々と改良を重ね、2022年9月にバージョンが1.0となりました。
ようやく Svelte + 公式フレームワーク と足並みが揃いましたね。
新しいモノ好きがいじってみるというフェーズを終え、今後は技術選定の対象として地位を確立できるかどうかが試されます。

…にもかかわらず、書籍・ネット共に 日本語の情報があまりにも少ない ので、解説記事という形で微力ながら貢献したいと思った次第です。（逆に足を引っ張らないことを祈る）

シリーズまとめ（随時追加・更新）
【SvelteKit 入門】はじめに now reading
【SvelteKit 入門】作業の前に
【SvelteKit 入門】アダプター設定・ホスティング・コンテナ運用
【SvelteKit 入門】ルーティング
【SvelteKit 入門】データハンドリング(+page.js)
SvelteKit + microCMS でブログ構築

SvelteKit って何

Svelteという記法をベースに、サイト・アプリケーション制作に必要なルーティング・レンダリング制御等の機能をまとめたフレームワーク。フロントエンドを名乗ってはいるが、それなりにバックエンドも実装可能。

  • 少ない記述、軽量なファイルサイズ、高速な動作
  • JSXを使わないため、ほぼ素のHTML/CSS で書ける
  • UI・機能ごとに切り出し、ファイル単位でコンポーネント化

こういった Svelte の強みをそのまま使用でき、かつフロントエンド開発に必要な機能が用意された環境が手に入る。非常に快適。

SvelteKit の現状

  • 2022年7月〜9月に大きめな変更を済ませ、コア部分は定まった様子
    = 破壊的変更に振り回される段階は脱した
  • ネットや書籍の二次情報はまだまだ少ない
  • 採用実績が積まれ参考にできる情報が増えれば、エンジニアもとっつき易くなると思われる
  • ver 1.0のリリース時 ルーティングに大幅な仕様変更があり、実は賛否両論 （後述）

おおまかな仕様・機能

■ 基本

  • 共通レイアウト（ヘッダーやメニュー）はファイルを配置するだけ
    • 適用範囲の柔軟な制御も可能
  • ルーティングはディレクトリベース

■ レンダリング関連

  • SSR（サーバー）,CSR（クライアント）どちらも対応
  • ちなみにデフォルトでは、SSRとCSRを混ぜた hydration という挙動
  • prerendering（=SSG）も可能
  • SPAとして出力することもできる

■ アプリケーション視点

  • TypeScriptネイティブ対応
  • 状態管理に使えるstoreが更新検知（subscribe）も含めデフォルトで組み込み済
  • ルーティング先にページではなくハンドラ的なjsを置くことで、エンドポイントも作れる
  • 全ての通信に処理を挟む（ミドルウェアっぽい）事もでき、認証等で使用可能

参考情報の陣形

公式

全てトップページからリンクで飛べます。

■ Svelte 　 公式 　 日本語版
　├ ドキュメント (辞書)
　├ チュートリアル (実際のコードを触りながら)
　├ サンプル集 (少しハイレベルな使用例もあり)
　└ REPL (ブラウザエディタ)
※ ドキュメントは単一ページで、目次はページ内リンク。Ctrl + Fで検索が効く

■ SvelteKit 　 公式 　 日本語版
　├ ドキュメント (辞書)
　└ StackBlitz (ブラウザエディタ)
※ ドキュメントはページ分割のため、検索するには上部の検索ボックスを使用

コミュニティ（２つ紹介）

Svelte プロジェクトで使えるnpmパッケージ・Svelte 製のWEBサイト等を集めたサイト。
（大量すぎてむしろ困る）

Made with Svelte
Best of Svelte

技術ブログ等の二次情報について

■ Svelte
（学習する側から見れば）あくまで 記法 なので、古い情報でもほぼ問題ありません。公式サンプルも更新日はやや古いように見えますが大丈夫です。SvelteKit の情報からロジックだけ参考にしても良い。

■ SvelteKit
実際のユースケースに合わせて実装していくので、こっちこそサンプルが欲しいところですが… 公式はドキュメントしか無く、ネット上にもあまり参考にできるサンプルがありません。その実装例もver 1.0以前のものだと そのまま使える部分 と 最新仕様に変換が必要な部分 を自分で判別する必要アリ。

おすすめのステップアップ

  1. Svelte の概要把握： Svelte チュートリアル (Show me を押すのを忘れずに)
  2. 概要を理解した上で掘り下げ： Svelte ドキュメント流し読み

〜ここまでで Svelte を大まかに理解。ブラウザのみでも十分に学習可能〜

  1. ローカルに SvelteKit プロジェクト作成
  2. ホスティングサービスにデモアプリをデプロイして動作チェック

〜これで SvelteKit のアプリケーション立ち上げ&デプロイする流れを掴む〜

  1. SvelteKit で1,2の内容を（思い出しながら）再現してみる
  2. ルーティング等 SvelteKit の機能を実装してみる

これで基礎はできあがると思います。

【補足】ルーティングについて

以前の SvelteKit はファイルベース・デイレクトリベース どちらにも対応していた ので、エンジニアが好きなように構成していました。やろうと思えばページ数 = ファイル数（routes内）にも出来たということですね。

プロジェクト/
    ...
     ├ routes/
     │   ├ index.svelte       <- /
     │   ├ movies.svelte      <- ファイル名がそのままURL対応
     │   └ pictures/
     │       └ index.svelte   <- ディレクトリ名 + index という構成も可能
     ├ ...
    ...

しかし上記ルーティングは廃止され、今はディレクトリベース のみ になりました。
直後は反対意見もそれなりに出てましたね…笑

プロジェクト/
    ...
     ├ routes/
     │   ├ +page.svelte         <- インデックスファイル名はまさかの頭文字「+」
     │   ├ movies/              <- URLに対応させるディレクトリを作り
     │   │   └ +page.svelte     <- インデックスファイルを配置
     │   └ pictures/
     │       ├ +page.js         <- データ処理のファイルも置ける
     │       └ +page.svelte
     ├ ...
    ...

以前の仕様のように 同じ挙動をさせる手法がいくつも存在する というのは、柔軟性がある とプラスに捉えることもできますし、ベストプラクティスがブレる といったマイナスの捉え方をすることもできます。この変更は正しい・正しくないというよりは好き嫌いの話ですね。

これを回避するためにsvelte + ルーティングのパッケージ という構成も可能ですが、よほど嫌でなければ わざわざ SvelteKit 以外の構成にする必要性は低い かと思います。

【補足】Sapperについて

Svelte のフレームワークとしてSapperというものがありましたが、これはすでに開発停止となりました。Sapper に限らず、Svelte 向けのやや古い拡張機能は SvelteKit がまだベータ版だった時期に「この機能、採用して欲しいなー（チラッ）」と 公式への提案 のような雰囲気で作られていました。そのため、これらは SvelteKit 1.0 の礎となり今は役目を終えた感があります。

Discussion

ログインするとコメントできます