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

今回は「Denoが新フレームワーク「Fresh 1.0」リリース。Just-in-timeレンダリングやランタイムオーバヘッドゼロなどの特徴がもたらす優位性とは?」についてご紹介します。

関連ワード (構築、直結、要求毎等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

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


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

バージョン番号の1.0が示すように、安定版としてのリリースです。

Fresh is a new full stack web framework for Deno. It sends zero JavaScript to the client by default and has no build step. Today we are releasing the first stable version of Fresh.https://t.co/WV2C6gllsL

— Deno (@deno_land) June 28, 2022

Freshは以下の特徴を持つと説明されています。

  • エッジでのJust-in-timeレンダリング
  • ビルドの工程が不要
  • デフォルトではクライアントにJavaScriptを用いないため、ランタイムオーバーヘッドがゼロ
  • 高いインタラクティブ性を実現するためアイランドベースのクライアントハイドレーションを採用
  • コンフィグレーション不要
  • TypeScriptをサポート

これらの特徴がFreshにどのような優位性をもたらすのでしょうか。

要求毎にHTMLをレンダリング。ビルド工程不要

Freshは、基本的にはすべてサーバサイド側でHTMLが生成されます。Freshの基礎部分はテンプレートエンジンとルーティングフレームワークであり、これが1つ目の特徴である「エッジでのJust-in-timeレンダリング」を実現しています。

ちなみにDeno LandはDenoをCDNのエッジロケーションで提供するサービス「Deno Deploy」を提供しているため、サーバサイドではなくあえて「エッジ」という言葉を使っているのだと推察されます。

エッジでのJust-in-timeレンダリングとは、要求が発生したタイミングでレンダリングを行い、HTMLを生成する、という意味です。これは2つ目の特徴である「ビルドの工程が不要」とも直結しています。

サーバサイドでHTMLを生成する場合、あらかじめビルドを行うことでHTMLファイルを生成しておくことで、Webブラウザから要求があった時点で生成済みのHTMLをすぐに返すことができる高速性を実現できます。ただしこの場合、デプロイする毎にビルド工程が発生するため、リリースサイクルが遅くなりがちです。

Freshでは要求毎にJust-in-timeレンダリングを行うことで事前のビルド工程を省略しました。これは事前にHTMLを生成する仕組みよりもWebサイトのレスポンスが多少犠牲になりますが、それ以上にFreshがリリースサイクルの高速さを重視しているといえるでしょう。

サーバサイドでHTMLを生成、クライアント側のJavaScript不要

クライアントとなるWebブラウザ側ではデフォルトでJavaScriptを用いないことも、Freshの大きな特徴です。

従来のWebアプリケーションの多くで用いたれていたSPA(Single Page Application)と呼ばれる仕組みでは、WebブラウザにJavaScriptフレームワークを送信、実行して、サーバ側から送られたデータを基にDOMを生成し、Webページが表示されるという処理が行われていました。

FreshではサーバサイドでHTMLが生成され、それがWebブラウザに送られてくるため、Webブラウザは受け取ったHTMLをすぐに表示できます。これが3つ目の特徴である「ランタイムオーバーヘッドがゼロ」です。

ただしこれではWebブラウザ上でインタラクティブなユーザーインターフェイスには不向きです。

そこで登場するのが4つ目の特徴である「高いインタラクティブ性を実現するためアイランドベースのクライアントハイドレーションを採用」です。

インタラクティブなWebページの機能も組み込める

Freshはアイランドアーキテクチャを取り入れています。

アイランドアーキテクチャを簡単に説明するならば、Webページのヘッダやフッタ、サイドバーなどインタラクティブ性が必要なく、固定されたレイアウトとデザインを持つ部分のHTMLは、あらかじめサーバサイドで生成して静的HTMLとしてWebブラウザに送信して表示しつつ、インタラクティブ性が必要となる部分のJavaScriptは必要に応じて後から組み込む(ハイドレーションする)、という仕組みのことです。

Freshではこのインタラクティブ性を組み込む部分のJavaScriptフレームワークとしてPreactとJSX/TSXに対応しています。

これにより、WebブラウザでのランタイムオーバーヘッドなしにWebページの高速表示が可能な利点をできるだけ活かしつつ、インタラクティブなユーザーインターフェイスにも対応することを実現します。

FreshはDenoの代表的なフレームワークに

DenoはもともとNode.js作者のライアン・ダール氏が、Node.jsでの反省を活かして新たに開発したJavaScript/TypeScriptランタイムでした。そのDenoは、フレームワークにおいても、既存のさまざまなフレームワークを見直してDeno(そしてDeno Deploy)にふさわしいものに作り直した、それがFreshなのかもしれません。

すでにDeno LandのWebサイトの多くがFreshで構築されているとのことです。今後FreshはDenoの代表的なフレームワークとなっていくと予想されます。

COMMENTS


Recommended

TITLE
CATEGORY
DATE
Zoom、オフィス再開に向けた新機能を「Zoom Rooms」に追加
IT関連
2021-02-04 13:14
日本で動き始めたIBM製“商用量子コンピュータ”の性能は? 実機を見てきた
科学・テクノロジー
2021-07-28 11:54
ダイカストメーカーのリョービ、AIチャットボット導入で社内の問い合わせ対応を効率化
IT関連
2022-06-24 03:29
アルゴリズムに焦点を当てた第230条の改正に向け米議員が公聴会で討議
パブリック / ダイバーシティ
2021-05-02 09:05
グーグル「Workspace」に複数のアップデート–セキュリティや共同作業など強化
IT関連
2022-04-05 20:46
ランサムウェア攻撃で190万人分の医療情報が流出のおそれ–米債権回収会社で
IT関連
2022-07-16 10:16
プライバシーポリシーへの懸念で欧米で人気のSignalとTelegramは中国国内でも(いまのところ)拡大中
セキュリティ
2021-01-19 01:36
ステイホーム花火大会、さいたま市が実施へ 日時や場所は非公開
くらテク
2021-07-30 17:04
自律型芝刈り機を提供する造園ロボットスタートアップScythe、芝を刈った面積に応じて料金が決まる
ロボティクス
2021-06-17 05:12
北陸大学、「Tableau」を導入–学生のデータリテラシー定着を支援
IT関連
2022-06-05 13:14
バイデン大統領が半導体・EVバッテリーなど4品目のサプライチェーン見直しを要求する大統領令に署名
ハードウェア
2021-02-26 14:55
Duality Labsはハードウェアアクセラレーション利用の準同型暗号テクノロジーで15.3億円のDARPA契約を獲得
人工知能・AI
2021-02-05 18:26
サイバー攻撃経験をIT運用の高度化につなげるソーラーウインズ
IT関連
2022-01-28 20:01
Switch版「ポケモンユナイト」テストプレイ始まる ポケモンを使った注目のMOBAタイトル
くらテク
2021-06-25 05:15