SvelteKitとは

このシリーズでは、SvelteKitという、Svelteをベースにしたフレームワークについて解説していきます。

• Docs(en)
• Docs(ja)

ReactにNext.jsやRemix、VueにNuxt.jsといったWebフレームワークが存在するように、SvelteにはSvelteKitがあるとすればわかりやすいでしょうか。

UIコンポーネントはSvelteで記述しつつ、そのコンポーネントを利用するページ、ひいてはサイト・アプリ全体を構成することができるツールキットというわけです。

Svelte自体の解説やそのコンポーネントのコードについては、すでに別のシリーズがありますので、そちらもあわせて参考にしてください。

• Svelte 3入門シリーズ

記事執筆時点でのバージョンは次のとおりです。

• svelte：v3.54.0
• @sveltejs/kit：v1.5.0

SvelteKitでできること

実際に手を動かしていく前に、まずはSvelteKitでできることを俯瞰しておきます。

基本的には、Next.jsなどのフレームワークと同様です。ファイルベースのルーティングによってサイト・アプリ全体を作ることができ、各ページをサーバーサイドでレンダリングしたり、その後はクライアントサイドでSPAのように動作させたりもできます。

もし過去にそういったプロジェクトに取り組んだことがあれば、違和感なくコードも書き始められるでしょう。

公式サイトの冒頭でも紹介されていますが、SvleteKitはとても柔軟なフレームワークであることが特徴です。

• 完全に静的なコンテンツのみで構成されるサイト（会社ホームページやポートフォリオサイトなど）
• CMSなどからデータを取得するが、ビルド時に事前レンダリングで生成するサイト（ブログサイトなど）
• クライアントサイドでのみ動作する動的なWebアプリケーション（SPAなど）
• ユーザー固有のデータなど、サーバーでデータをレンダリングするアプリケーション（ログイン機能のあるサイトなど）
• 動的なコンテンツを返すWeb APIのエンドポイント（公開APIとその説明ページなど）

このように、あらゆるタイプのWebサイト・アプリに対応することができます。

また、「基本的にはサーバーで動的にレンダリングするが、ページのURLによって一部は静的に生成しておく」といったように、上記の特性を組み合わせることが可能となっています。ここまでの柔軟性は、他のフレームワークには見られないユニークな特徴です。

そんな柔軟性が特徴のSvelteKitなのですが、今回のシリーズでは、サーバーサイドの機能をあえて省き、手軽に試すことができるクライアントサイドの機能だけにフォーカスします。

クライアントサイド機能を使うSvelteKitの使いどころ

正直なところ、サーバーサイドに依存する機能を使わない場合、SvelteKitを採用するメリットは半減してしまうと思っていますが、それでもまだ有用な点もあります。

もしかすると、SPAのようにクライアントサイドで完結するものを構築する場合なら、Svelteで十分、SvelteKitは不要では？ と考えるかもしれません。

もちろんそれも選択の1つです。

ただその場合、Viteのようなバンドラーを選定し、Svelteのプラグインを使用したビルド処理を行うプロジェクト自体を、自分でイチから構築することになります。

SPAの根幹であるルーティング機構の実装も同様ですし、TypeScriptやPrettierなどを使用したい場合、それらの設定も別途必要です。

SvelteKitを採用すれば、コマンド1つでこれらがすべて揃った状態から開発をはじめられます。

プロジェクトのセットアップにはそれなりに手間がかかります。特段の理由がない限り、どのような形態のものを構築するにしても、Svelteを採用するなら、SvelteKitを採用することがおすすめです。

Svelte(Kit)のチームとしても、Svelteをはじめるときは、SvelteKitを利用してはじめることを推奨しています。

ほかにも、サーバーサイドの実行環境がなくても、ビルド処理を介することで一部のサーバーサイド機能を利用し、静的サイトジェネレータのような使い方をすることもできます。

静的サイトジェネレータに分類されるツールは、クライアントサイドで動作するJavaScriptを簡単に連携できないこともあるため、これだけでもSvelteKitを採用する理由になります。

ただもし静的サイトジェネレータ側にSvelteのサポートが存在する場合は、それを差し置いてまでSvelteKitを採用する必要はないかもしれません。そこは実現したい要件とあわせて検討すべきところです。

たとえばAstroには、Svelteのコンポーネントを利用できるようにする機能があります。

そのほかにも、Svelteコンポーネントをライブラリとして公開したいといった場合に、その雛形を用意するためのツールとして、SvelteKitを利用することもできます。

• Packaging • Docs • SvelteKit

はじめかた

今回の記事のまとめとして、SvelteKitの最低限のサンプルを実際に動かしてみます。

任意のターミナルをひらいて、以下のコマンドを実行します。my-first-sk-appの部分は、任意のディレクトリ名に変更してください。

npm create svelte@latest my-first-sk-app

このコマンドによって、Svelte(Kit)のセットアップツールcreate-svelteが実行されます。 コマンドの指示に従って、セットアップを進めていきます。

今回は、以下の選択肢を選びました。

• Which Svelte app template?
  • Skeleton project
• Add type checking with TypeScript?
  • Yes, using JavaScript with JSDoc comments
• Select additional options
  • Add Prettier for code formatting

ミニマムなテンプレートを、JSDocコメント付きのコードでセットアップし、Prettierを利用するオプションを選んでいます。

こうしてセットアップされたディレクトリを見ると、次のような構成になっています。

├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── README.md
├── jsconfig.json
├── package.json
├── src
│   ├── app.d.ts
│   ├── app.html
│   └── routes
│       └── +page.svelte
├── static
│   └── favicon.png
├── svelte.config.js
└── vite.config.js

ファイル名を見ればわかるGit関連のファイルや、静的ファイルを配置するstaticディレクトリ、コードを配置するsrcディレクトリなどが生成されているのがわかります。SvelteKit自体の設定のためのsvelte.config.jsという設定ファイルもあります。

SvelteKitは、開発ツールViteをベースに作られているため、普段の開発にはViteをそのまま利用することになります。

とは言っても、npm run devやnpm run buildといった馴染みのコマンドの裏でviteコマンドを利用しているというだけで、その設定はほとんどセットアップ時に完了しています。もちろん、vite.config.jsに任意の設定を加えることもできます。

コードを変更してみる

プロジェクトディレクトリでnpm installをすませた状態でnpm run devコマンドを実行すると、ローカルでWebサーバーが起動して、ブラウザで今の状態のアプリを表示することができます。

npm install
（略）
npm run dev

> [email protected] dev
> vite dev

Forced re-optimization of dependencies

  VITE v4.3.8  ready in 770 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

この状態で、エディタからsrc/routes/+page.svelteを編集して、試しに簡単なコードに置き換えてみてください。

<script>
  let count = 1;
</script>

<button on:click={() => count++}>+</button>
<pre>{"🐧".repeat(count)}</pre>

すると、その変更が即座に反映されるのがわかります。

また、npm run fomratコマンドを実行することでPrettierによるコードフォーマットを行うこともできますし、npm run checkコマンドでLintを行うこともできます。

ここまでのまとめ

今回の記事では、SvelteKitの特徴と、ミニマムなプロジェクトの作成までを解説しました。

次回の記事では、ディレクトリ構成を眺めつつ、SvelteKitの一番の特徴であるページごとのレンダリング方法について解説する予定です。

SvelteとSvelteKitには、かなり手厚いチュートリアルのサイトも用意されているため、一通りのぞいてみると理解を深めることができます。今回のシリーズでは扱わないサーバーサイド機能を利用する部分についても知ることができます。

• Introduction / Welcome to Svelte • Svelte Tutorial