CodeZine(コードジン)

特集ページ一覧

ドラッグ&ドロップで簡単にファイルが選択できる「react-dropzone」を解説

現場で役立つ! React向けライブラリ詳説 第9回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2022/04/15 11:00

 入力フォームを作成する中で、テキストや日付ほどではないものの頻出するパターンとして、ファイルアップロードのためのファイル選択があります。input要素を手作業で設定しても最低限のものは作れますが、ライブラリを使うことでドラッグ&ドロップによるリッチなファイル選択UIも実装できます。今回はその一例として、react-dropzoneについて解説します。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Monterey 12.2.1
  • Node.js 16.14.0/npm 8.3.1
  • React 17.0.2
  • react-scripts 5.0.0
  • react-dropzone 12.0.4

リッチなファイル選択UI

 Webアプリケーションを作っていると、ファイル選択のUIを用意する機会は数多くあります。

  • プロフィール用の画像をアップロードする
  • 報告書の文書ファイルをアップロードする
  • 設定ファイルをインポートする

 古くから頻出だったUIだけあって、HTMLでも簡単に実装することができます(リスト1)。

[リスト1]HTML標準のファイル選択
<!-- 最小限の実装 -->
<input type="file" />
<!-- ファイル形式を絞る -->
<input type="file" accept="application/json" />

  accept属性を指定することで、ファイル形式を絞り込むこともできます。リスト1のJSONファイルのみに絞り込んだほうを実際に表示すると、図1のように見慣れたUIが現れます。

図1:HTML標準のファイル選択UI
図1:HTML標準のファイル選択UI

 「ファイルを選択」のボタンをクリックすると、図2のようにJSONファイルのみが有効なファイル選択UIが表示されます。

図2:JSONファイルだけを選択できる
図2:JSONファイルだけを選択できる

 さて、ここまでは標準の機能でサポートされていますが、近年では図3のように、ドラッグ&ドロップでファイルを選択するUIもよく見かけるようになりました。

図3:ドラッグ&ドロップでファイル選択ができるUI
図3:ドラッグ&ドロップでファイル選択ができるUI

 WindowsのエクスプローラーやmacOSのFinderなどで既にフォルダを開いている場合は、新たにダイアログを開いて選択するよりも、開いているフォルダからファイルをドラッグ&ドロップしたほうが便利です。本記事では、こういったUIを実現するためのReact向けライブラリとして、react-dropzoneについて解説します。

react-dropzone

 react-dropzoneは有志のOSSプロジェクトによって開発されている、ドラッグ&ドロップできるファイル選択UIを扱うためのライブラリです。

図4:react-dropzoneのWebサイト
図4:react-dropzoneのWebサイト

 HTMLのドラッグ&ドロップ仕様を活用したジェスチャーの挙動と、input要素を連携させるのが主な責務です。インターフェースとしては、コンポーネントによる実装(<Dropzone>)と、React Hooksによる実装(useDropzone())の2種類を持っています。おおむね同じことができるので、本記事ではHooks版を主に解説します。

基本的な使い方

 react-dropzoneは外部プロジェクトへの依存も特にないので、インストールするだけで使えるようになります。

[リスト2]react-dropzoneをインストールする
$ npm install react-dropzone

 インストールが終わったら、まずは最小限の実装で動かしてみましょう(リスト3)。

[リスト3]最小限の実装(src/MyDropzone.js)
export function MyDropzoneBasic() {
  // (2)
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles); // (4)
  }, []); // 空配列を指定したのでonDropのインスタンスはコンポーネントの破棄まで更新されない

  const { getRootProps, getInputProps } = useDropzone({ onDrop }); // (1)

  return (
    <div>
      <div {...getRootProps()}>{/* (3) */}
        <input {...getInputProps()} />{/* (3) */}
        <p>
          ファイルをここにドラッグアンドドロップするか、
          クリックしてファイルを選択してください
        </p>
      </div>
    </div>
  );
}

 (1)がライブラリの呼び出し部分です。(2)で作ったコールバックonDropを引数で登録しつつ、(3)でdiv要素やinput要素をカスタマイズするための関数、getRootPropsgetInputPropsを戻り値として提供します。見た目は図5のようになります。

図5:最小限の実装で表示されたUI
図5:最小限の実装で表示されたUI

 何もスタイルを当てていないので、クリックやドラッグ&ドロップができるのはテキスト部分のみです。実際にファイルをドラッグ&ドロップすると、(2)のコールバックにFile型の配列データが渡されます。(4)で出力したログは図6のようになります。

図6:ファイルを登録した結果のデータ
図6:ファイルを登録した結果のデータ

 ファイル情報が表示されました。基本的な使い方は簡単ですね。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:現場で役立つ! React向けライブラリ詳説

もっと読む

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5