More than 3 years have passed since last update.

deno deployで簡単なWeb APIを作る

Last updated at 2021-08-15Posted at 2021-08-15

deno deployを利用して簡単なWeb APIを作ってみようと思います。

どんなAPIがいいか迷ったのですが、文章を単語に分割してくれるIntl.Segmenterという関数を発見。

今回はこのIntl.Segmenterを使って、クエリパラメータで渡した文章を単語に分割し、JSONで返すAPIを作っていきましょう。

Web APIのひな型

公式ドキュメントを参考に、クエリパラメータに応じてJSONを返却するコードを書くと、このようになります。

addEventListener("fetch", (event) => {
  // リクエストされたURLから結果データを作成
  const url = new URL(event.request.url)
  const result = /*urlを元に結果データを作成するコードをここに書く*/

  // 結果データをJSON化し、クライアントに返却
  event.respondWith(
    new Response(JSON.stringify(result), {
      status: 200,
      headers: {
        "content-type": "application/json",
      },
    }),
  );
});

後は4行目を穴埋めするだけです。

結果データを作成する処理を書く

まずURLからクエリパラメータを取り出します。url.searchParams.get('パラメータ名')でOKです。

/*
https://word-seg.deno.dev/?text=国境の長いトンネルを抜けると、そこは錦糸町だった。&lang=ja
-> targetText: "国境の長いトンネルを抜けると、そこは錦糸町だった。"
-> targetLang: "ja"
*/
const url = new URL(event.request.url)
const targetText = url.searchParams.get('text') ?? `吾輩は猫である。名前は${crypto.randomUUID()}`
const targetLang = url.searchParams.get('lang') ?? 'ja'

ついでにクエリパラメータが与えられなかった時の処理も書いておきましょう。ここでは、適当なデフォルト値にフォールバックさせることにしました。猫の名前はcrypto.randomUUID()に決めてもらいます。

次に、取り出したクエリパラメータから結果データを作成する処理を書きます。

/*
吾輩は猫である。名前はたぬき。
-> result: ["吾輩", "は", "猫", "で", "ある", "。", "名前", "は", "たぬき", "。"]
*/
const segments = new Intl.Segmenter(targetLang, {granularity: "word"}).segment(targetText);
const result = [...segments].map(seg=>seg.segment)

以上で必要な処理は全て書き終わりました！続いて、deno deployからデプロイしていきましょう。

deployする

1. githubへソースコードをpush

先ほど作成したソースコードを、githubへアップロードします。（詳しい手順は割愛）

addEventListener("fetch", (event) => {
  // リクエストされたURLから結果データを作成
  const url = new URL(event.request.url)
  const targetText = url.searchParams.get('text') ?? `吾輩は猫である。名前は${crypto.randomUUID()}`
  const targetLang = url.searchParams.get('lang') ?? 'ja'
  const segments = new Intl.Segmenter(targetLang, {granularity: "word"}).segment(targetText);
  const result = [...segments].map(seg=>seg.segment)

  // 結果データをJSON化し、クライアントに返却
  event.respondWith(
    new Response(JSON.stringify(result), {
      status: 200,
      headers: {
        "content-type": "application/json",
      },
    }),
  );
});