はじめに

最近流行りの JavaScript/TypeScript ランタイム Deno の Web フレームワーク Fresh を試していたときに、メタデータを設定する方法がドキュメントを探しても見当たらなかったので、記事にしてみました。

開発環境

	version
OS	Ubuntu 20 (WSL2)
deno	1.26.1
fresh	1.1.1

Fresh のおさらい

Freshでは routes ディレクトリ内にファイルを作成すると、fresh.gen.ts が生成され適切にルーティングしてくれます。

例として、以下のように routes/test.tsx ファイルを作成します。

routes/test.tsx

export default function() {
  return (
    <div>test</div>
  )
}

deno task start コマンドでサーバーを立ち上げ、 http://localhost:8000/test にアクセスすると以下のようなHTMLが返りページが表示されます！

http://localhost:8000/test

<!DOCTYPE html>
<html lang="en">
  <head>省略</head>
  <body>
    <div>test</div>
  </body>
</html>

では、本題へ移ります。

特定のページにメタデータを設定する方法

Head コンポーネントを使うことでメタデータを設定できます。

例として、先ほどの routes/test.tsx に Head でタイトルを入れてみました。

routes/test.tsx

import { Head } from "$fresh/runtime.ts"

export default function() {
  return (
    <>
      <Head>
        <title>テストページ</title>
      </Head>
      <div>test</div>
    </>
  )
}

http://localhost:8000/test にアクセスすると、無事にタイトルが表示されました。

http://localhost:8000/test


<!DOCTYPE html>
<html lang="en">
  <head>
    省略
    <title>テストページ</title>
  </head>
  <body>
    <div>test</div>
  </body>
</html>

すべてのページに共通のメタデータを設定する方法

routes/_app.tsx ファイルを作成し、以下のように Head コンポーネントを使うことで、全ページ共有のメタデータを設定できます。

routes/_app.tsx

import { AppProps } from "$fresh/server.ts"
import { Head } from "$fresh/runtime.ts"

export default function({ Component }: AppProps) {
  return (
    <>
      <Head>
        <title>テストページ</title>
      </Head>
      <Component />
    </>
  )
}

routes/_app.tsx 以外にも、 _ から始まる特殊なファイルがいくつかあるので Fresh を使い始める際には一通り見ておくとよさそうです！

おわりに

_app.tsx を用いた方法は公式ドキュメントにはまだ載っていませんが(2022年10月25日時点)、ドキュメントを追加する Pull Rrequest は発見できたので近いうちにより詳しい情報がドキュメントに追記されるかもしれないです。

また、Fresh を使った Web アプリケーションの例が以下に複数あります。本記事で紹介した _app.tsx の使い方など、ドキュメントに乗っていないテクニックがたくさんあるのでとても参考になります。

Fresh は2022年6月に v1.0.0 が公開されたばかりの新しい Web フレームワークですが、「Deno のインストールから Deno Deploy にデプロイ」という一連の流れがとてもスムーズにできて感動したので、もっと Fresh の開発の楽しさを体験してほしいです！

先日の Qiita Night フロントエンド特集でも Fresh の紹介がありました！

Fresh のこれからが楽しみですね！

参考文献

Deno: https://deno.land/
- Qiita: https://qiita.com/tags/deno
- 週刊Deno: https://uki00a.github.io/deno-weekly/
Fresh: https://fresh.deno.dev/
- GitHub: https://github.com/denoland/fresh
Deno Deploy
- https://deno.com/deploy

Deno の Web フレームワーク Fresh でメタデータを設定する方法