Zenn
🦄

Elysia.jsを始める【Path】

2024/08/27に公開
JavaScript
ElysiaJS
tech

※ 前回：Elysia.jsを始める【Route】

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

Elysiaでのパスの構造

Elysia.jsのパスに関しては、一般的なURLの構造と同じである。


参照ページへのリンク

ローカル環境で、http://localhost:3000/oozorasubaru/ajimaru?p1=v1#hash というURLがあったとする。

構造 構造名
http://localhost:3000 origin
/oozorasubaru/ajimaru pathname
?p1=v1 search（query parameter）
#hash hash

といった感じで構成されているとElysia.jsでは認識される。

また、http://localhost:3000 のようにパス指定がない場合、パスは/がデフォルトとして扱う。

静的パス

import { Elysia } from 'elysia'

new Elysia()
    .get('/subatomo/ajimaru', () => 'Ajimaru! Ajimaru!')
    .listen(3000)

任意のパスをハードコードすれば静的パスになる。

動的パス

import { Elysia } from 'elysia'

new Elysia()
    .get('/subatomo/:id', ({ params: { id } }) => id)
    .listen(3000)

上記の場合:idに当たる部分が動的パスの対象になる。

以下は上記ルーティングの場合、ブラウザにどう返却されるかの例

Path Response
/subatomo/1 1
/subatomo/1234 1234
/subatomo/ajillo ajillo
/subatomo NOT_FOUND
/subatomo/1/syuba NOT_FOUND

Elysia.jsでのパスパラメータの扱い

例を題材とするならば、/subatomo/:idの:idの部分がパスパラメータ扱いとなる。
Elysiaでは、:idであれば:をプレフィックス、idの部分がパスパラメーター名となる。

/subatomo/1であれば、1がparamsオブジェクトにid=1ということで引き渡される。

.get('/subatomo/:id', ({ params: { id } }) => id) // id=1

複数のパスパラメータ時も同様

import { Elysia } from 'elysia'

new Elysia()
    .get('/subatomo/:id/:aji', ({ params: { id, aji } }) => `Subatomo ID: ${id} is ${aji})
    .listen(3000)

/subatomo/1/ajimaruというパスであれば、paramsオブジェクトのidに1、ajiにajimaruが引き渡される。
ブラウザ出力は、「Subatomo ID: 1 is ajimaru」になる。

オプショナルなパスパラメータ

以下の:id?ように?をパスパラメータ部分に付与すると、オプショナルにすることができる。

import { Elysia } from 'elysia'

const app = new Elysia()
    .get('/subatomo/:id?', ({ params: { id } }) => `Subatomo ID: ${id}`)
    .listen(3000)

ただし、複数のパスパラメータがある場合、全てのパスパラメータに?をつけないと、オプショナルにすることができない。

import { Elysia } from 'elysia'

new Elysia()
    .get('/subatomo/:id/:aji?', ({ params: { id, aji } }) => `Subatomo ID: ${id} is ${aji}`)
    .listen(3000)

上記だと、

Path Response
/subatomo/1/ajimaru Subatomo ID: 1 is ajimaru
/subatomo/1 NOT_FOUND

となり、:aji?の部分はオプショナルにはならない。

import { Elysia } from 'elysia'

new Elysia()
    .get('/subatomo/:id?/:aji?', ({ params: { id, aji } }) => `Subatomo ID: ${id} is ${aji}`)
    .listen(3000)

とすると(:idを:id?にした)、

Path Response
/subatomo/1/ajimaru Subatomo ID: 1 is ajimaru
/subatomo/1 Subatomo ID: 1 is undefined

となる。

ワイルドカードによるパス指定

import { Elysia } from 'elysia'

new Elysia()
    .get('/subatomo/*', ({ params }) => params['*'])
    .listen(3000)

*を使用して、量（数）に関係なくセグメント以降の値をキャプチャすることができる。

上記の場合だと、

Path Response
/subatomo/syuba syuba
/subatomo/syuba/syuba syuba/syuba
/subatomo/syuba/syuba/syuba syuba/syuba/syuba

といった感じになる。

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

参考: https://elysiajs.com/

Discussion