Reactで画像やバイナリデータをFetch APIで取得する方法を解説！初心者でもわかるReact入門

1. Fetch APIとは？Reactで何ができるの？

1. Fetch APIとは？Reactで何ができるの？

Fetch API（フェッチエーピーアイ）は、ReactなどのJavaScriptアプリで外部のサーバーにデータを取りにいくための機能です。たとえば、画像や動画、ファイルなどを取得して、画面に表示することができます。

難しく聞こえるかもしれませんが、「インターネットからデータを取ってくる魔法の道具」と考えるとイメージしやすいです。

2. バイナリデータとは？初心者にもわかりやすく解説

2. バイナリデータとは？初心者にもわかりやすく解説

画像や音声、動画ファイルなどは「バイナリデータ（二進数のデータ）」として送られてきます。これは人間が読める文字ではなく、コンピューターが理解できるような数字の列です。

Fetch APIでは、こうしたバイナリデータを blob（ブロブ）という形式で受け取ることができます。

3. Reactで画像をFetch APIで取得して表示してみよう

3. Reactで画像をFetch APIで取得して表示してみよう

ここでは、Reactアプリで画像をFetch APIで読み込み、画面に表示するサンプルを見てみましょう。

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

function ImageFetcher() {
  const [imageUrl, setImageUrl] = useState(null);

  useEffect(() => {
    fetch("https://via.placeholder.com/300") // ダミー画像URL
      .then((response) => response.blob())
      .then((blobData) => {
        const imageObjectUrl = URL.createObjectURL(blobData);
        setImageUrl(imageObjectUrl);
      })
      .catch((error) => {
        console.error("画像の取得に失敗しました", error);
      });
  }, []);

  return (
    

      
取得した画像を表示します
      {imageUrl ? (
        <img src={imageUrl} alt="取得した画像" />
      ) : (
        <p>画像を読み込み中...</p>
      )}
    
  );
}

export default ImageFetcher;

4. URL.createObjectURLとは？

4. URL.createObjectURLとは？

URL.createObjectURL（ユーアールエル・クリエイト・オブジェクト・ユーアールエル）は、取得したバイナリデータを一時的なURLに変換する関数です。このURLをimgタグのsrc属性に指定することで、画像として画面に表示できます。

つまり、インターネットから受け取った「数字のかたまり」を「画像として使えるURL」にしてくれる道具です。

5. エラー処理も忘れずに書こう

5. エラー処理も忘れずに書こう

Fetch APIを使うときには、うまくデータが取れない場合も考えて、.catch()でエラー処理を加えておくと安心です。ネットワークエラーやサーバーの不具合があっても、アプリが壊れずに済みます。

6. よくある初心者のつまずきポイント

6. よくある初心者のつまずきポイント

• 画像のURLが間違っている：URLが存在しないと何も表示されません。
• ブラウザのセキュリティ制限：他サイトから画像を読み込むとき、CORS（コース）という仕組みに引っかかることがあります。
• useEffectを使い忘れる：データを読み込むタイミングは、ReactではuseEffectで指定するのが基本です。

7. 画像以外のバイナリデータも扱える

7. 画像以外のバイナリデータも扱える

Fetch APIとblobは、画像だけでなく、PDFや音声ファイル、動画ファイルなどにも使えます。たとえば、PDFファイルを取得して<a>タグでダウンロードさせることもできます。

8. 本当にReact初心者でもできる？

8. 本当にReact初心者でもできる？

はい、大丈夫です。Reactは少しずつ学べば誰でも使えるようになります。今回紹介したFetch APIや画像表示の仕組みは、慣れてくると他のデータ取得でも応用できます。

最初は1つずつゆっくり試してみましょう。小さな成功を重ねることで、Reactの理解がぐんぐん深まります。

まとめ

まとめ

今回の記事では、Reactを用いたFetch APIによる画像やバイナリデータの取得方法について詳しく解説してきました。Webアプリケーション開発において、外部リソースを動的に取り込む技術は非常に重要です。特に、単なるテキストデータだけでなく、画像やPDFといった「バイナリデータ」を適切に扱うことで、ユーザー体験をより豊かなものにすることができます。

Reactでバイナリデータを扱う際のポイントは、主に以下の3点に集約されます。

• Fetch APIの戻り値を .blob() で処理する： 通常のJSONデータとは異なり、画像などはバイナリ形式として受け取る必要があります。
• URL.createObjectURLを活用する： メモリ上に展開されたバイナリデータを、ブラウザが解釈できる一時的なURLに変換することで、imgタグなどで利用可能になります。
• メモリ管理を意識する： URL.revokeObjectURL() を適切に使うことで、不要になったデータのメモリを解放し、ブラウザの動作を軽く保つ工夫が求められます。

応用編：PDFファイルの取得とプレビュー表示

画像だけでなく、PDFファイルを取得して表示させる場合も基本は同じです。以下のサンプルプログラムでは、Fetch APIでPDFデータを取得し、それをブラウザの新しいタブで開く、あるいはダウンロードさせるためのリンクを作成する方法を紹介します。

import React, { useState } from "react";

function FileDownloader() {
  const [downloadUrl, setDownloadUrl] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchPdfFile = async () => {
    setLoading(true);
    try {
      // PDFファイルをバイナリデータとして取得
      const response = await fetch("https://example.com/sample.pdf");
      if (!response.ok) throw new Error("ネットワークエラーが発生しました");

      const blob = await response.blob();
      
      // Blobから一時的なURLを生成
      const objectUrl = URL.createObjectURL(blob);
      setDownloadUrl(objectUrl);
    } catch (error) {
      console.error("ファイルの取得に失敗しました:", error);
      alert("ファイルを読み込めませんでした。");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container mt-4">
      <h3 className="mb-3">ドキュメント取得ツール</h3>
      <button 
        className="btn btn-primary" 
        onClick={fetchPdfFile} 
        disabled={loading}
      >
        {loading ? "読み込み中..." : "PDFファイルを取得する"}
      </button>

      {downloadUrl && (
        <div className="mt-3">
          <p>ファイルの準備ができました：</p>
          <a 
            href={downloadUrl} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="btn btn-success"
          >
            PDFをプレビュー・保存する
          </a>
        </div>
      )}
    </div>
  );
}

export default FileDownloader;

SEOとパフォーマンス向上のためのヒント

Reactアプリにおいて外部データを大量に扱う場合、パフォーマンス最適化は避けて通れません。例えば、今回紹介した useEffect 内でのFetch処理は、コンポーネントがアンマウントされた際にクリーンアップ関数を呼び出し、URL.revokeObjectURL(imageUrl) を実行するのがベストプラクティスです。これにより、ブラウザのメモリリークを防ぎ、長期的な安定性を確保できます。

また、フロントエンドでのデータ取得だけでなく、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を活用するNext.jsなどのフレームワークを併用することで、検索エンジン最適化（SEO）の効果をさらに高めることが可能です。画像データに適切な alt 属性を付与することや、画像サイズを適切にリサイズして配信することも、検索順位の向上に直結する重要な要素となります。

このように、Reactでのデータ取得は非常に奥が深い分野です。まずは基本的なFetchの流れをマスターし、徐々に複雑なファイル形式やエラーハンドリングに挑戦していくことで、エンジニアとしてのスキルを確実にステップアップさせていきましょう。