🔖

React Nativeでの fetch / axios の使い分けと基本の書き方

に公開
React Native
fetch
初心者向け
axios
備忘録
tech

はじめに

React NativeでAPI通信を行う際、fetch と axios のどちらを使うべきか迷ったことはないでしょうか？

私自身、初めてReact Nativeでアプリを作り始めた頃は「どちらも同じように使える」という認識で、深く考えずに使っていました。

しかし、使い分けを理解しておくと、
エラーハンドリングや構文のシンプルさ、メンテナンス性に差が出てくることに気づきました。

本記事では、React Native視点での fetch / axios の基本的な書き方と、
その違いや使い分けのポイントについて、async/await を含めて整理してみたいと思います。

1. fetch の基本の書き方

fetch はJavaScriptに標準で備わっている関数で、追加のライブラリを使わずにAPI通信を行うことができます。

GETリクエスト（.then()）

fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("エラー:", error);
  });

GETリクエスト（async/await）

const fetchData = async () => {
  try {
    const response = await fetch("https://example.com/api/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラー:", error);
  }
};

POSTリクエスト（.then()）

fetch("https://example.com/api/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "John", age: 30 })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("エラー:", error);
  });

POSTリクエスト（async/await）

const postData = async () => {
  try {
    const response = await fetch("https://example.com/api/data", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ name: "John", age: 30 })
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラー:", error);
  }
};

2. axios の基本の書き方

axios は外部ライブラリで、非同期通信をより簡潔に、柔軟に記述できるため多くのプロジェクトで採用されています。

インストール方法

npm install axios

または

yarn add axios

GETリクエスト（.then()）

import axios from "axios";

axios.get("https://example.com/api/data")
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("エラー:", error);
  });

GETリクエスト（async/await）

const fetchData = async () => {
  try {
    const response = await axios.get("https://example.com/api/data");
    console.log(response.data);
  } catch (error) {
    console.error("エラー:", error);
  }
};

POSTリクエスト（.then()）

axios.post("https://example.com/api/data", {
  name: "John",
  age: 30
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("エラー:", error);
  });

POSTリクエスト（async/await）

const postData = async () => {
  try {
    const response = await axios.post("https://example.com/api/data", {
      name: "John",
      age: 30
    });
    console.log(response.data);
  } catch (error) {
    console.error("エラー:", error);
  }
};

3. async/await とは

async/await は、JavaScriptにおける非同期処理を「同期処理のように」書ける構文です。

従来の .then() チェーンよりもコードがフラットになり、
try/catch と組み合わせることでエラー処理を一箇所にまとめることができます。

特にReact Nativeなどのフロントエンド開発では、async/await によって読みやすく整ったコードを書くことができるため、実務でもよく使われています。

4. fetch と axios の違いと使い分けポイント

観点 fetch axios
標準サポート ○（標準API） ✕（別途インストールが必要）
JSON自動変換 ✕（.json() が必要） ○（自動で response.data に入る）
タイムアウト設定 ✕（自力で実装が必要） ○（オプションで簡単に指定可能）
リクエスト/レスポンスのインターセプト ✕ ○
エラー処理の詳細化 やや複雑 わかりやすい
複数環境対応（Node.js等） △ ◎

✅ 初学者におすすめの選択

React Nativeでは axios を採用するプロジェクトも多く、
後々のメンテナンスや共通設定などを考慮すると axios に慣れておくと安心です。

  • とにかくシンプルに書きたい → axios
  • 標準機能で十分、軽く済ませたい → fetch

5. React Nativeでの注意点

React NativeでAPI通信を行う際、以下のようなポイントでつまずくことがあります。

  • Androidエミュレータで localhost が使えない
    → PC側で起動しているAPIサーバーにアクセスする場合、localhost の代わりに
    自分のPCのローカルIPアドレス（例：192.168.0.x） を指定する必要があります。

  • React Nativeの fetch は、Webブラウザの fetch と一部挙動が異なる
    → 特に FormData を使ったファイル送信や、response.blob() などのレスポンス処理において、
    ブラウザとは動作や対応状況が異なることがあります。
    初めのうちは、シンプルなJSONデータの送受信から試すのがおすすめです。

  • 通信エラーの原因がアプリ側とは限らない
    → リクエストが失敗する場合、コードのバグだけでなく
    「URLの指定ミス」「APIサーバーが起動していない」「ネットワークが遮断されている」など、
    環境設定の問題であることもよくあります。

おわりに

fetch と axios はどちらもAPI通信を行う上で有効な手段ですが、
それぞれに特徴と向き不向きがあります。

また、async/await の導入により、より見通しのよい非同期コードが書けるようになるため、
実務では今や主流となっています。

本記事が、React NativeにおけるAPI通信の書き方と選び方の理解に役立てば幸いです。

Discussion