React NativeでAPI通信を実装する方法！fetchとAxiosの使い方を解説

React Nativeでアプリを開発する際、APIとの通信は必須です。データを取得・送信することで、動的なコンテンツを扱えるようになります。

本記事では、React NativeでAPI通信を実装する方法を、「fetch」と「Axios」の2つの手法を比較しながら解説します！

1. React NativeでAPI通信をする方法
2. fetchを使ったAPI通信（基本編）
1. 📌 GETリクエスト（データ取得）
2. 📌 POSTリクエスト（データ送信）
3. Axiosを使ったAPI通信（簡単＆便利！）
4. fetchとAxiosの比較（どっちを使うべき？）
5. まとめ：React NativeのAPI通信をマスターしよう！

1. React NativeでAPI通信をする方法

React Nativeでは、Webと同じようにAPI通信が可能です。
主に使われるのは以下の2つの方法です。

✅ fetch API（ネイティブのAPI）
✅ Axios（外部ライブラリ）

2. fetchを使ったAPI通信（基本編）

fetch() はブラウザ標準の関数で、React Nativeでもそのまま利用できます。

📌 GETリクエスト（データ取得）

まずは、APIからデータを取得する基本の書き方を見てみましょう。

import React, { useEffect, useState } from "react";
import { View, Text, ActivityIndicator, StyleSheet } from "react-native";

export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => console.error(error));
  }, []);

  return (
    <View style={styles.container}>
      {loading ? <ActivityIndicator size="large" /> : <Text>{data?.title}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

✅ ポイント

fetch() を使ってAPIからデータを取得
response.json() でレスポンスをJSONに変換
useEffect を使ってコンポーネントがマウントされたときにリクエストを送る
ActivityIndicator でローディング処理を追加

📌 POSTリクエスト（データ送信）

APIにデータを送信するには、fetch() のオプションに method: "POST" を指定します。

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "React Native API通信",
    body: "fetchを使ったPOSTリクエスト",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error(error));

✅ ポイント

method: "POST" を指定
headers に "Content-Type": "application/json" をセット
body に JSON.stringify() でデータを送信

fetchを使えば、簡単にAPI通信ができる！

3. Axiosを使ったAPI通信（簡単＆便利！）

fetch() でもAPI通信はできますが、Axios を使うとよりシンプルで使いやすくなるのでおすすめです。

📌 Axiosのメリット
✅ fetch() よりシンプルなコードで書ける
✅ エラーハンドリングが簡単
✅ GET や POST だけでなく、PUT や DELETE も直感的

📌 Axiosのインストール

まずは Axios をインストールします。

npm install axios

または

yarn add axios

📌 GETリクエスト（データ取得）

import React, { useEffect, useState } from "react";
import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
import axios from "axios";

export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => console.error(error));
  }, []);

  return (
    <View style={styles.container}>
      {loading ? <ActivityIndicator size="large" /> : <Text>{data?.title}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

✅ fetchと比べて簡潔なコード！

📌 POSTリクエスト（データ送信）

Axiosを使ったPOSTリクエストの書き方は非常にシンプルです。

axios
  .post("https://jsonplaceholder.typicode.com/posts", {
    title: "Axiosで送信",
    body: "Axiosを使ったPOSTリクエスト",
    userId: 1,
  })
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

✅ axios.post(URL, データオブジェクト) だけでOK！

4. fetchとAxiosの比較（どっちを使うべき？）

特徴	fetch	Axios
標準API	✅（組み込み）	❌（外部ライブラリ）
コードの簡潔さ	❌（やや冗長）	✅（シンプル）
エラーハンドリング	❌（手動で書く）	✅（自動で対応）
リクエストの設定	❌（毎回書く）	✅（デフォルト設定可能）