先生と生徒の会話形式で理解しよう

生徒

「ReactでAPIにデータを取りにいくとき、URLを毎回書くのが面倒です…」

先生

「それはいい気付きですね。実は、APIのベースURLは一か所で管理するのが基本なんですよ。」

生徒

「ベースURLってなんですか？どこで管理するんですか？」

先生

「それじゃあ、ReactでのFetch APIのベースURLの管理方法と、初心者でもできるベストプラクティスを紹介していきましょう！」

1. APIのベースURLとは？

APIのベースURL（ベースユアールエル）とは、「APIのアクセス先の共通部分」のことです。

たとえば、あるWebサービスのAPIがhttps://api.example.com/postsやhttps://api.example.com/usersのような形式だった場合、このhttps://api.example.comの部分がベースURLです。

このベースURLを毎回書くとミスもしやすく、コードも長くなるため、効率的な管理が重要です。

2. なぜベースURLを一元管理するの？

ReactでFetch APIを使って複数のAPIにアクセスする場合、ベースURLを一か所にまとめておくと、次のようなメリットがあります。

URLの変更に強くなる
開発・本番で環境を切り替えやすい
コードがすっきり読みやすくなる
書き間違いを防止できる

初心者でも、こういった工夫を覚えておくことで、後から困らないReactアプリが作れます。

3. 最も簡単なやり方：定数にまとめる

まずは一番簡単な方法から見てみましょう。ベースURLを定数にしておくやり方です。

たとえばこんな形でまとめることができます。


const BASE_URL = "https://jsonplaceholder.typicode.com";

fetch(`${BASE_URL}/posts`)
  .then((res) => res.json())
  .then((data) => console.log(data));

このように書けば、毎回同じベースURLを打つ必要がなく、後で一括修正も簡単です。

4. 複数ファイルで使いたい場合は？

Reactアプリでは、API通信の処理をコンポーネントとは別ファイルに分けて書くのが一般的です。

その場合、ベースURLだけを定義するファイルを1つ作って、他のファイルから読み込むようにします。

たとえば、apiConfig.js というファイルを作って、以下のように書きます。


// apiConfig.js
export const BASE_URL = "https://jsonplaceholder.typicode.com";


// postService.js
import { BASE_URL } from "./apiConfig";

export function fetchPost(id) {
  return fetch(`${BASE_URL}/posts/${id}`).then((res) => res.json());
}

このように分けておくと、複数のAPIファイルで共通のベースURLを使えて便利です。

5. 環境によってURLを切り替えるには？

開発中は「テスト用のAPI」、本番では「本物のAPI」にアクセスしたい場合があります。

そのときは環境変数（かんきょうへんすう）を使って、ベースURLを切り替える方法が便利です。

.envファイルに下記のように書きます。


REACT_APP_API_BASE_URL=https://jsonplaceholder.typicode.com

そして、Reactの中ではこのように使えます。


const BASE_URL = process.env.REACT_APP_API_BASE_URL;

この仕組みを使えば、開発・本番を切り替えてもコードを変更せずに済みます。

6. 実践：ReactでベースURLを使ってAPIを呼び出す

では、ReactでFetch APIとベースURLを使ったサンプルコードを見てみましょう。


import React, { useEffect, useState } from "react";

const BASE_URL = "https://jsonplaceholder.typicode.com";

function App() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(`${BASE_URL}/posts/1`)
      .then((res) => res.json())
      .then((data) => setPost(data));
  }, []);

  return (
    <div>
      {post ? (
        <div>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ) : (
        <p>読み込み中...</p>
      )}
    </div>
  );
}

export default App;

（最初に「読み込み中...」と表示され、数秒後に取得した記事のタイトルと内容が表示されます）

7. axiosライブラリを使うともっと便利に

もしFetch APIよりも簡単に使えるライブラリを探しているなら、axios（アクシオス）がおすすめです。

axios.create()でベースURLをあらかじめ設定でき、毎回URLを書く必要がなくなります。

