🦖

Denoではじめる楽しいWeb開発

2024/12/04に公開

概要

この記事の対象者:
Denoについて知りたい人。noejsの代わりの新しいフレームワークを探している人。

この記事の内容:
Denoの背景、特徴、インストール方法、およびDeno Deployを使用したウェブアプリケーションのデプロイ方法の解説している。

この記事を読んでわかること:
Denoを用いたディプロイ方法がわかる。

序説

みなさん、web開発生活楽しんでますでしょうか?
ご存知のように、Web開発の世界は常に進化し続けています。
Node.jsの登場以来、JavaScriptバックエンド開発は大きく変わってきましたが、新たな選択肢として「Deno」が注目を集めています。
今回は、Denoを使ってディプロイしてみた話をしたいと思います。

Denoって何?

そもそもDenoとは何なのでしょうか?
やっぱり色々文字で説明するよりみた方が早いですよね
まずこちらのwebサイトをご覧ください
https://fair-wasp-62.deno.dev/

どうですか?おしゃれじゃないでしょうか!!
repositoryはこちらに公開しています
https://github.com/tyukei/Deno_first?tab=readme-ov-file

ちなみにZennで書いた場合は以下のようになります。

zennバージョン

Denoの物語


ある日、Ryan Dahlという名のエンジニアがひとつの「道具」を手にしました。それは、世界中の人々が使うプログラミングのランタイムでした。彼はその道具に名前をつけ、こう呼びました。「Node.js」。

Ryan Dahlという男


サンディエゴの町で生まれた彼は、幼い頃に手にしたApple IIcという機械に心を奪われました。成長した彼は数学を学び、その世界の美しさに魅了されますが、やがて気づきました。「この抽象的な理論では、現実の世界に触れられない」と。

放浪の果てに

数学の世界を離れた彼は、南米へと旅立ち、Rubyという魔法のプログラミング言語に出会いました。そこで、彼はウェブアプリケーションを作り始め、現実の世界と再び繋がる道を見つけたのです。

Node.jsの誕生

2009年、彼は新たな道具を世に送り出しました。それが「Node.js」でした。プログラマーたちは歓喜し、彼の名は世界中に知れ渡りました。けれども、3年が経ったある日、彼はふと考えました。「新しい風を探しに行こう」と。

"3年間Node.jsを育ててきたが、私はもう一つの夢を追いかけることにした。" — Ryan Dahl
Denoという未来
そして2018年、彼は再び動き出し、新たなランタイム「Deno」を発表しました。Denoは、彼がかつてのNode.jsで見つけた欠点を克服し、よりシンプルで安全な未来を提供するものでした。

Denoの特徴

TypeScriptサポート: DenoはTypeScriptをネイティブでサポートし、プログラマーがそのまま書ける環境を提供します。
セキュリティ: Denoは、すべての動きを守る砂の城。アクセス権を明示しなければ、外の世界には触れられません。
モジュール管理: DenoはURLという橋を渡り、シンプルにモジュールを管理します。重たい荷物を持つ必要はありません。
標準ライブラリ: Denoの中には、日常で使える道具が揃っています。ファイル操作、サーバー構築、テスト機能など、あらゆる作業に対応します。

インストール方法

もしあなたがDenoの道を歩みたいのなら、この呪文を唱えてください:

curl -fsSL https://deno.land/install.sh | sh

そうすれば、Denoはあなたのコンピューターに現れます。ただし、シェルを再起動するか、この呪文をもう一度唱えてください:

source ~/.zshrc

最後に、Denoがしっかりと動いているかどうかを確認してください:

deno --version
簡単なサーバーの例
function handler(req: Request): Response {
    return new Response("Hello, Deno World!");
  }
  
  Deno.serve(handler);

Deno Deployの物語

Denoには、多くの仲間たちがいます。彼らはDenoを使って様々な世界を創造しています。例えば:

ミドルウェア
APIサーバー
フルウェブサイト
ミドルウェア
ミドルウェアとは、リクエストが届く前と後に魔法をかけるものです。Denoを使えば、クッキーを設定したり、地理情報によってサイトのバージョンを変えたり、リダイレクトの魔法を使うこともできます。

APIサーバー

Denoは、APIサーバーをエッジで展開するのに最適です。これは、クライアントにより近い場所でデータを提供することで、魔法のように高速かつ効率的に働きます。

フルウェブサイト

未来の世界では、全てのサイトがエッジで展開され、Denoがその世界を支える柱となるでしょう。もういくつかのサイトが、その未来を先取りしているのです。

どうやって作ったのか

まず、denoをインストールします

curl -fsSL https://deno.land/install.sh | sh
deno install -gArf jsr:@deno/deployctl
deno --version

そして、main.tsファイルを作成し、以下のコードを入れます

function handler(_req: Request): Response {
  return new Response("Hello, World!");
}
Deno.serve(handler);

そして、以下のコマンドより実行ができます。

deno run main.ts

ローカルでは動作確認ができたら、次はディプロイを行います。
ディプロイにはdeno deployを用いました。
https://deno.com/deploy

まずdenoのコードをgithubに公開します。
次に以下のリンクを開きます
https://dash.deno.com/account/overview

そして「New Project」をクリックします。

GitHubアカウントを選択します。

先ほどdenoで書いたコードをアップロードしたリポジトリを選択します。

次に、Project NameとEntorypointを設定します。
Project NameはディプロイされるURLになります

https://<Project Name>.deno.dev/

Entorypointはdenoのコードを指定します。
最後に「Deploy Project」をクリックすればディプロイができます!

結言

jsのバックエンド言語として、Denoという選択肢も入れてみてはいかがでしょうか?
セキュリティ、TypeScriptサポート、モダンなモジュール管理など、現代のWeb開発に適した特徴を持っています。
まだエコシステムは発展途上ですが、興味のある方は一度触れてみることをおすすめします。

脱線

Denoの開発者はNodeの開発者と同じという話を聞いて、
Mojoの開発者もSwifitの開発者と同じという話を思い出した。
他にも違う言語だけど同じ開発者だったという人を見つけてみたい。。。

ちゅらデータ株式会社

Discussion