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

生徒

「先生、Reactでサーバーからデータを取ってくるとき、Axiosってよく聞きますが、どうやって使うんですか？」

先生

「AxiosはReactでAPI通信をするときにとても便利なライブラリです。インストールも簡単ですよ。」

生徒

「初心者でもできるように、インストールのやり方から教えてください！」

先生

「もちろんです。ではAxiosの導入方法と、基本的な使い方を順番に見ていきましょう。」

1. ReactでAPI通信するには？

Reactで天気予報やユーザー情報など、外部のデータを取得したいときには「API通信」を行います。

APIとは、別のコンピュータと会話をするためのルールです。たとえば、「このURLにアクセスしたら、ユーザー一覧がもらえますよ」といった具合です。

このAPIと通信するためのツールのひとつが「Axios（アクシオス）」です。

2. Axiosのインストール方法

AxiosはReactに最初から入っていないため、まずは自分でインストールする必要があります。

ターミナルやコマンドプロンプトを開いて、次のコマンドを入力します。


npm install axios

npmは「Node Package Manager（ノード・パッケージ・マネージャー）」の略で、プログラムの部品を追加するためのコマンドです。

3. Axiosでデータを取得する基本の使い方

インストールが終わったら、ReactのコンポーネントでAxiosを使ってAPI通信をしてみましょう。

例として「ユーザー一覧」を取得して表示するコードです。


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

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        setUsers(res.data);
      })
      .catch((err) => {
        console.error("エラー:", err);
      });
  }, []);

  return (
    <div>
      <h2>ユーザー一覧</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面にユーザー名の一覧が表示されます。通信が失敗したときは、コンソールにエラーが表示されます）

4. Axiosを使うと何が便利なの？

Axiosを使うと、ReactでAPI通信がとても簡単になります。初心者にとっても分かりやすく、エラー処理もスマートです。

JSON変換が不要：Fetch APIではres.json()が必要ですが、Axiosは自動でしてくれます。
エラー検出が楽：ステータスコードに応じて自動でエラーを返してくれます。
コードが短くシンプル：初心者にも見やすい記述になります。

5. AxiosでPOSTリクエストを送る方法

API通信では、データを取得するだけでなく、サーバーにデータを送信する「POSTリクエスト」もよく使います。

Axiosでは、POSTもとても簡単に書けます。


axios.post("https://example.com/api", {
  name: "田中太郎",
  email: "taro@example.com"
})
.then((res) => {
  console.log("送信成功:", res.data);
})
.catch((err) => {
  console.error("送信エラー:", err);
});

オブジェクト形式で名前やメールアドレスなどのデータをサーバーに送信できます。

6. よくある質問Q＆A

Q. AxiosはReact専用ですか？

A. いいえ、AxiosはJavaScript全般で使えるライブラリですが、Reactでも特によく使われています。

Q. npm installって何をしているの？

A. npm installは、インターネットから必要なライブラリをダウンロードして、自分のプロジェクトに追加する作業です。

Q. axios.get()とaxios.post()の違いは？

A. get()は「データを取得」、post()は「データを送信」するための関数です。

Q. 初心者でもAxiosを使った方がいい？

A. はい、Axiosは記述がわかりやすく、エラー処理も簡単なため、初心者にもとてもおすすめです。

まとめ

ReactとAxiosを使ったAPI通信の基本を振り返る

この記事では、ReactでAxiosを使ってAPI通信を行うための基本的な考え方から、インストール方法、実際のデータ取得や送信の流れまでを順番に学んできました。 Reactは画面を作るためのライブラリですが、実際のWebアプリケーションでは、サーバーと通信してデータを取得したり送信したりする処理が欠かせません。その中でAxiosは、初心者でも扱いやすく、多くの現場で利用されている定番のライブラリです。

まず、API通信とは何かという基本的な部分を理解することが重要でした。 APIはサーバーとデータをやり取りするための窓口のような存在で、 ReactからURLを指定してアクセスすることで、JSON形式のデータを受け取ることができます。 Axiosを使うことで、この通信処理をシンプルなコードで書けるようになり、 React初心者でも「何をしているのか」が分かりやすくなります。

Axiosのインストールでは、npm installというコマンドを使いました。これはReact開発に限らず、JavaScript開発全体でよく使われる基本操作です。必要なライブラリを自分のプロジェクトに追加することで、便利な機能をすぐに利用できるようになります。この流れを理解しておくと、今後ほかのライブラリを導入するときにも役立ちます。

データ取得の例では、useEffectとuseStateを組み合わせて、画面が表示されたタイミングでAPI通信を行う方法を確認しました。 useEffectの中でaxios.getを呼び出し、取得したデータをstateに保存することで、 Reactの再レンダリングによって画面に一覧が表示されます。この一連の流れは、ReactでAPI通信を行う際の基本パターンといえるでしょう。

また、Axiosが便利な理由として、JSON変換を自動で行ってくれる点や、エラー処理が分かりやすい点も紹介しました。 Fetch APIと比べてコードが短くなり、読みやすくなるため、初心者が最初にAPI通信を学ぶ際には特に相性が良いといえます。エラー時にcatchでまとめて処理できる点も、実務を意識すると大きなメリットです。

POSTリクエストの例では、サーバーにデータを送信する方法を学びました。フォーム入力内容をオブジェクトとしてまとめ、 axios.postで送信することで、ユーザー登録や問い合わせ送信などの処理を実装できます。取得だけでなく送信までできるようになると、 Reactアプリケーションの表現の幅が一気に広がります。

まとめとしてのサンプルプログラム

最後に、Axiosを使った基本的なデータ取得の形を、あらためてシンプルなサンプルで確認します。 ReactとAxiosを組み合わせたAPI通信の基礎として、何度も見返しておきたい構成です。


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

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    axios.get("https://example.com/api/message")
      .then((res) => {
        setMessage(res.data.message);
      })
      .catch((err) => {
        console.error("通信エラー", err);
      });
  }, []);

  return (
    <div>
      <h2>サーバーからのメッセージ</h2>
      <p>{message}</p>
    </div>
  );
}

export default App;

このように、Axiosを使えばReactでのAPI通信は非常に直感的に書くことができます。まずは基本の使い方をしっかり身につけ、少しずつ複雑な処理や実践的な機能に挑戦していくことが大切です。

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

生徒

「ReactでAPI通信って難しそうだと思っていましたが、 Axiosを使うと流れがとても分かりやすく感じました。」

先生

「そうですね。Axiosはコードがシンプルなので、初心者がAPI通信の仕組みを理解するのに向いています。」

生徒

「useEffectと一緒に使う理由も、画面表示のタイミングだと分かりました。」

先生

「その理解はとても大切です。 Reactでは『いつ処理が動くのか』を意識することがポイントになります。」

生徒

「GETだけでなくPOSTもできるようになって、アプリっぽくなってきた気がします。」