BunでAPI通信する方法｜axiosとfetchでJSONを扱う基本ステップ

Bunを使ってReactアプリやWebツールを作る中で、必ず必要になるのが「API通信」。 この記事では、Bun環境でのAPI通信の基本として、fetchとaxiosを使ったシンプルなサンプルを紹介します。 初心者の方でも実際に手を動かしながら試せるように、できるだけ簡潔にまとめました。

---

1. API通信とは？ざっくりおさらい

API通信とは、アプリやブラウザが外部のサーバーとデータをやり取りする仕組みです。 たとえば：

• 天気情報を取得
• データベースの値を取得
• フォームの送信先など

JavaScriptでは fetch や axios などでAPIを呼び出せます。

---

2. Bunでfetchを使う方法

BunはNode.jsと違い、fetchが最初から使えるのが特長です。

const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await res.json();
console.log(data);

💡 fetchを使うだけなら、追加ライブラリは不要です。

---

3. axiosを使いたい場合

axiosは人気のあるHTTPクライアント。シンプルに書けて、エラーハンドリングもしやすいのが特長です。

axiosのインストール：

bun add axios

使用例：

import axios from 'axios';

const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
console.log(res.data);

---

4. APIのエラー処理の基本

API通信では「失敗」もつきものです。 そのため、try-catchで囲むのが基本です。

try {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  console.log(data);
} catch (error) {
  console.error('通信に失敗しました', error);
}

axiosも同様に try-catch で包めます。

---

5. 実行環境と注意点

• BunではNode.jsと異なり、ESM（ECMAScript Modules）構文が基本です。
• axiosを使う場合は type": "module" を package.json に記載するのが安心。
• async/awaitが使えるように top-level await に対応しています。

---

まとめ

Bunを使ったAPI通信は、思った以上にシンプルです。 fetchだけなら何も追加せずに使えますし、axiosを使えばコードの見通しも良くなります。

まずはJSONPlaceholderなどの無料APIで試してみると、理解が深まります。 次は、取得したデータをReactのコンポーネントで表示する例にも挑戦してみましょう！

---