Javascriptのみでディレクトリ内のファイル数を取得することは可能か？

Question

概要

hogeディレクトリに複数のpngファイルが有り、いくつファイルがあるか動的に取得したい

環境

webpack 4.41.2
react.js 16.11.0

webpackでcompileし、index.html, index.css, index.jsができる
(フロントのみ)

調べてみたこと

https://stackoverflow.com/questions/1266004/count-number-of-files-in-a-folder-through-javascript
https://stackoverflow.com/questions/33775113/count-the-number-of-files-in-a-directory-using-javascript-nodejs

ここらへんを見ると、「フロントサイドだけでは構造的に無理、サーバーサイドで取得してajaxで取得する必要がある」という回答。

しかし今回のアプリケーションではフロントサイドのみ使用する。
この場合、やはりjavascriptのみでは不可能なのでしょうか？

自分の考えている解決方法

(javascriptだけで不可能な場合)
実装方法としては hoge directory内のpngファイルを手動で記入し(jsonとして)、そこから取得する。を思いついていますが、もしもっと良い方法があれば記載していいただきたいです。

よろしくお願いいたします。

Comments

[m.ts10806]

思いついたのは良いとして、試してないのでしょうか。

[m.ts10806]

いずれにしても「hogeディレクトリ」が「どこにあるか」という前提条件も必要に思います。

Answer 1

サーバーにディレクトリにあるファイル一覧を返すような仕組みがない限り不可能です。

フロントエンドはブラウザー、つまり、クライアント側で動作しています。クライアントはサーバーのディレクトリへ直接アクセスする手段はありませんので、ディレクトリの中身を確認することはできません。自分のパソコン上でどんなに頑張っても、teratailのサーバーのあるディレクトリにあるファイル一覧を取得できませんよね？それと同じです。だから、サーバー側がディレクトリの中身の一覧を返す何らかの仕組みが必要になります。

サーバー側で一覧を返す手段はいくつかあります。

1. 指定のディレクトリの中身一覧を表示するだけのPHP/CGIプログラムを作って置く。
2. スタティックなファイルの表示と指定のディレクトリの中身一覧を表示するだけのWeb ServerなWebアプリケーシを作って、リバースプロキシでアクセスするようにする。
3. WebDAV機能を有効にする。
4. autoindex機能を有効にする。

最初の1.と2.は(簡単な)プログラミングが必要になります。また、3.のWebDAVは設定次第でファイルの置き換えさえ許してしまうので、セキュリティに詳しくない人が安易に設定すべきではありません。ですので、最後4.のautoindex機能だけ説明します。

autoindex機能はApach HTTP Serverにも、nginxにも、IIS(設定名としてはDirectoryBrowser)にも備わっている機能です。

• Apach HTTP Serverのドキュメント
• nginxのドキュメント
• IISのドキュメント

これらを有効にして、"index.html"と言ったインデックスファイルを置いていないディレクトリにアクセスしてみてください。ディレクトリの中身の一覧が取得できるはずです。あとは、これをAjaxで取得し、加工すれば良いとなります。

ただ、この機能はもともとブラウザから見ることを想定しているため、通常はHTML内にファイルの一覧が表示されることになります。これではパースするのが面倒です。JSONで取得できるようにできないかという話ですが、nginxであれば可能です。autoindex_format json;とJSONを指定してください。Apache HTTP ServerとIISについては機能が見つけられませんでした。nginx以外を使っている場合は、次に簡単なPHP/CGI等にした方がいいかもしれません。

Answer 2

しかし今回のアプリケーションではフロントサイドのみ使用する。
この場合、やはりjavascriptのみでは不可能なのでしょうか？

不可能です。
「サーバーのファイルシステムに、ブラウザ等のフロントエンドから簡単にアクセスしたい。」と同義です。

(javascriptだけで不可能な場合)
実装方法としては hoge directory内のpngファイルを手動で記入し(jsonとして)、そこから取得する。

Ajax や JSONP でjsonデータを取得する方針なら可能です。

もしもっと良い方法があれば記載していいただきたいです。

現実的な方法としては、手作業を廃して自動化することでしょうか。

自前のサーバーアプリケーションを置ける場合

1. サーバー側で json を動的生成する

サーバーアプリケーションを置けない場合

1. サーバーの画像フォルダと同じ階層構造で、ローカルマシン上にも画像管理
2. ローカルマシン上の画像管理フォルダからJSON生成
3. JSONをアップロードする

追記）
javascript 限定なら、ローカル環境で NodeJS の標準モジュール（FileSystem モジュール）を使う方法があります。

• readdir()
• readdirSync()

で取得できる 指定ディレクトリの エントリ（ファイルやディレクトリ）を for などで回しつつ、JSON構築することになります。

Comments

[kazoogon]

ご回答ありがとうございます
> 2, ローカルマシン上の画像管理フォルダからJSON生成
こちらなのですが、この具体的な方法を知りたかったのが今回の質問? だと思うのですが、勘違いしていたら申し訳ございません

[AkitoshiManabe]

追記しました。概要だけになりますので、詳細はドキュメント等で調べてください。

[kazoogon]

ありがとうございます。
追記された readir()などはnode.jsつまり、やはりサーバーアプリケーションを設置する必要があるということで了解です

[AkitoshiManabe]

> サーバーアプリケーションを設置する必要がある。
JSON生成だけなら、ローカルの Terminal(or コマンドライン) でも実行できます。
ご都合の良い方でよいと思います。頑張ってください。