💘
つぶらな瞳をした謎の肉まんを持ってピンクの妖精さん♪に会いに行く
Bun
インストール
ターミナルを再起動後、
bun --version
1.1.20
bun --revision
1.1.20+ae1948925
Bun に移行する
既存のプロジェクトを切り替えるため、node_modulesとpackage-lock.jsonを削除する。
（bun pm migrateとすることでpackage-lock.jsonをbun.lockbに置き換えてくれるらしいが気づいたのが後だった。）
rm -rf node_modules
rm -rf package-lock.json
bun install
// 省略
1203 packages installed [60.55s]
Blocked 2 postinstalls. Run `bun pm untrusted` for details.
なにやら実行しろと言われているのでやってみる。
bun pm untrusted
./node_modules/@vercel/speed-insights @1.0.12
» [postinstall]: node scripts/postinstall.mjs
./node_modules/core-js-pure @3.37.1
» [postinstall]: node -e \"try{require('./postinstall')}catch(e){}\"
These dependencies had their lifecycle scripts blocked during install.
If you trust them and wish to run their scripts, use `bun pm trust`.
ググると公式のブログが見つかった。（bun pm migrateコマンドに気づいたのはこのとき）
どうやら信頼されていないパッケージのライフサイクルスクリプトは実行しないから、実行したかったら信頼できるパッケージとして登録してくれやということらしい。
実行すると、package.jsonに新しい項目が追加されていた。
bun pm trust @vercel/speed-insights core-js-pure
package.json
"trustedDependencies": [
"@vercel/speed-insights",
"core-js-pure"
]
bun.lockb の差分を見られるようにする
こちらの記事を参考
公式ドキュメント
.gitattributes
*.lockb binary diff=lockb
git config diff.lockb.textconv bun
git config diff.lockb.binary true
古の楽園にエントリーする
インストール
既存のNext.jsプロジェクトに入れる。
bun add elysia
bun add @elysiajs/eden
DBにあるユーザー情報を取得して表示してみる
Next.jsでの使い方
./app/api/user/[[...slugs]]/route.ts
import { Elysia, t } from 'elysia';
import { getUser } from 'api/user/handlers';
const user = new Elysia({ prefix: '/api/user' })
.get('/:id', ({ params: { id } }) => getUser(id), {
params: t.Object({
id: t.Numeric(),
}),
});
export type User = typeof user;
export const GET = user.handle;
export const POST = user.handle;
./app/api/user/handlers.ts
import { prisma } from '@/lib/prisma'; // new PrismaClient() してるだけのファイル
export const getUser = async (id: number) => {
return await prisma.user.findUnique({
where: {
id: id,
},
select: {
name: true,
email: true,
},
});
};
./app/user/page.tsx
import { treaty } from '@elysiajs/eden';
import type { User } from 'api/user/[[...slugs]]/route';
const client = treaty<User>('localhost:3000');
export default async function User() {
const { data, error } = await client.api.user({ id: 1 }).get();
return (
<div>
<h2>name: {data.name}</h2>
<h2>email: {data.email}</h2>
</div>
);
}
さわってみた感想
某𝕏で見かけた開拓者のコスプレして発表してる画像で知って、いつか使ってみたいな〜と思ってたんだけど、慣れれば普通に今後も使っていけそう。
あとドキュメントがしっかり書かれてるのがすごい。
使ってみたかったBunをさわるきっかけにもなったし、個人開発のモチベも上がってとてもよかった。
とりあえずみんなも崩壊3rdをやってトップページの「for Humans」の文字を見るだけで泣けるようになろう！
Discussion