Deno のフルスタック・ウェブフレームワーク「Fresh」を触ってみる
Freshについて少し調べてみたので、その時のメモになります。
Freshとは
Fresh is a new full stack web framework for Deno. By default, web pages built with Fresh send zero JavaScript to the client. The framework has no build step which allows for an order of magnitude improvement in deployment times. Today we are releasing the first stable version of Fresh.
実行手順
以下のコマンド通り実行し、 http://localhost:8000/を開くと以下のような画面になります。
$ deno run -A -r https://fresh.deno.dev my-project $ cd my-project $ deno task start
補足
denoのエラーがでる場合
denoをインストールしていない場合は以下のようなエラーが出るため、denoのインストールが必要です。
エラー内容
$ deno run -A -r https://fresh.deno.dev my-project zsh: command not found: deno
denoのインストールについて
macの場合は以下でインストールできます。
$ brew install deno
deno run -A -r https://fresh.deno.dev my-projectを実行した際の挙動
deno run -A -r https://fresh.deno.dev my-projectを実行した場合、以下のようにダウンロードされます
$ deno run -A -r https://fresh.deno.dev my-project Download https://fresh.deno.dev/ Download https://deno.land/x/fresh@1.0.2/init.ts Download https://deno.land/x/fresh@1.0.2/src/dev/deps.ts Download https://deno.land/x/fresh@1.0.2/src/dev/error.ts Download https://deno.land/x/fresh@1.0.2/src/dev/mod.ts Download https://deno.land/std@0.150.0/flags/mod.ts Download https://deno.land/std@0.150.0/fs/walk.ts Download https://deno.land/std@0.150.0/path/mod.ts Download https://deno.land/std@0.150.0/semver/mod.ts Download https://deno.land/std@0.150.0/_util/assert.ts Download https://deno.land/std@0.150.0/fs/_util.ts Download https://deno.land/std@0.150.0/_util/os.ts Download https://deno.land/std@0.150.0/path/_interface.ts Download https://deno.land/std@0.150.0/path/common.ts Download https://deno.land/std@0.150.0/path/glob.ts Download https://deno.land/std@0.150.0/path/posix.ts Download https://deno.land/std@0.150.0/path/separator.ts Download https://deno.land/std@0.150.0/path/win32.ts Download https://deno.land/std@0.150.0/path/_constants.ts Download https://deno.land/std@0.150.0/path/_util.ts Do you want to use 'twind' (https://twind.dev/) for styling? [y/N] y Do you use VS Code? [y/N] y The manifest has been generated for 3 routes and 1 islands.
freshのファイル内容について
ディレクトリ全体については以下のようなイメージになります。
my-app/
├── README.md
├── deno.json
├── dev.ts
├── fresh.gen.ts
├── import_map.json
├── islands
│ └── Counter.tsx
├── main.ts
├── routes
│ ├── [name].tsx
│ ├── api
│ │ └── joke.ts
│ └── index.tsx
└── static
├── favicon.ico
└── logo.svg
dev.ts
プロジェクトの開発エントリポイント
main.ts
プロジェクトのプロダクションエントリーポイント
fresh.gen.ts
routesとislandsに関する情報を含むマニフェストファイル
import_map.json
プロジェクトの依存関係を管理するために使用するインポートマップ
deno.json
プロジェクトの依存関係ファイル(import_map.json)の読み込みやプロジェクトで実行したいコマンドの登録を行うファイル
routes/
ページを開く際のルートフォルダ。設定箇所で開くページについては以下を参照
routes/index.tsx:http://localhost:8000/routes/[name.]tsx:http://localhost:8000/hogehgoeの部分は任意で設定可能
islands/
クライアントサイドのインタラクティブ性を実現するためのファイル。 JavaScriptの読み込みが大きい場所などで使用していない箇所はScriptタグの読み込みを行わないことにより、ページのパフォーマンスを効率化することができます。
static/
静的なファイルを格納するフォルダ。
デプロイについて
GitHubにpush, deno deployで設定を行うことでデプロイすることができます
最後に
初期からルーティングのリンクの追加したのみですが、デプロイしたものについてはこちらになります。
