Sveltekit やっていき
Svelteとは?
Sapper
sveltejs が開発しているユニバーサルウェブアプリケーションフレームワークです。
Sapper は React での Next.js のようなイメージで、ユニバーサルなウェブアプリを構築するための機能が含まれています。
ちなみに、 React での react-router にあたるパッケージは sveltejs 公式では公開されていません。
(OSSとしては svelte-routing とか svelte-spa-router とかある)
sveltejs が開発していますが、後継としてSveltekit(こちらも sveltejs が開発)の開発が始まり、永遠の v0 となってしまいました。
when will Sapper reach version 1.0?
The answer: never.
ビビった実装
ページ遷移を行う goto() メソッドを実行すると、必ず document.activeElement.blur() が実行されてフォーカスが外れる実装が入っていまいた。
Issue上ではアクセシビリティのためとのことでしたが、さすがにびっくりしました。
(追記:@sveltejs/kit@1.0.0-next.89 でも同様の挙動が確認できました)
Sveltekit
sveltejs が開発しているユニバーサルウェブアプリケーションフレームワークです。
開発環境構築
開発環境構築は npm init svelte で対話的に構築するか、手動で行います。
npm init svelte で対話的に環境構築する
次のコマンドで対話的に Sveltekit の開発環境を構築できます。
code:sh
yarn init svelte@next my-first-sveltekit-app
コマンドを実行すると、ベースとなるプロジェクト(デモアプリ or 空プロジェクト)やTypeScript/ESLint/Prettierを使用するかを尋ねられるので、必要に応じて回答しましょう。
https://gyazo.com/4d3549b7f098cb438e31ea35630108a5
上記コマンドの場合、my-first-sveltekit-app ディレクトリにSveltekitの開発環境が構築されます。
手動構築
必要な依存関係や設定ファイルを手動で設定して環境構築を構築することも出来ます。
まず、Node.jsをESMモードで動作させるために、package.jsonに次のプロパティを追加します。
これは、Node 14で正式にされた旧 --experimental-modules フラグと同等の設定です。
code:package.json
{
"name": "my-first-sveltekit-app",
"version": "1.0.0",
"type": "module"
}
次のコマンドで、TypeScriptでSveltekitを開発するための最低限の依存関係をインストールできます(Linterなどは別途セットアップしてください)。
code:sh
yarn add -D \
@sveltekjs/{adapter-node,kit}@next \ # @next じゃないと古いバージョンが入ってしまう
svelte \
vite \
typescript \
svelte-preprocess
続いてSvelteの設定ファイルを作成します。
このとき、拡張子は .cjs にします。.jsだとESMのファイルとして扱われて動作しません。
次の設定は Sveltekit を動かすための最低限の設定です。
code:svelte.config.cjs
const sveltePreprocess = require('svelte-preprocess');
const node = require('@sveltejs/adapter-node');
/** @type {import('@sveltejs/kit').Config} */
module.exports = {
preprocess: sveltePreprocess(),
kit: {
adapter: node(),
target: '#svelte',
}
};
あとは、src/routes 以下にページコンポーネントを作成して svelte-kit dev でローカルサーバーを起動します。
Sveltekitの特徴
ビルド内容は adapter で変更する
Sveltekit は Nuxt/Next とは異なり、ビルトインで複数のビルド方法に対応しているわけではなく、設定ファイルでビルド方法が定義された adapter を設定します。
code:svelte.config.cjs
const node = require('@sveltejs/adapter-node');
const static = require('@sveltejs/adapter-static');
const vercel = require('@sveltejs/adapter-vercel');
module.exports = {
kit: {
// Node.jsのユニバーサルアプリケーションとしてビルド
adapter: node(),
// 静的ウェブサイトとしてビルド
adapter: static(),
// Vercel 向けにビルド
adapter: vercel(),
}
}
たとえば、@sveltejs/adapter-vercel ではVercelで必要となるfunctionsやconfigも自動で生成されます。
@sveltejs/adapter-vercel でのビルド結果
https://gyazo.com/65e3be62eb137d6bc8c40368109df543
@sveltejs/adapter-static でのビルド結果
https://gyazo.com/f91e822ebdfddf8a116d89e9d8983134
おまけ
👍 Nishiyama Yudai nishiyamayudai.icon がいいねしました on 2021/4/26