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",
      },
    }),
  );
});

2. プロジェクトの作成

まず、 https://deno.com/deploy にアクセスし、アカウントを登録します。

次に、 https://dash.deno.com/new から新しいプロジェクトを作成します。

ここで設定した名前が公開時にドメイン名の一部に使われます。
例えば myapp という名前を使うと、 myapp.deno.dev というドメイン名になります。（自分で用意したドメインを使うことも可能）

3. コードの登録

次に、作成したコードを登録します。

コードの登録は

github連携からデプロイ
URLからデプロイ

の2種類のやり方があります。

今回はgithub連携を使用します。

「Continue」を選択すると、githubのURLを聞いてくるので、先ほどpushしたリポジトリのURLを入力します。
ちなみに、他人のリポジトリでも大丈夫らしい。

最後に「Link」をクリックするとデプロイ完了です。

簡単に出来ましたね。
作成したAPIはこちら↓で公開中です！

コードを変更したい時はどうするか

普通にcommitしてpushすると更新されます。

プルリクエストを開くと、変更後のコードを利用したプレビュー用のデプロイが公開されます。
緑色のチェックマークをクリック→detailsをクリック　でプレビュー用のページに飛ぶことが出来ます。

まとめ

記事中のコードにCORS対応を入れるの忘れました。