Elysia.jsでBunのQuickstartをしてみる
あーるElysia.jsについて
Elysia.jsとはBunで実装されているWebフレームワーク。
「Ergonomic Framework for Humans」をコンセプトとしており、すごくユーザーフレンドリーにコーディングできる模様。開発体験の良さを全面的に推している。
Bunが2023年9月にver 1.0.0へ到達したのをきっかけにBun周りのエコシステムにも触れてみようと思う。
あーるプロジェクト作成
事前にBunのランタイムがインストールされていることが前提だが、必要なものはBunのランタイムのみ。シンプル。
$ bun create elysia app
上記のコマンドですぐにElysia.jsのプロジェクトの雛形ができあがる。Bunをベースにしていることもあり、インストールや依存解決は爆速。
さっそく作成されたディレクトリに移動して開発サーバーを立ち上げてみる。
$ cd app
$ bun run src/index.ts
🦊 Elysia is running at localhost:3000
localhost:3000へブラウザでアクセスすると「Hello Elysia」という文字列が返された。これで/へGETアクセスした時に文字列「Hello Elysia」をレスポンスとして返すアプリができあがる。
あーるBunのHTTP Serverサンプルと比較
src/index.tsは以下の数行で構成されている。
import { Elysia } from "elysia";
const app = new Elysia().get("/", () => "Hello Elysia").listen(3000);
console.log(
`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);
Bunがサンプルとして掲載しているBun.serve API で実装した例が以下の通り。
const server = Bun.serve({
port: 3000,
fetch(req) {
return new Response("Hello, Bun!");
},
});
console.log(`Listening on http://localhost:${server.port} ...`);
正確な比較とはならないがElysia.jsのほうが、誰が見ても何をしているかわかりやすいように感じる。
Elysia.jsではExpresのようにルーティングを定義でき直感的でわかりやすい。
Bunに組み込まれているBun.serve APIを内部的に使用しており、パフォーマンスは申し分ない。
あーるBunのQuickStartを再現する
Bunの公式ページにはQuickStartとして簡易的なHTTPサーバーの構築とパッケージを追加して組み合わせる例が紹介されている。
これをElysia.jsで実装しながら理解を進めてみる。
あーるFigletをインストール
bun addを使用してfigletと@types/figletをインストールする。
$ bun add figlet
$ bun add -d @types/figlet
レスポンスを修正
Figletで生成したアスキーアートをレスポンスとして返すようにindex.tsを修正する。
import { Elysia } from "elysia";
+ import figlet from "figlet";
- const app = new Elysia().get("/", () => "Hello Elysia").listen(3000);
+ const app = new Elysia().get("/", () => {
+ const body = figlet.textSync("Hello Elysia");
+ return body;
+ }).listen(3000);
console.log(
`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);
レスポンス確認
bun run devで開発用サーバーを起動し、ブラウザでlocalhost:3000へアクセスして確認する。
ブラウザだときれいに見えないことがあるため、ターミナルからcurlでGETリクエストを送りFigletで生成したアスキーアートが返ってくるか確認する。
# 開発用サーバーが起動している状態でリクエスト
$ curl http://localhost:3000
| | | | ___| | | ___ | ____| |_ _ ___(_) __ _
| |_| |/ _ \ | |/ _ \ | _| | | | | / __| |/ _` |
| _ | __/ | | (_) | | |___| | |_| \__ \ | (_| |
|_| |_|\___|_|_|\___/ |_____|_|\__, |___/_|\__,_|
|___/
ターミナルにアスキーアート化された「Hello Elysia」が出力されたら成功。