はじめに

虎の穴ラボの開発室ブログでは、おっくんさんが「Deno で掲示板サイトを作ろう！ with upstash & supabase」というDenoの連載記事を投稿しています。連載記事内では、掲示板サイトを構築するために「Fresh」というWebフレームワークを利用しています。

「Fresh」については磯江と奥谷さんがパーソナリティを務めるPodcast「Toralab.fm」でもお話しました。

spotifyanchor-web.app.link youtu.be

今回は、そんな「Fresh」のルーティング部分を主に解説します。 Deno連載記事への導入となれば、幸いです。

次世代のWebフレームワーク「Fresh」

fresh.deno.dev

Freshを利用すれば、TypeScriptでWebアプリケーションを簡単に開発できます。 Freshの特徴としては以下の特徴があります。

ビルド不要
設定なしで開発を始めることができる
ジャスト・イン・タイムでのレンダリング
クライアントJSを必要としないため、小型で高速
標準でTypeScriptが利用できる
Next.js準拠のファイルシステムルーティング

この特徴のうち、いくつかを取り上げていきます。

Freshの導入

まずは、Freshの導入を通じて「ビルド不要」「設定なしで開発を始めることができる」部分を見ていきます。

Freshを利用するには、Deno 1.25.0以上を利用する必要があります。

Homebrew（インストール）

brew install deno

Denoが導入済みで、1.25.0未満を利用している場合は、アップグレードします。

deno upgrade

以下コマンドを実行することで、Freshを導入できます。

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

途中で Tailwind CSS と VS Code の利用について、聞かれますので適宜選択してください。

  🍋 Fresh: the next-gen web framework.  

Let's set up your new Fresh project.

Fresh has built in support for styling using Tailwind CSS. Do you want to use this? [y/N] y
Do you use VS Code? [y/N] y
The manifest has been generated for 3 routes and 1 islands.

Project initialized!

Enter your project directory using cd trial_deno_fresh.
Run deno task start to start the project. CTRL-C to stop.

Stuck? Join our Discord https://discord.gg/deno 

Happy hacking! 🦕

これで開発の準備が整いました。アプリケーションの「設定なしで開発を始めること」ができています。

早速、ローカルでWebアプリケーションを起動してみます。

cd my-project
deno task start

「ビルドステップなし」で起動できていることを確認できます。

Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 3 routes and 1 islands.
Listening on http://localhost:8000/

起動ログに記載の通り http://localhost:8000/ にブラウザでアクセスすることで、以下の画面が表示されます。

Freshのルーティング

Freshでは、デフォルトではファイル名を利用して呼び出されるパスを指定します。 Freshの導入後に routes ディレクトリが作成されていることが確認できます。 Next.jsでのファイルベースのルーティングと同様に routes ディレクトリからの相対パスでURLパターンを決定しています。

例として、http://localhost:8000/about へアクセスできるように routesディレクトリ内にabout.tsxファイルを作成します。

import { PageProps } from "$fresh/server.ts";

export default function About(props: PageProps) {
  return <div>This is about page.</div>;
}

動的ルーティング

動的なルーティングを行いたい場合には、routesディレクトリ内に作成するファイル名を[]で囲みます。 Fresh導入時に作成されているroutes/[name].tsxが動的ルーティングに対応しています。

import { PageProps } from "$fresh/server.ts";

export default function Greet(props: PageProps) {
  return <div>Hello {props.params.name}</div>;
}

URLのパラメタはPagePropsから取得できます。

カスタムURLパターン

ファイルベースのルーティング以外に独自のURLパターンを設定することもできます。 routesディレクトリ内にcustom.tsxファイルを作成し、独自のURLパターンを設定します。

import { RouteConfig, PageProps } from "$fresh/server.ts";

export const config: RouteConfig = {
  routeOverride: "/api/v1/:resource(foo|bar)/:id(\\d+)?",
};

export default function Api(props: PageProps) {
  return <div>Resource:{props.params.resource} And Id:{props.params.id}</div>;
}

RouteConfigでURLパターンを設定し、独自のルーティングを設定しています。 http://localhost:8000/api/v1/foo/1にアクセスした結果とhttp://localhost:8000/api/v1/bar/2にアクセスした結果を比べます。

独自のURLパターンが反映されており、パラメタ部分もそれぞれ取得できていることが確認できます。

おわりに

今回は、Freshの導入とルーティングについて解説してみました。 Deno Deployと組み合わせることで手軽にWebサイトを構築することができるFreshですが、API用途などにも利用できますので、これからの発展がとても楽しみなところです。ぜひ、虎の穴ラボのDeno連載記事とともに見守っていただければと思います。

他にもFreshを利用した記事が投稿されていますのでぜひ御覧ください

toranoana-lab.hatenablog.com