ただし今回はFetch APIにフォーカスしているので、axiosの詳しい説明は別の記事に分けるのがよいでしょう。

8. ベースURL管理の注意点

最後に、ベースURLの管理で初心者が気をつけるべきポイントをまとめておきます。

重複を避ける：URLを毎回書かないよう定数化する
ファイルを分ける：設定と処理を別にすることで見やすくなる
環境変数で切り替える：本番と開発で安全に使い分けできる

これらを守れば、ReactのFetch APIでのAPI管理がとてもスムーズになります。

まとめ

ReactでFetch APIを使う際にベースURLをどのように管理するかは、アプリの規模が大きくなるほど重要な課題になります。特に、同じAPIサービスへ複数回アクセスする構成では、ベースURLを毎回書くとミスが起こりやすく、コード全体の見通しも悪くなります。そのため、ベースURLを定数化して一元管理することはReact開発における基本的な設計のひとつと言えます。今回の記事で紹介したように、単純な定数管理から始まり、複数ファイルでの共有、環境変数による切り替え、さらにAPI専用ファイルの分離など、段階的に管理方法を整理することで、より堅牢で扱いやすいアプリケーションを構築できます。また、初心者でも理解しやすい形式でベースURLを扱うことで、API通信の基礎を確実に身につけられます。Reactアプリは複数の画面やコンポーネントに分かれ、API通信もさまざまな場所で発生します。そんな中で、ベースURLを一箇所にまとめておくという小さな工夫が、アプリ全体の保守性や拡張性を大きく左右します。特に、開発環境と本番環境で異なるAPIを使う場合、環境変数を使った管理方法は非常に効果的で、ミスを防ぎながらスムーズに運用できます。さらに、Fetch APIを中心に説明しましたが、axiosなどのライブラリに移行する際にも同じ考え方が活かされます。APIの基盤となる構造を共通化することで、ライブラリに依存しない柔軟な設計が可能となり、後からリファクタリングを行う際にもスムーズに対応できます。Reactの入門段階では見落としがちな部分ですが、ベースURLの正しい管理は長期的な開発で必ず役立つ知識です。ここでは、記事で紹介した内容を踏まえて「ベースURLを使ったAPI呼び出しの整理例」をもう一つ紹介します。

追加サンプル：ベースURLを関数化して柔軟に扱う方法

より柔軟にAPIパスを扱いたい場合、ベースURLとエンドポイントを関数でまとめる方法も便利です。


// apiHelper.js
const BASE_URL = "https://jsonplaceholder.typicode.com";

export function apiUrl(path) {
  return `${BASE_URL}/${path}`;
}

// 使用例
fetch(apiUrl("users/1"))
  .then((res) => res.json())
  .then((data) => console.log(data));

このように関数化しておくと、エンドポイントを文字列で安全に扱えるようになり、メンテナンス性が向上します。さらに、APIグループごとに関数を分けることで、意図しないURLミスの防止にもつながります。

環境変数と組み合わせる応用例


// apiConfig.js
export const BASE_URL = process.env.REACT_APP_API_BASE_URL;

// postService.js
import { BASE_URL } from "./apiConfig";

export async function fetchPosts() {
  const res = await fetch(`${BASE_URL}/posts`);
  return await res.json();
}

このように、環境によってベースURLを切り替えつつ、APIサービスを分けて管理すると、アプリ全体の可読性や保守性がさらに高まります。

先生と生徒の振り返り会話

生徒

「ベースURLってただの文字列だと思っていたけど、管理の仕方ひとつで開発しやすさが全然変わるんですね！」

先生

「その通りです。URLの重複を書かずに一元管理することで、Reactアプリの品質がぐっと上がります。特に環境変数を使った切り替えは、実務でも必ず使いますよ。」

生徒

「関数化してURLを作る方法も便利ですね！APIごとにわかりやすく整理できそうです。」

先生

「その発想はとても大事です。アプリが大きくなったときに、こうした小さな工夫が効いてきますよ。これからも整理しながらReact開発を進めていきましょう。」