🦕

Deno入門 ~インストールからデプロイまで~

2023/02/18に公開

JavaScript

TypeScript

Deno

tech

What is Deno?

Deno は、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境

Node.jsの作者によって作られているとのこと。
Node.jsの反省点を活かして改善を入れているらしいです。

また、単一実行ファイルとしてビルドできるため、Denoの環境が無くても実行ができるのが特徴。

個人的には最初からTypeScriptをサポートしている点がNode.jsより強いと思いました。

Installation

macOS/Linuxを基準として記載します。

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

# 以下を自身のシェルの設定に入れる ex.) .zshrc or .bashrc
export DENO_INSTALL="$HOME/.deno"
export PATH="$DENO_INSTALL/bin:$PATH"

# check install version
deno --version

Tips: Deno自体のバージョンアップはこれだけで良いらしい。

deno upgrade

Getting Started

お好きなエディタで以下のコードを作成

index.ts

console.log("Hello, Deno!!!");

以下のコマンドで実行

deno run index.ts
Hello, Deno!!!

たったこれだけで環境構築からTypeScriptのコード実行までできてしまいました！

APIの作成

公式サンプル通りに実行すれば動かせますが、それではつまらないので Poké APIを動かしてみます。

Poké APIは皆さんご存知ポケモンのAPIです。
https://pokeapi.co/

今回はこちらのエンドポイントを使います。
/api/v2/pokemon

index.ts を以下のコードで上書きします。

index.ts

import { serve } from "https://deno.land/std@0.157.0/http/server.ts";

const handler = async (request: Request): Promise<Response> => {
  const url = "https://pokeapi.co/api/v2/pokemon/pikachu/";
  const resp = await fetch(url, {
    headers: {
      accept: "application/json",
    },
  });

  return new Response(resp.body, {
    status: resp.status,
    headers: {
      "content-type": "application/json",
    },
  });
};

serve(handler);

サンプルコードのURL変更しただけですが、これでPoké APIから例の電気ネズミのデータが返却されます。

実行コマンド

# ネットワークアクセス許可が必要
deno --allow-net index.ts

ブラウザで localhost:8000 にアクセスまたは以下のコマンドを実行

curl localhost:8000

レスポンス抜粋

カスタマイズしてリクエストパラメータを受け取る

以下のようにコードを変更するとリクエストパラメータを受け取れるようになります。
※今回はバリデーションは考えないこととします。

Tips: コーディング中にコード修正→deno再実行を繰り返すのが面倒なので便利な --watch オプションを使ってみます

deno run --allow-net --watch index.ts

これでコードを修正すると自動で反映されるようになります。

index.ts

import { serve } from "https://deno.land/std@0.157.0/http/server.ts";

const handler = async (request: Request): Promise<Response> => {
  # ここを追加
  const requestUrl = new URL(request.url);
  const pokemonNumber = requestUrl.searchParams.get("number");

  # ここで受け取ったパラメータを使うように変更
  const url = `https://pokeapi.co/api/v2/pokemon/${pokemonNumber}/`;
  const resp = await fetch(url, {
    headers: {
      accept: "application/json",
    },
  });

  return new Response(resp.body, {
    status: resp.status,
    headers: {
      "content-type": "application/json",
    },
  });
};

serve(handler);

パラメータを追加してアクセス

curl localhost:8000?number=1

これでポケモン図鑑No.1のポケモンが返却されます。
(何かは調べてみてください)

HTMLを生成してちょっとした画面を作ってみよう

先ほどのAPIを改造してHTMLを返却するようにしてみました！

index.ts

import { serve } from "https://deno.land/std@0.157.0/http/server.ts";

const handler = async (request: Request): Promise<Response> => {
  const requestUrl = new URL(request.url);
  const pokemonNumber = requestUrl.searchParams.get("number");

  const url = `https://pokeapi.co/api/v2/pokemon/${pokemonNumber}/`;
  const resp = await fetch(url, {
    headers: {
      accept: "application/json",
    },
  });

  let body = `<p>Not Found. number: ${pokemonNumber}`;
  if (resp.status === 200) {
    const json = await resp.json();
    body = `
      <p>Id: ${json["id"]}</p>
      <p>Name: ${json["name"]}</p>
      <img src="${json["sprites"]["front_default"]}" alt="${json["name"]}">
    `;
  }

  return new Response(body, {
    status: resp.status,
    headers: {
      "content-type": "text/html",
    },
  });
};

serve(handler);