Deno Fresh の 概要・環境構築・メリット / デメリット

初投稿なので見にくいのはお許しを・・・・

Deno, Freshとは

Node.js の開発者が パッケージ管理や安全性を改善し作成した Deno。

Denoの開発元 Denolandにより
2022年、新しいWebフレームワーク Freshがリリースされました。

一言でいうと Deno版 Next.jsがしっくり来ます。

Preactにより動いています。
またpluginとしてtailwindCSSが使用可能です。
Deno Deployでのデプロイが楽です、

基本 Freshはサーバーサイドでレンダリングを完結させますが、
クライアントでも操作 (フォーム等)が必要な場合が有ります。
ここで Astroでも採用されている islands architectureを使用します。
基本的に islandsフォルダ直下のコンポーネントがクライアント側にJavaScriptが送信されます。
islands architecture については この記事が参考になるかも知れません。

---

ディレクトリ構成

ディレクトリ構造はこのような形式です。

~/
 |_ islands
   _ ~.tsx
 |_ components
   _ ~.tsx
 |_ routes
   _ ~.tsx
   ...
 |_ static
   _ ~.png | ~.jpg | ~...
 |_ README.md
 |_ deno.json
 |_ dev.ts
 |_ fresh.gen.ts
 |_ main.ts

全てのファイル・フォルダを紹介してると、キリが無い^[1]ので一部のみ紹介します。

islands

冒頭で説明した通り　ここの部分がクライアント側で実行されるようなコンポーネントです。
ちなみにislandsで読み込んだコンポーネントはどこから読み込もうが、クライアントサイドでのレンダリングが出来るようになってます。
componentsフォルダ直下はサーバーサイドでレンダリングされますが、islandsから読み込んだ場合は挙動が変わります。
詳しい挙動は公式のリファレンスを読んでください。
ファイル名に制約が有りますが、取り敢えず最初が大文字だったら良い でOK

components

ここは詳しい説明不要だと思います、
普通にコンポーネント置き場です。
分からなければ Reactを学んでください。

routes

ここの直下はNext.jsのpages直下と同じ感覚です。
routes/profile.tsxならばhttps://~.deno.dev/profileでAccess可能
index.tsxや_404.tsx, _app.tsx等が有りますがそこは公式のリファレンスを見て下さい。

static

画像等を配置します。

<img src="/icon.png" />

このように絶対パスから指定できます。

deno.json

import_map等が置かれています。
prefix等を設定します。
ここは使う内に慣れていきます。
@/を./に充てるのがおススメです。
import Counter from "../islands/Counter.tsx"
よりも
import Counter from "@/islands/Counter.tsx"
の方が分かりやすいし、ルートからの指定は管理しやすいです。

fresh.gen.ts

エラーが起きない限り触る必要は無いです。
VSCodeを使用していれば自動補完されます。

これは 2023/8/02 現在の仕様です。　変更が有る可能性も有ります。

---

環境構築

deno は公式サイトの手順に従ってインストールしてください。

超簡単です。
コマンドラインで
dneo run -A -r https://fresh.deno.dev
いくつかの質問に答えて End

早すぎる

スタートは deno task start
これで表示されたurlを踏めば終わり

簡単なカウンターの例が表示されます。後は自由に弄ろう

---

メリット・デメリット

メリット

まず大きいのが ホットリロード
ファイルの変更を検知して自動的にリロードしてくれます。

routes直下が自動的にルートされるので ルーティング要らず
勿論使い方次第で SPAも構築可能

そして外せない デプロイが簡単
deno.devにアクセスしてGUIを弄るだけ

デメリット

出来たばかりなので　コミュニティが小さい・バグフィックスが難しい
開発者も知らないようなエラーがたまに出てきます。
(私はhtmlタグに属性を付ける方法をいまだ知りません。。。
知ってる方居たら教えて頂けると・・・)

大規模開発にまだ不向き
まだ <- ここ重要です。
これは一つ目のデメリットに起因してます。

ただ Freshは開発が盛んです。
その分不安定ですが・・・
時間がこれらの問題を解決してくれると思います。

最後に

閲覧ありがとうございました
宣伝にはなりますが　良かったら筆者のTwitter垢と積極的に絡んでいただけると幸いです。

脚注

1. (めんどくさい...)