フルスタックの新フレームワーク「Fresh 1.0」がリリース！使い方を解説

Fresh 1.0がリリース

2022年6月28日、Fresh 1.0がリリースされました。Fresh は、Denoのフルスタックのウェブフレームワークで、次世代フレームワークと位置付けられています。ビルドステップがないため、高速なデプロイメントが可能です。2022年8月時点の最新版は、8月1日にリリースされた1.0.2です。

Freshとは、JavaScriptおよびTypeScript開発のためのフルスタックのウェブフレームワークを指します。フレームワークを活用した高品質で高性能のウェブアプリケーションを簡単に作成できるように設計されています

Freshでは、Denoが提供する実行環境をルーティングフレームワークとテンプレートエンジンを用いて、簡単に利用できるようにします。サーバー上でのジャストインタイム（JIT）レンダリングと、クライアントサイドのコンポーネントレンダリングを併用し、インタラクティブ性をより高めています。

TypeScriptとは？JavaScriptとの違いも解説！

Denoとは、V8 JavaScriptエンジン上に構築されたランタイム環境を指します。JavaScriptやTypeScriptの実行を行うものです。Node.jsの作者であるライアン・ダール氏はNode.js考案後、その経験と反省を生かしDenoを開発しました。2022年8月時点の最新版は、バージョン1.24.2です。

【参考】：Deno 【参考】：GitHub Deno

Node.jsとは？JavaScriptとの違いや使い所を解説

一般的にクライアントサイドのレンダリングは、JavaScriptのコード通信量が多く処理が重くなります。Freshでは、レンダリングの大半をサーバーで行い、特定コンポーネントのみ明示的にクライアントサイドでレンダリングします。デフォルトでは、クライアントにJavaScriptコードを送信しません。

フレームワークを実装するために、ルーティングフレームワークとテンプレートエンジンを用い、要求ページをサーバー上でレンダリングします。この仕組みにより、ランタイムのオーバーヘッドが発生せず、インタラクティブ性を向上させることができます。

Freshはビルドステップがないので、デプロイメントが高速です。TypeScriptやJSXからJavaScriptへの変換は、ジャストインタイムで必要時に自動的に行われます。

Fresh 1.0は初めての安定版としてリリースされました。マイナーリリースは適宜行われており、2022年8月時点の最新版は1.0.2です。現時点では登場間もないため、将来計画に関する情報は公開されていません。

【参考】：GitHub Denoland Fresh Reealses

Freshの設計方針は、高速でスケーラブル、信頼性の高いアプリケーションを簡単に構築することを目指したものです。

【参考】：Fresh Docs: Concepts

設計目標を達成するために、いくつかの原則に基づき設計されています。具体的には、1つ目としてページのロード時間は最小限に抑えるべき、ということです。2つ目はクライアントが行う作業を最小限にする、3つ目はエラーは最小限の範囲にとどめて周辺への影響を最小にする、ということです。

上記を実装するために、アイランドアーキテクチャ・パターンを採用しています。具体的にはFreshのアプリケーションが、デフォルトでJavaScriptコードを用いずに、純粋なHTMLをクライアントに送信するものです。

サーバーでレンダリングされたページの一部は、インタラクティブ性を高めるためクライアントサイドでレンダリングすることができます。一般的に再レンダリングの対象は限定されるので、高速で軽量なアプリケーションが開発できます。

Freshの使い方

Freshを使うには、先行してDenoのインストールが必要です。Freshは、Deno 1.22.3以降でサポートされます。インストール済みの場合は、念のため最新バージョンにアップグレードしておきます。Denoが利用可能になったら、プロジェクトを作成し開発を進めます。

【参考】：Fresh Docs: Getting Started

Denoのインストールは、シングルパッケージをダウンロードし展開して行います。WindowsやmacOS・Linuxに対応します。macOSでは、M1（arm64）とIntel（x64）に対応し、WindowsとLinuxでは、x64のみでサポートされます。

