少し前になるが、DenoにおけるフロントエンドWeb開発フレームワークとしてFreshがリリースされている
今月のWEB+DB Press の裏表紙を見たら、Denoが広告を打っていて超びっくりした
せっかくなのでさわりとして、いくつかの情報をまとめた
Denoとは
Node.js の作者であるライアン・ダール氏によって作成された、Node.jsにおける反省点を踏まえて作られたJavaScript 及び TypeScript のランタイム環境
Node.js環境下では、TypeScriptはトランスパイラを通したりビルドしたりする必要があるがDenoはTypeScriptをそのまま実行することができるようになります。
特にNode.jsと比較して強化されているのはセキュリティ周りです。
Denoはデフォルトでサンドボックス内で動作する形を取っているため、明示的にアクセスを許可してあげないとファイルシステムなどへのアクセスの確認が頻発したりします。
Fresh
TypeScriptのランタイム環境としてのDenoは、それはそれでTypeScript使いに取ってはいいものに見えましたが、Webフロントエンド開発は別に用意する必要がありました。
ところが、今年の7月にDeno用のフルスタックWebフレームワークとしてFreshをリリースしました
Fresh is a new full stack web framework for Deno. It sends zero JavaScript to the client by default and has no build step. Today we are releasing the first stable version of Fresh. 🍋🚀https://t.co/WV2C6gllsL
— Deno (@deno_land) June 28, 2022
ちなみに、8/16現在でバージョンは1.0.2
できたてホヤホヤですな
Freshの特徴としては Islands Architecture を採用しており極力SSRで処理を行う形でクライアント側でのJavaScript配信を行わないような思想のようです
Islands Architecture
https://www.patterns.dev/posts/islands-architecture/
環境構築とチュートリアル
せっかくなので環境はDockerを使ってやろうと。
このあたりは、あちこち参考にさせていただきながらやっているのでツッコミどころは満載かも知れないが、誰かの役に立てればと思いDockerFileを公開する
FROM debian:stable-slim
WORKDIR /var/www/html
RUN apt-get -qq update \
&& apt-get -qq -y install curl zip unzip \
&& curl -fsSL https://deno.land/x/install/install.sh | sh \
&& apt-get -qq remove curl zip unzip \
&& apt-get -qq remove --purge -y curl zip unzip \
&& apt-get -qq -y autoremove \
&& apt-get -qq clean \
&& echo 'export DENO_INSTALL="/root/.deno"' >> ~/.bash_profile \
&& echo 'export PATH="$DENO_INSTALL/bin:$PATH"' >> ~/.bash_profile
CMD ["/bin/bash", "-c", "source ~/.bash_profile && bash"]チュートリアルに関しては公式を参照
Getting Started
https://fresh.deno.dev/docs/getting-started
Denoでは、Deploy先としてDeno Deployというエッジ環境を提供してくれているので、Githubと連携させたりしてPush＝Deployの環境の構築も簡単にできた。
チュートリアルがうまくいかない？
Deno の Web フレームワーク Fresh チュートリアル
https://zenn.dev/azukiazusa/articles/fresh-tutorial
チュートリアルを用意してくれている人もいたので、こちらもやってみた。
ただ、スタイルの適用が何故かうまく行ってくれずに困っている
https://krote–ample-resh.deno.dev/blog
このあたり、フロントエンド開発はからっきしなので、ちょっと詰まってしまったなぁ。
開発者ツールで見る限りでは、想定した通りのclassが割り当てられているようにみえるんだけど。。。
まだまだですねぇ
教えて、偉い人。