Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能

今回は「Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能」についてご紹介します。

関連ワード （実現、更新、特徴等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

JavaScriptやTypeScriptのサーバサイドランタイム「Deno」を開発するDeno Land Inc.は、Deno用のフルスタックフレームワーク「Fresh」最新版となる「Fresh 1.1」をリリースしました。

Fresh v1.1 has been released with significant improvements:

Automatic mode JSX
Plugin system
Preact DevTools integration
New Tailwind plugin
Preact Signals support

…and much more!

Read the full release notes: https://t.co/YrrxCcXgmA

— Deno (@deno_land) September 8, 2022

Freshは、7月に正式版がリリースされました。

CDNエッジでのJust-in-timeレンダリングによってWebページのビルド工程が不要で、デフォルトではクライアントにJavaScriptを用いず処理のオーバーヘッドが存在しない一方で、インタラクティブ性が必要となる部分のJavaScriptは必要に応じて後から組み込むアイランドベースのクライアントハイドレーション機能を採用する、などの特徴を備えています。

参考：Denoが新フレームワーク「Fresh 1.0」リリース。Just-in-timeレンダリングやランタイムオーバヘッドゼロなどの特徴がもたらす優位性とは？

自動JSXモード、プラグインシステム、Preact Signals対応など新機能

Fresh 1.1では上記のツイートにあるように、「Automatic mode JSX」「プラグインシステム」「Preact DevToolsの統合」「Tailwindプラグイン」などの新機能が追加されました。

Automatic mode JSXでは、これまでプロジェクトのコードの先頭で明示的にJSXモードを宣言するために書かれてた「/** @jsx h */」「import { h } from “preact”;」の2行が不要になり、デフォルトで自動的にJSXモードを検知するようになりました。

プラグインシステムが導入され、Freshの機能をプラグインで拡張できるようになりました。現時点でプラグインはレンダリングされたHTMLにスタイルやスクリプトを注入することだけの機能に制限されているとのこと。例えば、Google Analytics のスクリプトをページに注入するといったことが可能です。

DenoからオフィシャルなプラグインとしてTailwindをJavaScriptで実装したTwindベースのプラグインが公開されまています。

デフォルトでPreact Signalsがサポートされました。Preact Signalsは高速なレスポンスを実現できる状態管理フレームワークであり、効率的な方法でコンポーネントやUIを更新してくれます。

これに合わせてWebブラウザの拡張機能として提供しているPreact DevToosもサポートされました。これによりPreactのコンポーネントのレンダリング状況などの把握などが容易になり、開発やデバッグの効率が高まることが期待されます。ChromeやEdge、Firefoxで利用可能です。

そのほか、明示的に404ページをレンダリングすることもできるようになるなど、詳細は「Fresh 1.1 – automatic JSX, plugins, DevTools, and more」をご覧ください。