Zenn
🐣

手探りでSvelteKitの環境を構築する

2022/01/05に公開
Svelte
tech

初めに

SvelteKit の環境を構築する手っ取り早い方法は、 npm-init コマンドで svelte@nextイニシャライザー を使うことです。
SvelteKitのドキュメント にもそのような記載があります。

$ npm init svelte@next my-app

しかし、この記事では、svelte@nextイニシャライザーを使うことなく、あえて一から手探りでSvelteKitの環境を構築してみたいと思います。

動作確認を行った環境は次のとおりです。

  • macOS Monterey 12.1
  • Node.js v17.3.0
  • npm 8.3.0
  • @sveltejs/kit 1.0.0-next.216

package.json の作成と依存関係の設定

まず、作業用のディレクトリーを作ります。
ここでは kit-playground という名前にしました。
そして、その中に package.json を作成します。

$ mkdir kit-playground
$ cd kit-playground
$ touch package.json

npmのドキュメント に、最も重要なフィールドは name と version だと書いてあるので、 name と version だけは package.json に書いておきます。

package.json
{
  "name": "kit-playground",
  "version": "0.1.0"
}

SvelteKitを使うために @sveltejs/kit を devDependencies に追加します。

$ npm install --save-dev '@sveltejs/kit@next'

これで svelte-kit コマンドが使えるようになりました。
svelte-kit コマンドのサブコマンドには build 、 dev 、 preview がありますが、この記事では dev サブコマンドが動作するようになることを目標にします。

svelte.config.js の作成1

早速 svelte-kit-dev コマンドを実行します。

$ npx svelte-kit dev
Cannot find module '/Users/ykoma/Repository/kit-playground/svelte.config.cjs' imported from /Users/ykoma/Repository/kit-playground/node_modules/@sveltejs/kit/dist/cli.js
...省略...

svelte.config.cjs というファイルが必要みたいです。
空の svelte.config.cjs を用意してみましょう。

$ touch svelte.config.cjs
$ npx svelte-kit dev
svelte.config.cjs should be renamed to svelte.config.js and converted to an ES module. See https://kit.svelte.dev/docs#configuration for an example
...省略...

今度は svelte.config.cjs を svelte.config.js にリネームせよと言っています。
SvelteKitでは、 基本的にCommonJSではなくESモジュールを使います 。
package.json の type を module にすることで、Node.jsは拡張子が js のファイルをESMとして取り扱うようになります。
SvelteKitのドキュメント にもそうするようにとありますので、 package.json を修正します。
その上で、 svelte.config.cjs を svelte.config.js にリネームします。

package.json
{
  "name": "kit-playground",
  "version": "0.1.0",
  "devDependencies": {
    "@sveltejs/kit": "^1.0.0-next.216"
  },
  "type": "module"
}

$ mv svelte.config.cjs svelte.config.js
$ npx svelte-kit dev
Your config is missing default exports. Make sure to include "export default config;"
...省略...

svelte.config.js は空なので、これは妥当な指摘です。

svelte.config.js の作成2

svelte.config.js の書き方は、 SvelteKitのドキュメント にあります。
ですが、この記事では svelte-kit-dev コマンドを動作させることが最優先なので、設定は基本的に既定値で進めましょう。

svelte.config.js
const config = {};

export default config;

$ npx svelte-kit dev
> ENOENT: no such file or directory, scandir '/Users/ykoma/Repository/kit-playground/src/routes'
...省略...

src/routes ディレクトリーが必要みたいです。

src/routes ディレクトリーの作成

SvelteKitでは ファイルシステムベースのルーター が採用されていて、 src/routes ディレクトリーにファイルを置くことで ページ や エンドポイント を作成します。
ルーティング用のディレクトリーの既定値が src/routes なので [1] 、そのディレクトリーがないと始まらないということです。

ルートのページとして、 src/routes/index.svelte を作成します。

$ mkdir -p src/routes
$ touch src/routes/index.svelte
src/routes/index.svelte
<script>
  const s = "SvelteKit";
</script>

<h1>Hello, {s}!</h1>

ここまで来ると、 svelte-kit-dev コマンドが動き始めます。

$ npx svelte-kit dev
Pre-bundling dependencies:
  svelte/store
  svelte
  svelte/animate
  svelte/easing
  svelte/internal
  (...and 2 more)
(this will be run only when your dependencies or config have changed)

  SvelteKit v1.0.0-next.216

  network: not exposed
  local:   http://localhost:3000

  Use --host to expose server to other devices on this network

src/app.html の作成

svelte-kit-dev コマンドは一見正常に動いているようですが、実際にウェブブラウザーなどでlocalhost:3000 にアクセスすると、エラーメッセージが出力されます。

src/app.html does not exist

src/app.html は基礎となるテンプレートで [2] [3] 、SvelteKitで出力するページは基本的にこのテンプレートにコンポーネントをマウントすることで生成されます。

何も考えずに最低限の内容で src/app.html を書いてみます。

$ touch src/app.html
src/app.html
<!DOCTYPE html>
<html></html>

localhost:3000 をリロードすると、次のエラーメッセージが出力されます。

src/app.html is missing %svelte.head%

%svelte.head% は、 <head> 要素内に必要な要素をSvelteKitが挿入するためのプレースホルダーです。
src/app.html に %svelte.head% を追加します。

src/app.html
<!DOCTYPE html>
<html>
  <head>
    %svelte.head%
  </head>
</html>

localhost:3000 をリロードすると、今度は次のエラーメッセージが出力されます。

src/app.html is missing %svelte.body%

%svelte.body% は、 <body> 要素内に必要な要素をSvelteKitが挿入するためのプレースホルダーです。
src/app.html に %svelte.body% を追加します。

src/app.html
<!DOCTYPE html>
<html>
  <head>
    %svelte.head%
  </head>
  <body>
    %svelte.body%
  </body>
</html>

これで localhost:3000 をリロードすると、 src/routes/index.svelte から生成されたページがウェブブラウザーに出力されるはずです。

また、生成されたページのソースコードを見て、 %svelte.head% と %svelte.body% に何が挿入されているかを確認するといいかもしれません。

まとめ

実際にウェブアプリを開発するときには、svelte@nextイニシャライザーを素直に使った方がいいと思います。
それは、svelte@nextイニシャライザーで生成されるプロジェクトには、必要最小限の内容以上の、SvelteKitを使う上でのベストプラクティス的なものが多分に含まれているはずだからです。

この記事は、いわゆる「やってみた」系の記事ですが、この記事がSvelteKitの仕組みの理解のための足掛かりになれば幸いです。

脚注

  1. ルーティング用のディレクトリーの名前は svelte.config.js で変更できます。 ↩︎

  2. 基礎となるテンプレートの名前は svelte.config.js で変更できます。 ↩︎

  3. src/app.html については、現時点のSvelteKitのドキュメントには記載がありません。SvelteKitのドキュメント によると、SvelteKitにおける src/app.html は SvelteKitの前身である Sapper における src/template.html と同じもののようなので、 Sapperのドキュメント も参考にします。 ↩︎

Discussion