【参考】：Deno Installation 【参考】：GitHub deno_install

macOSやLinuxのシェルでは以下のように、インストールします。

curl -fsSL https://deno.land/install.sh | sh

Windowsでは、PowerShellを用いて以下のようにインストールを行います。

irm https://deno.land/install.ps1 | iex

すでにDenoをインストール済みの場合は、最新バージョンにアップグレードしておきます。

deno upgrade

プロジェクトの作成は、Freshのプロジェクト作成ツールを用います。 【参考】：Fresh Docs: Create a project

プロジェクトを作成することで、Freshに必要なファイルが指定フォルダに作成されます。ここでは作成フォルダを”my-proj”として指定し、プロジェクトを作成します。

deno run -A -r https://fresh.deno.dev my-proj

先ほど作成したプロジェクトでは、指定したフォルダにいくつかのファイルが自動的に作成されています。必ず必要となるのは、以下の4つです。 【参考】：Fresh Docs: Create a project

・dev.ts 作成したプロジェクトの開発エントリポイントで、プロジェクトを開始するために実行するファイルです。

・main.ts プロジェクトで実際に使用するコードのエントリポイントで、Deno Deployで使用するファイルです。

・fresh.gen.ts ルートとアイランドに関する情報を含むファイルで、開発時にroutesとislandsの各フォルダを元に自動生成されます。

・import_map.json プロジェクトの依存関係を管理するために使用されるインポートマップです。

上記の他に、Denoとの連携のために、deno.jsonファイルが作成されます。

ローカルでの実行は、プロジェクト作成時に指定したフォルダに移動し開発サーバーを起動します。

cd my-proj deno task start

これで、DenoのWatcherプロセスが開始されました。”http://localhost:8000”にアクセスすると、レモンのロゴとカウンターが表示されていることが分かります。 【参考】：Fresh Docs: Running locally

ここで、細かく起動オプションを指定することもできます。

ページの作成は、トップページとなる” routes/index.tsx”を修正することでメッセージを簡単に更新することができます。もちろん、ここで手直しすることで商用利用できる品質レベルに仕上げることもできます。

具体的には、静的および動的なルート設定とレンダリング、フォーム入力やハンドラーなどを設定し、インタラクティブ性を高めるための仕上げを行っていきます。具体的な作業項目は、公式サイトをご確認ください。 【参考】：Fresh Docs: Getting Started

完成版をデプロイするには、Deno Deployを利用します。Deno Deployは、JavaScriptやTypeScriptをエッジで実行する分散ランタイムシステムを指します。

【参考】：Deno Deploy

Deno Deployでは、GitHubインテグレーションを利用します。コードをGitHub上のリポジトリにプッシュし、Deno Deployのダッシュボードでデプロイのためにプロジェクトを作成します。プロジェクト作成が完了したら、プロジェクト設定の「Git」タブからリポジトリを選択し、Branchを”main”に、そしてEntrypoint fileを”main.ts”に指定します。

【参考】：Fresh Docs: Deploy to production

GitHubとは？メリットや使い方、Gitとの違いも徹底解説！

Deno Deployの手続きで、作成プロジェクトが自動的にインターネットにデプロイされます。Deno Deployは、URLを指定するだけでコードをデプロイすることができます。グローバルに分散配置されるリージョンを活用して世界中のユーザ向けの高速デプロイを実現します。具体的には、 ”https://$PROJECT_NAME.deno.dev” のリンクを用いてアクセスすることができます。

まずは試してみましょう

Freshの導入手順は非常に簡単です。インストールからプロジェクトの作成、開発サーバーの起動、そして完成した完成版のデプロイまでスムーズに行うことができます。カスタマイズはDocsを見ながら進めることができます。まずは、知識吸収の最初の1歩としてDenoとFreshに実際に触れてみてはいかがでしょうか。