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
GitHub、動画アップロード機能に正式対応 バグの再現手順や新機能の紹介などが容易に
ネットトピック
2021-05-19 06:21
日本オラクル社長が語った「企業ITのクラウド移行に向けた“顧客視点”」
IT関連
2021-07-16 23:04
マーク・ザッカーバーグ氏、InstagramにNFTを近々導入すると発言
IT関連
2022-03-17 14:54
【コラム】自由とプライバシーの保有格差、デジタルフロンティアにおける不平等の拡大
IT関連
2021-08-22 12:46
ソニー生命の海外子会社で170億円の不正送金 加入者への影響はなし
企業・業界動向
2021-08-05 20:38
クラウドセキュリティ、日本はネットワークやCASBを重視–トレンドマイクロ調査
IT関連
2021-01-25 16:07
マイクロソフト「Cortana」、iOSとAndroidアプリのサポート終了
IT関連
2021-04-01 03:58
5万800円の2 in 1タイプChromebook「ASUS Detachable CM3」発売、ペンも収納可能
ハードウェア
2021-03-18 09:47
オラクル、Cohereと連携で生成AIサービス開発へ–OCIでの提供図る
IT関連
2023-06-17 21:50
SES営業の価値とは–システムエンジニアリングサービス分科会
IT関連
2023-08-09 12:46
楽天モバイル、「楽天市場」でSIMフリーiPhone発売 Apple公式リセラーに
くらテク
2021-06-23 04:15
PwCコンサルティングが創設したシンクタンクは何を目指すのか
IT関連
2022-11-12 00:13
クラウド/データセンター領域でも存在感–英アームが描くインフラ向け事業戦略
IT関連
2022-09-21 07:46
Exotec Nihon、倉庫自動化ソリューションを展示する「東京デモセンター」開設
IT関連
2023-07-01 23:59