React、Vue、Next...
フロントエンドの技術は進化が早くて、正直追いかけるのがしんどいです。
バックエンド寄りの自分にとっては、これが大きな壁でした。
個人開発ではフロントにもこだわりたいと思っていたけれど、
「どのフレームワークを選ぶべきか」「今から学ぶ価値があるのか」に迷って、なかなか手を出せずにいました。
そんなときに出会ったのが、DenoとそのWebフレームワークのFreshでした。
「これから伸びそう」「学び始めるにはちょうどいい」そんな直感があり、
どのはDenoを勉強することにしました。
なぜDenoとFreshを選んだのか
まず、現在フロントの技術としてはReactやNextといったNode.js系の技術が主流だと思います。
私自身も少し触ってみたことはあるのですが、むずかしかったです。
調べれば調べるほど情報が出てきて、
Next.js 13のApp Router、Preactの導入、TailwindやEmotionなどのCSSライブラリ…
自分はもともとバックエンドエンジニア寄りで、APIやDBのほうが得意です。
そのため、フロントの技術トレンドを毎回キャッチアップするのは、とても大変で、正直面倒だと感じました。
Denoに出会う
そんな中でも、個人開発ではフロントにもこだわりたいという思いがあり、いろいろと調べていました。
そこで出会ったのが、Denoという新しいJavaScriptランタイムです。
DenoはNode.jsの作者が、Node.jsの課題を解決するために新たに開発したランタイムで、以下のような特徴があります。
- 最初からTypeScriptに対応
- 権限ベースの実行でセキュリティが高い
- モジュールがURLで管理される（npm installが不要）
Node.jsの開発者が自ら作り直した、という背景も知り、「先にDenoを勉強しておけば、キャッチアップの手間なくなるじゃん」と思い、勉強を始めました。
また、日本語の情報も少ない分、逆に「一次情報（公式ドキュメントなど）を見ながら学ぶ力を鍛えられる」とも思い勉強を始めました。
Freshというフレームワーク
そんなDenoには、FreshというWebフレームワークが存在します。
Freshの主な特徴は
- islandアーキテクチャの採用
- JSX + Preactで書ける
- バンドル不要で超高速なSSRが可能
など…
です。
「Deno版Next.js」とも言われている記事も見て、今後の主流これになるじゃん！と思い、Freshの学習も始めました。
使ってみて
Nextをちょっと勉強したときにReactにも触れたので、すぐFreshの環境に慣れて自分にとってはとても使いやすくて好感触でした。
Freshにはroutes/api/**.tsのようにAPIルートを作れる仕組みがあるので、
ちょっとしたバックエンド処理もフロントと同じ構成内で書けるのが便利です。
デプロイが簡単
Deno公式の「Deno Deploy」は、GitHubと連携すればほぼ設定なしでデプロイが完了します。
個人開発ならこれで十分すぎるレベルです。
簡易DBとして使える「Deno KV」
Deno KVというKey-Valueストレージもあり、ちょっとしたデータの永続化ならこれだけで済みます。
SupabaseなどDBを使うほどでもない場合にぴったりで、試作アプリにはとても向いています。
おわりに
結論としては、「今後も何か個人開発をするときは、まずFresh + Denoで始めてみる」というのが自分のスタイルになりそうです。
セットアップもシンプルで、DB,API,フロントも1つの構成で完結でき、デプロイまで簡単。
「とりあえず試してみたい」というときにこそ、Fresh + Denoは最高の環境だと思います。