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

生徒

「Reactで画像やPDFファイルをアップロードしたいんですが、どうすればできますか？」

先生

「Reactでは、Fetch APIとFormDataを使うことで簡単にファイルアップロードができますよ。」

生徒

「FormDataって何ですか？初心者でも使えますか？」

先生

「もちろんです。今回はReactでファイルアップロードをする基本から、サーバーへの送信方法まで丁寧に解説していきますね！」

1. ファイルアップロードとは何か？

ファイルアップロードとは、画像やPDF、Excelなどのファイルを、パソコンやスマートフォンからサーバーへ送信する処理のことです。 Webアプリでは非常によく使われる仕組みで、プロフィール画像の登録や書類提出、データ共有など、日常的な機能の土台になっています。

たとえば、フォームでファイルを選択して「送信」ボタンを押す操作も、内部ではファイルアップロードの処理が行われています。 Reactでは、この流れをJavaScriptで細かく制御できるため、画面を切り替えずに処理結果を表示したり、エラーを分かりやすく伝えたりできます。

まずは「ファイルを選ぶ → サーバーに送る」という基本の考え方を押さえましょう。難しく感じるかもしれませんが、仕組み自体はとてもシンプルです。


import React from "react";

function SampleUpload() {
  return (
    <div>
      <h1>ファイルアップロードの例</h1>
      <input type="file" />
      <button>送信</button>
    </div>
  );
}

export default SampleUpload;

（画面に「ファイルアップロードの例」と表示され、ファイルを選択して送信ボタンを押せる画面が表示されます）

このサンプルでは、まずファイルを選ぶための入力欄を用意しています。実際のアプリでは、ここで選択されたファイルをJavaScriptで取得し、サーバーへ送信する処理を追加していきます。最初の段階では「ファイルを選択できる画面を作る」ことが第一歩です。

2. Fetch APIとは？

Fetch APIとは、JavaScriptからサーバーへデータを送ったり、サーバーから結果を受け取ったりするための仕組みです。画面を再読み込みせずに通信できるため、 Reactのような画面が頻繁に切り替わるアプリと非常に相性が良いのが特徴です。

従来はフォーム送信をすると画面全体が切り替わっていましたが、 Fetch APIを使えば「裏側で通信だけを行う」ことができます。その結果、ユーザーは画面を見続けたまま、アップロード結果やエラーメッセージを確認できるようになります。

ファイルアップロードの場合も考え方は同じで、「サーバーにデータを送る役割」をFetch APIが担当します。 Reactでは、このFetch APIを使って、選択したファイルを安全にサーバーへ送信します。


fetch("https://api.example.com/test", {
  method: "POST"
}).then(
  response => response.text()
).then(
  data => console.log(data)
);

（画面に「こんにちは！」と表示されている状態でボタンを押すと、裏側でサーバーと通信が行われ、結果が取得されます）

このサンプルでは、ボタン操作などをきっかけに、 Fetch APIを使ってサーバーへリクエストを送っています。ファイルアップロードでは、この通信部分にFormDataを組み合わせることで、画像やPDFといったファイルを送信できるようになります。まずは「Fetch APIは通信担当」と覚えておくと理解しやすくなります。

3. FormDataとは？

FormData（フォームデータ）とは、フォームに入力された内容を JavaScriptからまとめて扱うための仕組みです。文字情報だけでなく、画像やPDFなどのファイルも一緒に管理できるため、ファイルアップロードでは欠かせない存在になります。

通常のデータ送信では、文字列しか送れないケースが多いですが、 FormDataを使うことで「ファイルをそのままの形」でサーバーに送信できます。そのため、画像ファイルや文書ファイルのようなバイナリデータを扱う場面で特に活躍します。

使い方はとてもシンプルで、「FormDataを作る → ファイルを追加する」という流れを覚えるだけで十分です。プログラミング未経験の方でも、感覚的に理解しやすいのが特徴です。


const formData = new FormData();
formData.append("sampleText", "テスト文字");
formData.append("sampleFile", selectedFile);

（画面に「こんにちは！」と表示された状態でボタンを押すと、選択したファイルと文字データがまとめて送信されます）

