🠷
HAREWORKS.NET
TOP → BLOG →

DenoでSvelteKitを使った開発をしたい！

< Back to WRITINGS

DenoとSvelteが好きなので、DenoでSvelteKitを使った開発をしたいのです。

記事を書きながら色々やっていたら、案外しっかりDenoで環境を作れました。

Denoで開発し、Denoでサーバーを建てられます。Deno Deployにだって出せます。

Why Deno?

Denoは。スクリプト単体でも使えるポータビリティと、deno組み込みのツールチェーンが魅力です。

2025年末時点で、Denoは2.6になっています。昔の印象でDenoがなんとなく微妙に感じている人、少し認識をアップデートをしていただきたい。 最新のDenoで何が出来るのかを軽く説明しましょう。

まず、パッケージをインストールせずに、起動時にインストールできます。import * from "npm:package"のようにすることで、自動的に最新のパッケージをインストールして使えます。web開発では使いませんが。 あとは、deno compileやdeno install等、アプリケーションとして利用する方法もちゃんとあります。が、これも今回は使わないので関係ありません。

あとは、2.6でnpx代替のdxが追加されました。deno x --install-aliasで、dxコマンドが使えるようになります。これも今回は使わないので関係ありません。

で、ここまで説明しておいてなんですが、そんなに強力なNode.jsからDenoに移行しなければならない理由はありません。 強いて言えば、ツールチェーンがコンパクトで、シンプルに始められるのでややこしさが無い。

つまり、俺がNodeよりもBunよりもDenoが好きだから、というだけです。

詳しいセットアップ

開発環境と実行環境をまとめてDenoにし、ツールチェーンもできるだけdenoをプライマリにする構成です。

躓いたところは、Svelte LSPが脱tsconfigをさせてくれなかったところ。

記事の最後の方にdeno.json(.jsonc)の全文を置いておきます。

SvelteKitプロジェクトを作る時

今から新しく作るなら、dx sv createコマンドは直接使わず、必要なものだけ持ってくるのが良いと思います。 package.jsonではなくdeno.jsonを使いたいですし、他にも色々余分なものができたりするので。

自分はやってみたかったので、sv createで作られるpackage.jsonを手動で変換し、deno.jsonに１本化しました。 svで簡単にセットアップするなら、package.jsonにある依存関係は無理に変換しなくても良いと思います。

開発環境の設定

Deno環境での開発における魅力は、deno fmtやdeno lintによるツールチェーン問題の排除でしょう。 わざわざprettierやeslintを置かなくても、基本的なtypescript開発にはこれがあれば十分強力です。

tasksの指定に関しては、package.jsonのときのような

{
  "scripts": {
    "dev": "vite dev"
  }
}

をそのままtasksに入れると、viteってなんぞ？ってなってしまうので、

{
  "tasks": {
    "dev": "deno run --env-file -A --node-modules-dir npm:vite dev"
  }
}

のように書いてあげましょう。 先述の通り、denoの奴を使うのでformat/lintは不要です。

便利〜〜！と思いましたが、HTML/CSS、ましてやSvelteとなると少し設定が必要です。

Deno環境で普通にSvelteを書くと、.svelteファイルはノータッチなのです。(あたりまえ)

そのため、deno fmt --unstable-componentを用います。deno.jsonに書けば常にフラグがつきます。

{
  "unstable": ["fmt-component"]
}

あとは、compilerOptionsを次のように書いています。

allowImportingTsExtensionsについては、denoのoptionではなく、svelte-checkの為のdeno.jsonをtsconfig.jsonとして使用する為の設定です。 Denoは、.ts等を省いたimportをSloppy imports are not allowed.と怒ります。逆に、tsserverは、An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled.と言ってくるので、こうしています。

{
  "compilerOptions": {
    "checkJs": true,
    "strict": true,
    "allowImportingTsExtensions": true
  }
}

tsconfig.jsonを消し去りたい

加えて、今回はtsconfig.jsonのdeno.jsonへの完全移行を目指します。(ネタバレ：Svelte-LSPがtsserverを使うため、無理)

deno.jsonでは、extendsは使えないので、deno.jsonに直接書く必要があります。 自前で意地で翻訳するか、スクリプトを書きましょう。自分は一応スクリプトを書きました。gistに置いておきますが、何の保証もありません。

deno.jsoncと.svelte-kitが有る状態で下のコマンドを実行することで、deno.jsoncに.svelte-kit/tsconfig.jsonの内容を合成できます。

deno run --allow-read --allow-write \
  https://gist.githubusercontent.com/HareK02/30c9fe4d2e293ecdf39889f34d2c7560/raw/4eea7667124d36eba4cfe30fc89e77962fe4ddf5/merge_tsconfig_to_deno.ts \
  ./.svelte-kit/tsconfig.json

一応これで、denoが認識するファイルはちゃんと解決されるのですが、エディタの問題があります。Svelte-LSPがtsserverを使うため、VSCodeなどのエディタで、リファレンスジャンプが出来ないのです。

Svelte Language Server の使うts環境をいじれないか考えたのですが、面倒すぎたので諦めて、開発環境用のtsconfig.jsonを別途用意しました。

{
  "extends": "./deno.json"
}

これだけ。 denoの解釈としてはtsconfig.jsonがあれば前提として利用し、deno.jsonで上書きするようなので、Deno的には問題なく動くみたいです。

Deno環境で開発、Denoで本番も動かす

さて、ここまででこれまでのnpm環境と同様に開発できるようになったというところで、サーバーが結局Nodeじゃぁ何か締まらないですよね。

嬉しいことにDenoにはAdapterがちゃんとあるんですね。

https://github.com/denoland/svelte-adapter

Node互換で動かせばNode用ビルドもなんやかんや動いたりするみたいですが、公式のアダプターはDeno-Deployでも使える形で、基本的にNode互換が必要ないようにされているみたいです。

ただadapterを置き換えるだけですね。

deno.json概要

tasksのcheckで利用しているnpm:svelte-checkは、denoの起動時解釈で自動的にインストールされます。 deno checkとdeno task checkで二つ必要なので面倒かも。基本的には後者で十分なはずですが、自分は自動化には両方入れてます。

あと注意点ですが、これにプラスして./.svelte-kit/tsconfig.jsonを合成する必要があります。gistにスクリプトを上げてます。。

{
  "tasks": {
    "dev": "deno run --env-file -A --node-modules-dir npm:vite dev",
    "build": "deno run -A --node-modules-dir npm:vite build",
    "preview": "deno run -A --node-modules-dir npm:vite preview",
    "check": "deno run -A --node-modules-dir npm:@sveltejs/kit sync && deno run -A --node-modules-dir npm:svelte-check --tsconfig ./tsconfig.json"
  },
  "imports": {
    //build
    "svelte": "npm:svelte@5.46.0",
    "@sveltejs/kit": "npm:@sveltejs/kit@2.49.2",
    //dev
    "vite": "npm:vite@7.3.0",
    "@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@6.2.1"
  },
  "unstable": ["fmt-component"],
  "compilerOptions": {
    "checkJs": true,
    "strict": true,
    "allowImportingTsExtensions": true
  }
}

締め

こまごましたスクリプトからWeb開発まで、Denoで全部出来ます。なんならバイナリも作れるしインストールできるし、モダンなJSランタイムとしてのDenoはかなり魅力的ですね。

実際の体験もかなり開発に使えるようになってきていて、あと少しすればNodeと遜色ない環境になりそうです。Denoのパッケージ管理が楽で好きなので、メジャーになってほしい。

参考文献