Laravelの画像ファイルのパス一覧を処理するReact処理

Laravelでは、

Storage::disk('public')->files('images');

を使用して、public ディスク内の images ディレクトリにあるファイルの
パス一覧を取得できます。
ただし、この場合に取得できるのは直接そのディレクトリ内に存在するファイルのみです
（サブディレクトリ内のファイルは取得されません）。

使用例

php

use Illuminate\Support\Facades\Storage;

// storage/app/public/images に保存されたファイルリスト(パスの一覧）を取得
$files = Storage::disk('public')->files('images');

// 一覧をjson形式で返送
return response()->json($files);

このコードは、storage/app/public/images ディレクトリにあるファイルの一覧を取得し、
そのパスを出力します。

注意点

ディレクトリ構造
files() メソッドは指定したディレクトリ内の直下のファイルだけを返します。
もし、サブディレクトリ内のファイルも含めて再帰的に取得したい場合は、
allFiles() メソッドを使用してください。

$allFiles = Storage::disk('public')->allFiles('images');

この方法では、サブディレクトリ内のファイルも含めて取得できます。
ストレージ設定
デフォルトでは、public ディスクは storage/app/public にマッピングされています。
このディスクが正しく設定されていることを確認してください。
config/filesystems.php を確認すると以下のような設定があります。
'disks' => [ 'public' => [ 'driver' => 'local', 'root' => storage_path('app/public'), 'url' => env('APP_URL') . '/storage', 'visibility' => 'public', ], ],
返されるパス
files() や allFiles() メソッドによって返されるパスは、
指定したディレクトリからの相対パスです。
例えば、images/example.jpg のような形式になります。

Laravelは保存しているデータ一覧をオブジェクト形式で返信

files('images'): images ディレクトリ直下のファイル一覧を取得する。
allFiles('images'): images ディレクトリとそのサブディレクトリ内のすべての
ファイルを再帰的に取得する。

これをReactで受け取り、一覧表示する。

Laravelから一覧のデータをオブジェクトで受け取っているので、配列に変換し、map関数
で要素のURLに接頭辞を付けます。
その後、レンダリング処理で、またmap関数を使って画像の取り込みを行い、
URLと画像をセットで表示します。

要するに一覧表示や配列内のオブジェクト処理はmap関数が一番便利と言う話。

該当箇所: Reactコード内のループ部分

以下は、画像リストをループさせて一覧表示する部分のコードです。

tsx

<div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
    {images.map((image) => (
        <div
            key={image.name} // 各要素のユニークなキーを指定
            style={{
                border: "1px solid #ccc",
                padding: "10px",
                cursor: "pointer"
            }}
            onClick={() => setSelectedImage(image.url)} // クリック時に画像を選択
        >
            <p>{image.name}</p> {/* 画像の名前を表示 */}
            <img
                src={image.url} // 画像のURLを設定して表示
                alt={image.name}
                style={{ width: "100px", height: "100px", objectFit: "cover" }}
            />
        </div>
    ))}
</div>

解説: `images.map()` の詳細

images の内容: imagesは、LaravelのAPIから取得した画像リストを保持する配列です。
画像リストは、以下の形式で構成されています。
const images = [
{ name: "example1.jpg", url: "/storage/images/example1.jpg" },
{ name: "example2.jpg", url: "/storage/images/example2.jpg" }, // その他の画像 ];
配列内の要素はオブジェクトとする。
map() を使ったループ処理:
- map()関数は、配列内の各要素（ここではimage）を1つずつ取り出し、
  Reactの要素としてレンダリングします。
- key={image.name} は、Reactで配列をレンダリングする際に必要な一意の
  キーを設定するためのプロパティです。
- 各要素には、画像名（image.name）と画像プレビュー（image.url）
  が含まれています。
出力結果: 上記のコードでは、以下のように画像一覧が表示されます。
cssコードをコピーする[画像名]
[プレビュー画像 (100x100)]
画像は横並びで表示され、クリックするとその画像が選択されます。

画像リストの取得部分

images配列は、Laravel APIから取得したデータを元に作成されます。
以下のコードがその処理を担当しています。

Laravel APIから画像リストを取得

tsx

const fetchImages = async () => {
    try {
        const response = await axios.get<string[]>("/api/images"); // Laravel APIから画像リストを取得
        const files = response.data; // APIのレスポンス（例: ["example1.jpg", "example2.jpg"]）

        // 各ファイル名からフルURLを作成
        const imageFiles = files.map((file) => ({
            name: file,
            url: `/storage/${file}` // 画像のURLを生成
        }));
        setImages(imageFiles); // 取得した画像リストをstateに保存
    } catch (error) {
        console.error("Error fetching images:", error);
    }
};

全体の流れを整理

Laravel APIが返すJSONデータ: Laravel API (/api/images) が以下のような
リストを返します。オブジェクトを配列に変換して受け取ります。
["example1.jpg", "example2.jpg", "example3.jpg"]
Reactでのデータ加工: 取得した画像ファイル名をmap()で加工して以下
のようなオブジェクトを生成します。
[
{ name: "example1.jpg", url: "/storage/images/example1.jpg" },
{ name: "example2.jpg", url: "/storage/images/example2.jpg" },
{ name: "example3.jpg", url: "/storage/images/example3.jpg" }
]
画像一覧のレンダリング: images.map()を使って、Reactコンポーネント内で
画像を繰り返し表示します。

出力例

以下のような画像一覧が表示されます（簡易例）。

[example1.jpg]     [example2.jpg]     [example3.jpg]
[ 画像プレビュー ] [ 画像プレビュー ] [ 画像プレビュー ]

画像をクリックすると、その画像が拡大表示されるなどのインタラクションが可能です。

これで、Laravelで提供された画像リストをReactでループさせて
一覧表示する仕組みが実現します。

使用例

注意点