この例では、文字データとファイルを同時にFormDataへ追加しています。実際のファイルアップロードでは、このFormDataをFetch APIに渡すことで、サーバー側へ安全にファイルを送ることができます。「FormDataはファイルを入れる箱」と考えると理解しやすくなります。

4. Reactでファイルをアップロードする基本構成

Reactでファイルアップロードを実装する場合は、いきなり難しい処理を書く必要はありません。大切なのは「どんな順番で処理が進むのか」を理解することです。ここでは、初心者の方でもイメージしやすいように、基本的な流れを一つずつ整理していきます。

ファイルアップロードの処理は、大きく分けて「選ぶ」「保存する」「まとめる」「送る」という四つの段階で構成されています。この考え方を覚えておくと、後のコード理解がとても楽になります。

inputタグでファイルを選ぶ（ユーザー操作）
選んだファイルをstateに保存する（一時的に覚える）
FormDataにファイルをセットする（送信用にまとめる）
Fetch APIでサーバーへ送信する（通信する）

たとえば、最初の段階では「ファイルを選択したら何が起きるのか」だけを意識すれば十分です。 Reactでは、inputタグを使うことで簡単にファイル選択画面を用意できます。


import React, { useState } from "react";

function BasicFlow() {
  const [message, setMessage] = useState("まだファイルは選ばれていません");

  const handleSelect = () => {
    setMessage("ファイルが選択されました");
  };

  return (
    <div>
      <p>{message}</p>
      <input type="file" onChange={handleSelect} />
    </div>
  );
}

export default BasicFlow;

（画面に「まだファイルは選ばれていません」と表示され、ファイルを選択すると「ファイルが選択されました」に変わります）

このサンプルでは、実際にサーバーへ送信はしていませんが、「ファイルを選ぶ」という最初のステップを体験できます。このあとに、FormDataやFetch APIを組み合わせることで、本格的なファイルアップロード処理へと発展していきます。まずはこの基本構成をしっかり押さえておきましょう。

5. Reactでのファイルアップロードサンプル


import React, { useState } from "react";

function App() {
  const [file, setFile] = useState(null);
  const [message, setMessage] = useState("ファイル未選択");

  const handleChange = (e) => {
    setFile(e.target.files[0]);
    setMessage("ファイルが選択されました");
  };

  const handleUpload = async () => {
    if (!file) {
      setMessage("ファイルを選んでください");
      return;
    }

    const formData = new FormData();
    formData.append("uploadFile", file);

    try {
      const response = await fetch("https://api.example.com/upload", {
        method: "POST",
        body: formData,
      });

      if (response.ok) {
        setMessage("アップロード成功！");
      } else {
        setMessage("アップロード失敗…");
      }
    } catch (error) {
      setMessage("通信エラーが発生しました");
    }
  };

  return (
    <div>
      <h1>{message}</h1>
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>アップロード</button>
    </div>
  );
}

export default App;

（画面に「ファイル未選択」と表示され、ファイル選択後にアップロードすると「アップロード成功！」などのメッセージが表示されます）

6. ファイルのサイズや種類をチェックするには？

アップロードするファイルが大きすぎたり、許可されていない種類のファイルだったりすると、トラブルの原因になります。ReactではJavaScriptを使って、ファイルサイズや拡張子をチェックすることができます。

たとえば、画像のみアップロードを許可したい場合は以下のようにします。


if (!file.type.startsWith("image/")) {
  alert("画像ファイルを選んでください");
  return;
}

また、ファイルサイズが2MB以内でなければエラーにする場合は：


if (file.size > 2 * 1024 * 1024) {
  alert("ファイルサイズは2MB以下にしてください");
  return;
}

7. サーバー側で受け取るには？

Reactでアップロードしたファイルは、サーバー側で受け取る処理が必要です。Node.jsの場合は「multer」などのライブラリで受け取ります。サーバーが対応していないとファイルは保存されないので、バックエンド側も確認しましょう。

8. 実際のアプリで使われる場面

プロフィール画像のアップロード
履歴書や文書ファイルの送信
お問い合わせフォームにファイル添付
管理画面からCSVやExcelをアップロード

これらの機能は、ほとんどがFetch APIとFormDataの組み合わせで実現されています。

まとめ

Reactでのファイルアップロードの全体像を振り返る

