Denoのフロントエンドフレームワークの比較
#フロントエンドフレームワーク #フロントエンド
要約
Deno公式からFreshというフレームワークが提供されており、Deno Deploy向けにWebアプリケーションやWebサイトなどを開発する際の選択肢の一つとして良さそうです
Remix/Nuxt 3/SolidStart/AstroなどのNode.js向けのフレームワークでもDenoのサポートが少しずつ進められています
CSSについては、Tailwind CSSやTwind, UnoCSSなどがDenoでも動作するため、人気が高そうです
メタフレームワーク (Deno製)
Fresh
PreactとesbuildをベースにしたDenoの公式フレームワークです (元々は、Luca Casonato氏個人のプロジェクトでしたが、v1リリースとともにdenoland organizationに移行されました)
おそらく、現時点で最もGitHubのスター数が多いDeno製フレームワークです (2022/08時点で8.5K)
DenoやDeno Deployで動作し、PreactコンポーネントのSSRがサポートされます
Island Architectureやクライアントサイドでのナビゲーションを実現するためのPartialsなどの仕組みがサポートされています
プラグインシステムを提供しており、Fresh公式からTailwind CSSプラグインが提供されています
Denoやdeno lintの公式サイトであるdeno.landやlint.deno.landなどでも利用されています
カスタムハンドラーによって、REST APIなどを実装することもできます。
Aleph.js
Next.jsに影響を受けたReact & Denoベースのフレームワーク
Deno Deployのサポートが提供されています
プラグインシステムが実装されており、これによって様々なフレームワークやファイル形式(MDXなど)をサポートすることも可能です。
公式ではYewの使用例があります。
(今はありませんが) 以前まではVue.jsやSolid.js向けの公式プラグインが提供されていました。
Ultra
ReactとDenoをベースに実装されたフレームワーク
Aleph.jsと比較すると、拡張性ではやや劣るものの、よりシンプルな印象です
React v18やAPIルートなどをサポート
deno vendorコマンドとは異なる、独自のベンダリングシステムを提供
Honoとの統合
MDXのサポート
Dext.ts
Next.jsに影響を受けたDeno製フレームワーク
こちらはReactではなくPreactがベースです
前述のFreshと同様にLuca Casonato氏によって開発されています
Dext.tsは更新ペースが落ちている印象で、今後はFreshの開発に注力されていくのではないかと予想しています
nanossr
Nano JSX(DenoとNode.jsの両方をサポートする軽量・高速なフレームワーク)とTwindベースの軽量フレームワーク
コンポーネントはJSXで記述し、SSRサポートを提供しています
Denoの旧APIドキュメンテーションサイトであるdoc.deno.landやWinterCGのWebサイトなどで利用されています
メタフレームワーク (クロスプラットフォーム※)
※公式などでNode.jsだけでなくDenoサポートも提供されているフレームワークについて紹介します
Hono (Honox)
HonoはOakやExpressなどのマイクロフレームワークとしての機能に加えて、Viteをベースとしたメタフレームワークとしての機能の拡充なども進んでいるようです。 (Hono v4)
そのため、将来的にはFreshやDenoでも動作するRemixなども競合となる可能性があるかもしれません。
hono/jsxはDenoのprecompiled JSX transformに対応しています
Remix
公式でDenoアダプタが提供されており、サーバランタイムとしてDenoを利用可能です (@remix-run/deno)
ただし、開発にはまだNode.jsが必要です (2022/04時点)
Nuxt 3
Nuxt v3.6.0で取り込まれたNitro v2.5.0では、deno-deployとdeno-serverという2種類のPresetが追加されています。
NitroはNuxt 3が採用しているサーバエンジンで、Presetという仕組みにより、Cloudflare WorkersやNode.js, Denoなどの様々な環境でNuxt 3アプリケーションを動作させることができます。
これにより、Nuxt 3アプリケーションをDeno Deployなどにデプロイする余地が生まれました。
SvelteKit
Deno向けのアダプタがあります
Deno v1.41.2からDenoで動作するように
SolidStart
Deno Deploy向けのアダプタが提供されています (https://github.com/solidjs/solid-start/tree/main/packages/start-deno)
メタフレームワーク (Node.js向け※)
※公式ではDenoサポートは提供されないものの、DenoのNode.js互換機能を活用することで動作する余地があるものについて紹介します (Denoのnpmパッケージサポート)
Next.js
DENO_FUTUREの指定は必要なものの、Deno v1.44からDenoでも動かせるようになったようです ()
Deno公式ドキュメントでNext.jsのチュートリアルが公開されました ()
また、Next.jsの本番サーバーをDeno Deployで動作させるための@deno/nextjs-startというJSRパッケージが公開されています
ビルドツール
packup
Parcelに影響を受けたDeno製のビルドツール
esbuildをベースに実装されています
vno
DenoでVue.jsを使ったアプリを開発するためのツール
Aleph.jsやDext.tsと同様に、SSR・SSGなどの機能をサポートしています。
2022/10 追記) 現在は、開発がやや滞っているようです
Snel
DenoでSveleteアプリを開発するためのツール
v0.5.0現在、SSRやSSGなどの機能はサポートされていないものの、将来的には実装される予定のようです。
esbuild
Denoでも動作するため、FreshやAleph.js, packupなどの内部で使われています
https://github.com/esbuild/deno-esbuild
Freshではesbuild_deno_loaderが使用されています
Vite
Deno@v1.25でnpmパッケージのサポートが入ったため、動かせるようになりました (Denoのnpmパッケージサポート)
Bartek Iwańczuk's "Vite Got Deno-fied" at ViteConf 2022
create-vite-extraではDeno向けのテンプレートが提供されています
vite_plugin_deno_resolveというViteプラグインもあるようです
Deno公式からもViteプラグインが公開されています (denoland/deno-vite-plugin)
Luath ※現在はしばらくメンテナンスされていなさそうです
WMR/Viteライクなビルドツール
esbuildベース
Rollupベースのプラグインシステムを提供
スタティックサイトジェネレータ
Lume
Denoで実装されたシンプルなスタティックサイトジェネレータ
Markdown/JSXだけでなく、NunjucksやYAMLなど様々なフォーマットをサポート
Pagic
React & Denoベースのスタティックサイトジェネレータ
プラグインシステムによって拡張が可能
ページはReactコンポーネントまたはMarkdown形式で記述
Aleph.js
Aleph.jsはスタティックサイトジェネレータとしての利用も可能です (Aleph.jsの詳細については割愛)
Astro
Denoアダプタを提供しており、SSRランタイムとしてDenoを利用できます
Deno v1.35からAstroのCLIなどもDenoで直接動かせるようになりました
Build and Ship Astro Sites with Deno and Deno Deploy
Docusaurus
Denoでも動作するため、Denoの公式ドキュメントで採用されています (Denoの使用事例)
Gatsby
Adaptersという様々なプラットフォームを抽象化するための仕組みの導入が検討されているようです
これが導入されれば、例えばDeno Adapterを実装することにより、Gatsbyが生成した本番向けの成果物をDenoで動かせるようになりそうです
VitePress
Deno v1.41.3からDenoで動作するように
CSS関連のツール/ライブラリ
Tailwind CSS
npm:の導入により、Denoでも動くようになりました (Denoのnpmパッケージサポート)
FreshはTailwind CSSを公式でサポートしています (Tailwind CSS向けのプラグインが提供されています)
Twind
Tailwind CSSのクラスからスタイルを動的に生成してくれるライブラリ
deno lintの公式サイトであるlint.deno.landやDenoのAPIドキュメンテーションサイトであるdoc.deno.landなどで利用されています
Freshは公式でTwindのサポートを提供しています
twd
Tailwind CSSライクなスタイルシートを生成するCLIツール
内部ではTwindが使用されています
UnoCSS
Denoでも動作するようで、Aleph.jsは公式でUnoCSSのサポートを提供しています
FreshにおいてもUnoCSSサポートの需要はあるようで、プラグインの提供について検討されているようです ()
テストフレームワーク
deno test
Denoに組み込まれたテストランナ
現状はこれを使っておくのが無難だと思います
deno_std/testing/bdd.tsを使うと、BDD形式でテストを記述できます
E2Eテスト
deno-puppeteer
puppeteerをDenoに移植したパッケージ (内部的にはpuppeteer-coreが使用されています)
FreshのE2Eテストはdeno-puppeteerで書かれています。
astral
puppeteer/playwrightライクなDenoライブラリ
Freshで採用されているようです (deno.json#L37)
Sinco
Deno製のブラウザ自動化・テスト用ライブラリ
ChromeとFirefoxをサポート
タスクランナ
deno task
Deno本体に組み込まれたタスクランナ
独自のシェルを実装しており、cross-env相当の機能やxargsなどの各種コマンドを組み込みで提供しているのが大きな特徴です。
package.json
上記のdeno taskコマンドは、package.jsonのscriptsも実行することが可能です。
velociraptor
npm scriptsに影響を受けたタスクランナ
Gitフックもサポートしています
依存管理
deno.json (Import maps)
Import mapsとは、Denoやブラウザなどにbare specifierを認識させることができる機能ですが、これは依存関係の管理にも活用することができます。
FreshやAleph.jsなどはこのアプローチを採用しています。
Deno本体で提供されるdeno addやdeno removeなどのコマンドによってdeno.jsonのimportsフィールドの更新とパッケージのダウンロードなどを行うこともできます。
Trexやesm.sh CLIなどのImport mapsの管理に特化したCLIツールも存在します。
基本的には、まずこのアプローチを試してみるのがよいのではないかと思っています。
package.json
Denoはpackage.jsonを認識してくれます。
具体的には、package.jsonを配置しておくと、dependenciesの定義などを元にbare specifierを認識してくれるようになります。(Denoがpackage.jsonをImport mapsであるかのように扱ってくれるイメージです)
利用しているフロントエンドフレームワークやツールなどがpackage.jsonを要求する場合は、こちらの使用も検討するとよいかもしれません (Denoのnpmパッケージサポート)
deps.ts
あるアプリケーションやライブラリなどが依存するパッケージをdeps.tsという単一のファイルでまとめて管理する手法です。
シンプルではありますが、Tree shakingのことなども考えると、フロントエンド開発においてはあまり推奨されない手法だと個人的には思います。
CDN/モジュールレジストリ
jsr (jsr.io)
npmレジストリと互換性のあるパッケージレジストリです
Denoの本体にはjsrと連携してパッケージ管理をする仕組みが組み込まれています
Deno向けのライブラリを探す際は基本的にここから探すとよいと思います
Denoの標準ライブラリであるdeno_stdもjsrからの利用が想定されています
一部のnpmパッケージにおいてjsrへの公開も少しずつ進められています (例: hono (@hono/hono), valibot (@valibot/valibot), など)
jsrでも公開されているnpmパッケージについては、高確率でDenoでも動作する可能性が高いと思われます
Fresh v2でもjsrへ移行予定のようです
deno.land/x
Deno公式のモジュールレジストリ
Deno向けのモジュールは基本的にここから探すとよいでしょう
現時点では、まずjsrからパッケージを探すことをおすすめします
nest.land
Denoのモジュールレジストリ
Deno向けのモジュールは、概ね上記のdeno.land/xかnest.landのいずれかで公開されていることが多いです。
ブロックチェーンをベースに実装されているようです。
crux.land
小さなスクリプトを配信することを目的としたモジュールレジストリです。
nanossrはcrux.landから配信されています。
esm.sh
Aleph.jsの開発者であるije氏によって開発されています。
X-TypeScript-Typesヘッダをサポートしており、Denoとの相性がよいのが特徴です。
freshやAleph.jsなどは、このesm.shを使用して各種フロントエンドフレームワークなどを読み込んでいます。
Skypack
esm.sh同様に、X-TypeScript-Typesヘッダをサポートしています。
npmパッケージの利用について
Denoでは、以下のいずれかの手段などによりnpmパッケージを利用することができます (詳しくはDenoのnpmパッケージサポート)
npm:URL経由で読み込む
package.jsonに依存パッケージを記述する
esm.shやunpkgなどから読み込む (Fresh v1やAleph.jsなどはesm.shを利用しています)
deno.land/xから読み込む (一部のnpmパッケージは、deno.land/xにも公開されている場合があります)
また、これらの手法は併用することも可能です。
関連ページ
Denoのnpmパッケージサポート
DenoのWebアプリケーションフレームワークの比較