Zenn
🦄

Elysia.jsを始める【Route】

2024/08/26に公開
JavaScript
elysia
tech

※ 前回：Elysia.jsを始める【概要・Getting Start】

※ 主に https://elysiajs.com/essential/route.html の日本語訳をしているものになっているので、詳細は公式ページを参照のこと

ElysiaでのRoute（ルーティング）

https://elysiajs.com/essential/route.html に書いてある通りではあるが、

import { Elysia } from 'elysia'

const app = new Elysia()
    .get('/hoshimachi', () => 'suisei')
    .get('/sakura', () => 'miko')
    .get('/oozora', () => 'subaru')
    .listen(3000)

ルート定義は、HTTPメソッドに対応するメソッド（上記であれば、.get()）に、パスとリクエストされた時に実行したいメソッド（関数）を引数として渡すことによって定義することができる。

ElysiaでのHTTPメソッド

CRUD操作の基本となるGET、POST、PUT、DELETEはもちろんのこと、
HTTP request methodsで定義されているメソッドも備えている様子。

（Elysia.jsのHTTP Verbでは、GET、POST、PUT、DELETEが明示されていたが、当方ではPATCH、HEAD、OPTIONSは内蔵されていることが確認できた）

GET、POST、PUT、DELETE
import { Elysia } from "elysia"

const app = new Elysia()
  .get('/hello', () => 'Elysia !')
  .post('/user', ({ body }) => {
    return {
      message: 'User createted',
      user: body
    }
  })
  .put('/user/:id', ({ params, body }) => {
    return {
      message: `User ${params.id} updated`,
      user: body
    }
  })
  .delete('/user/:id', ({ params }) => {
    return {
      message: `User ${params.id} deleted`
    }
  })
  .listen(3000)

メソッドチェーンで繋げる

Elysia.jsでは、ルーティングにおいてメソッドチェーンで繋げていくことを基本としている。
これは、型安全性を維持するためであるとしている。
各メソッド呼び出しが新しい型情報をインスタンスに追加し、次のメソッド呼び出しにその型情報が引き継がれる仕組みになっているので、メソッドチェーンで繋げないと逆に型安全性が担保されない。

import { Elysia } from "elysia"

// OK
const app = new Elysia()
  .get('/hello', () => 'Elysia !')
  .post('/user', ({ body }) => {
    return {
      message: 'User createted',
      user: body
    }
  })

// NG
const app = new Elysia()

app.get('/hello', () => 'Elysia !')

app.post('/user', ({ body }) => {
    return {
      message: 'User createted',
      user: body
    }
  })

Elysia.handle

PostmanのようなAPI開発クライアントを使わなくても、Elysia.jsに内蔵されているhandleメソッドでAPIのデバッグができる。

GETのケース

GETのケース
import { Elysia } from "elysia";

const app = new Elysia()
  .get('/hello', () => 'Elysia !')
  .listen(3000)

app.handle(new Request('http://localhost:3000/hello'))
  .then(console.log)
GETのケースの出力
Response (8 bytes) {
  ok: true,
  url: "",
  status: 200,
  statusText: "",
  headers: Headers {},
  redirected: false,
  bodyUsed: false,
  Blob (8 bytes)
}

POSTのケース

POSTのケース
import { Elysia } from "elysia";

const app = new Elysia()
  .post('/talents', ({ body }) => {
    return {
      message: 'User createted',
      user: body
    }
})
.listen(3000)

const request = new Request('localhost:3000/talents', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Oozora Subaru',
    height: 154,
    gen: '2'
  })
})

app.handle(new Request('http://localhost:3000/talents'))
  .then(console.log)
POSTのケースの出力
Response (81 bytes) {
  ok: true,
  url: "",
  status: 200,
  statusText: "",
  headers: Headers {
    "content-type": "application/json;charset=utf-8",
  },
  redirected: false,
  bodyUsed: false,
  Blob (81 bytes)
}

カスタムメソッドの定義・拡張

Elysia.routeを使うことによって、HTTPメソッドにカスタムメソッドを定義、拡張することができる。

import { Elysia } from "elysia";

const app = new Elysia()
  .route('LINK', '/link', () => 'link')
  .route('M-SEARCH', '/m-search', () => 'connect') 
  .listen(3000)

ワイルドカード的なElysia.all

Elysia.allは、指定されたパスに対してすべてのHTTPメソッドを処理するためのメソッドになる。

import { Elysia } from "elysia";

const app = new Elysia()
  .all('/universal', () => 'universal method')
  .listen(3000)

これで、1つのパスに対して複数のHTTPメソッド（GET、POST、PUT、DELETEなど）を統一的に処理することができるようになる（当方では、LINKなどのメソッドも処理できたことは確認できた）。

import { Elysia } from "elysia";

const app = new Elysia()
  .all('/universal', () => 'universal method')
  .listen(3000)

const request = new Request('http://localhost:3000/universal', {
  method: 'GET', // ここを色々変更してデバッグしてみると、どうすることが確認できる
  headers: {
    'Content-Type': 'application/json'
  }
})
app.handle(request).then(console.log)

定義されたルーティングがない場合のカスタム404エラー

onError()を使うことによってElysiaがNOT_FOUNDのメッセージを返す前にカスタム404エラーを返すことができる。

import { Elysia } from "elysia";

const app = new Elysia()
    .get('/syuba', () => 'Ajimaru Ajimaru !')
    .onError(({ code }) => {
        if (code === 'NOT_FOUND')
            return 'Ajimaranai :('
    })
    .listen(3000)

Elysia.jsを始める【Path】 に続きます。

参考： https://elysiajs.com/

Discussion