Node/React環境で、特定のディレクトリの画像をすべて持ってくる良い方法はありますか？

Question

画像ギャラリーのようなシステムを作っています。

サイトはReactで構築しており、コンポーネントに画像を読み込む場合、
Import "../assets/images/someImageName.jpg"
というような形でImportしているのですが、このとき、assets/imagesのディレクトリをごとImportしたり、あるいはそれに近いような形で、特定のディレクトリ配下のすべてのファイルを持ってくるような方法はないでしょうか？

泥臭く実装するなら、画像名に0、1、2、、、と連番を振った上で、JS側で画像最大数などを保持しておいてループ処理を回すか、あるいはJS側で画像名を全て持った配列を定義しておく、などの方法があると思うのですが、どちらにせよ更新のたびに手間がかかってしまうので、ディレクトリ配下の画像を全て自動で持ってくる方法が無いか探しています。

こういう実装パターンがあるとか、あるいはその辺りをうまい感じにハンドリングしてくれるライブラリなどあったら教えて頂きたいです。同じ要件を満たせるライブラリなどでも構いません。
よろしくお願いします。

Answer 1

具体的なコードでなくてアイデアなので すみませんが、

動的にやるなら、

・ サーバサイド側で、ディレクトリを再帰的に処理したファイル名の一覧をクライアント側に返す

となるのだと思います。

ただ、

JS側で画像名を全て持った配列を定義しておく

こういう話で良いのなら、
その JS ファイルを find . -type f -name '*.jpg' | xargs ... のようなシェルスクリプトかなにかで作る、というのが楽そうに思いました。

呼び忘れが面倒なら npm scripts? で呼ばれるように設定するとか。。

Comments

[josephine]

ありがとうございます。
シェルスクリプトは考えてなかったので助かります。
もしかしたらサーバーでゴリゴリ処理を走らせるより楽かもしれないと思いました。
一度試してみます。ありがとうございます。