今回の記事では、Reactを使ってファイルアップロード機能を実装するために必要な考え方と流れを、初心者の方にも理解しやすい形で解説してきました。ファイルアップロードと聞くと難しそうに感じるかもしれませんが、実際には「ファイルを選ぶ」「データとしてまとめる」「サーバーに送る」という三つの工程を順番に理解することで、全体像がはっきり見えてきます。 Reactでは画面の表示と処理を分けて考えることが多く、ファイルアップロードも例外ではありません。 inputタグでファイルを選択し、その情報を状態として管理し、必要なタイミングでサーバーへ送信するという流れは、Reactらしい設計の一つと言えます。

特に重要だったのは、Fetch APIとFormDataの役割です。 Fetch APIは、ページを再読み込みせずにサーバーと通信できる仕組みであり、Reactのようなシングルページアプリケーションでは欠かせない存在です。 FormDataは、ファイルや文字情報をまとめて送信するための入れ物のようなもので、画像や文書ファイルといったデータを安全に扱うために利用されます。この二つを組み合わせることで、Reactでも実用的なファイルアップロード機能を無理なく実装できます。

初心者がつまずきやすいポイントと考え方

プログラミング未経験の方がつまずきやすいポイントとして、「なぜその処理が必要なのか分からない」という点があります。たとえば、なぜファイルをそのまま送れずにFormDataに入れる必要があるのか、なぜFetch APIを使うのか、といった疑問です。これらはすべて、ブラウザとサーバーがどのようにデータをやり取りしているかを意識すると理解しやすくなります。ファイルアップロードは、単なる文字列の送信とは異なり、データ量が大きく形式も特殊なため、専用の仕組みが必要になります。その役割を担っているのがFormDataであり、送信役を担当するのがFetch APIです。

また、ファイルのサイズや種類をチェックする処理も重要なポイントでした。ユーザーが誤って大きすぎるファイルや想定外の形式のファイルを選んだ場合、そのまま送信してしまうとエラーの原因になります。 React側で事前にチェックすることで、ユーザーに分かりやすいメッセージを表示でき、使いやすいアプリにつながります。実際の開発現場でも、このような入力チェックは非常に重視されており、ファイルアップロード機能を安全に運用するための基本的な考え方と言えるでしょう。

まとめとしてのシンプルなサンプル


import React, { useState } from "react";

function SummaryUpload() {
  const [text, setText] = useState("ファイルを選んでください");

  const handleSelect = () => {
    setText("ファイルが選択されました");
  };

  return (
    <div>
      <p>{text}</p>
      <input type="file" onChange={handleSelect} />
    </div>
  );
}

export default SummaryUpload;

（画面に「ファイルを選んでください」と表示され、ファイルを選ぶと表示が切り替わります）

このサンプルでは、ファイルアップロードの最初の一歩である「ファイル選択」にだけ注目しています。いきなりすべてを理解しようとせず、まずは一つひとつの動きを確認することが大切です。ファイルを選ぶと画面の表示が変わる、という小さな体験を積み重ねることで、Reactの仕組みや考え方が自然と身についていきます。

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

生徒

「最初はファイルアップロードって難しそうだと思っていましたが、流れで考えると意外と整理できました。ファイルを選んで、まとめて、送るだけなんですね。」

先生

「その理解でとても良いですよ。 Reactでは一つ一つの処理を分けて考えることが大切です。今回はファイルアップロードという機能を通して、状態管理や通信の基本も一緒に学べましたね。」

生徒

「Fetch APIやFormDataも、名前だけ見ると難しく感じましたが、役割を知ると納得できました。実際のアプリでも使われている理由が分かった気がします。」

先生

「それがとても大切なポイントです。実務でも同じ仕組みが使われているので、今日学んだ内容はそのまま実践につながります。まずは基本をしっかり身につけて、少しずつ機能を広げていきましょう。」

今回のまとめとして、Reactでのファイルアップロードは特別な技術ではなく、基本的な仕組みの組み合わせで成り立っていることを理解できたのではないでしょうか。ファイル選択、状態管理、通信処理という考え方を身につけることで、今後さまざまなWebアプリケーション開発に応用できる力が育っていきます。焦らず、一つずつ理解を深めていくことが、確実な成長への近道です。