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

生徒

「Reactでサーバーにデータを送るとき、ログインしているユーザーだけにしたい場合はどうすればいいんですか？」

先生

「その場合は、Fetch APIを使って、認証トークン（アクセストークン）をHTTPリクエストの中に含める方法がよく使われますよ。」

生徒

「認証トークンって何ですか？どうやって使うんですか？」

先生

「じゃあ今回は、ReactでFetch APIと認証トークンの基本的な使い方を丁寧に見ていきましょう！」

1. 認証トークンとは？

まず、「認証トークン」という言葉に慣れておきましょう。これは、ログインしているユーザーが本当に正しいかどうかをサーバー側に伝えるための「合言葉」のようなものです。多くのWebアプリでは、ログイン後に「アクセストークン」と呼ばれる文字列を発行して、それを次回以降の通信に使います。

このトークンをHTTPヘッダーに含めることで、サーバーは「この人はログイン済みだな」と判断できます。これにより、ログインしていない人には情報を渡さないようにする仕組みが作れるのです。

2. ReactでFetch APIを使うとは？

Fetch APIは、JavaScriptでサーバーとデータのやりとり（通信）を行うための標準的な方法です。たとえば、ログイン済みのユーザーがボタンをクリックしたときに、サーバーから情報を取得したり、逆にデータを送信したりできます。

Reactでは、イベント（ボタンのクリックなど）にあわせて、Fetch APIを使って非同期にデータ通信することが多く、そこに認証トークンを組み合わせることで、セキュリティを保ったままサーバーとやりとりできます。

3. Fetch APIで認証トークンを使う基本の書き方

では実際に、Reactでアクセストークンを使ってAPIにリクエストを送る基本的なコードを見てみましょう。ここでは、トークンは仮に「localStorage」に保存されていると仮定します。


import React, { useState } from "react";

function App() {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const token = localStorage.getItem("access_token");

    const response = await fetch("https://api.example.com/secret", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
      }
    });

    if (response.ok) {
      const result = await response.json();
      setData(result.message);
    } else {
      setData("取得に失敗しました");
    }
  };

  return (
    <div>
      <h1>サーバーからのメッセージ: {data}</h1>
      <button onClick={fetchData}>データを取得する</button>
    </div>
  );
}

export default App;

（画面に「サーバーからのメッセージ: ◯◯」と表示され、ボタンを押すとサーバーから取得した内容が表示されます）

4. Authorizationヘッダーって何？

Fetch APIで認証トークンを送るには、HTTPリクエストの中にある「headers（ヘッダー）」という場所にトークンを入れます。その中でも「Authorization」という名前のヘッダーを使うのが一般的です。

書き方は "Authorization": "Bearer トークン" のようになります。この"Bearer"（ベアラー）は「持っているだけで権限がある」という意味の英単語で、アクセストークンとセットで使うルールになっています。

5. ローカルストレージとは？

Reactやブラウザでトークンを保存する場所として、「localStorage（ローカルストレージ）」がよく使われます。これは、ブラウザの中にちょっとしたデータを保存しておける機能です。

たとえばログインしたときに、以下のように保存します：


localStorage.setItem("access_token", "abc123token");

そして、必要なときに localStorage.getItem("access_token") で読み出します。

6. POSTメソッドでトークン付きデータ送信する方法

GETだけでなく、POST（ポスト）でデータをサーバーに送るときも、Authorizationヘッダーを使う方法は同じです。


const postData = async () => {
  const token = localStorage.getItem("access_token");

  const response = await fetch("https://api.example.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${token}`
    },
    body: JSON.stringify({
      name: "太郎",
      email: "taro@example.com"
    })
  });

  const result = await response.json();
  console.log(result);
};

これで、「ログイン中のユーザーだけがデータを送信できる」ような安全なAPI通信ができます。

7. よくある間違いと注意点

トークンがnullのまま送られてしまう： ログインしていない状態でAPIを呼び出すと、トークンが空のまま送られてしまいます。事前に確認しましょう。
トークンの有効期限切れ： 多くのアクセストークンには期限があります。期限が切れるとエラーになります。
トークンの保存場所： セキュリティ上、localStorageよりもHttpOnlyなCookieが安全と言われることもありますが、初心者向けにはlocalStorageのほうが理解しやすいです。

8. 認証が必要なAPI設計におけるReactの役割

React側では「トークンを取得して、通信時に付け加える」という役割を持ちます。サーバー（バックエンド）は、トークンが正しいかどうかを検証します。

つまりReactは「トークンをつけて通信するメッセンジャー」、サーバーは「それが本物かを確認する門番」のような関係ですね。

まとめ

ReactでFetch APIと認証トークンを組み合わせて扱う流れを振り返ると、まず認証トークンという概念がとても重要であることがわかります。認証トークンは、利用者が正しくログインしているかどうかを示す鍵のような存在であり、サーバーとやり取りする際の安全性を高めてくれます。特に、HTTPヘッダーの中にあるAuthorizationヘッダーと組み合わせることで、ログイン済みの利用者だけが安全にデータへアクセスできるしくみがつくられます。こうしたしくみは現代の多くのWebアプリで使われており、ReactとFetch APIを自然に使いこなすためにも欠かせない考え方です。また、ReactではlocalStorageを使ってアクセストークンを保持し、非同期通信のたびに取り出してヘッダーへ追加する処理が中心となります。この流れが理解できると、GETやPOSTといったHTTPメソッドを使う際の応用も自然と広がり、サーバーとの通信の幅もぐっと広がります。フォーム送信、ユーザー情報の取得、設定データの保存など、多くの操作が安全な通信として実現できるようになり、実際の開発でも役立ちます。さらに、Fetch APIではレスポンスの取得、JSONの変換、エラー処理など、細かい工程も丁寧に扱う必要があります。特に認証トークンは有効期限がある場合が多く、期限切れによるエラーや、トークンが存在しないままリクエストを送ってしまうといった問題も起きがちです。こうした点を意識しておくことで、より堅牢で扱いやすいReactアプリがつくれるようになります。以下に、今回学んだポイントを含めたサンプルコードを振り返りとして再掲します。

サンプルプログラムの振り返り


function SecureFetch() {
  const sendRequest = async () => {
    const token = localStorage.getItem("access_token");

    const response = await fetch("https://api.example.com/secure-data", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
      }
    });

    const result = await response.json();
    console.log(result);
  };

  return (
    <div class="secure-box">
      <button class="btn btn-primary" onClick={sendRequest}>
        安全なデータ取得
      </button>
    </div>
  );
}

このようにReactでは、イベントと通信処理が結びつき、認証情報を適切に扱うことで安全なWebアプリケーション構築へつながります。今回の内容を押さえることで、認証が必要なAPIとの連携も格段に理解しやすくなり、実践的な開発スキルとして必ず役立つ知識になります。Fetch APIと認証トークンを組み合わせる仕組みは、初心者がつまずきやすい部分でもあるため、丁寧に流れを追うことで確実に理解を深めていくことができます。

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

生徒

「きょうの学習で、Fetch APIと認証トークンをどう使うかがよくわかりました。Authorizationヘッダーの仕組みも理解できました！」

先生

「うん、とても大事なポイントをしっかり押さえられたね。Reactでの通信はトークン管理が基本になるから、今回の理解が今後きっと役立つよ。」

生徒

「localStorageに保存して、必要なときに取り出してヘッダーに付ける流れも自然に理解できました！」

先生

「その調子。次はエラー処理や期限切れの対策にも触れてみると、より実践的なアプリが作れるようになるよ。」