2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

🎉 ドラッグ&ドロップでフォルダ内の「関連ファイル」を一括コピーするWebアプリ

Last updated at Posted at 2025-07-11

今日は 「ドラッグ&ドロップしたファイル名を含むフォルダ内の全ファイルを一発で探してコピーできるWebアプリ を紹介します。(後で詳しく説明します)

このWebアプリを使うと CommonFunctionA.cs という身の毛もよだつこのファイルは、他のどのファイルから参照されているの?といった状況で一覧表示できます。

関連ファイルを全て羅列する事で ChatGPT にも質問しやすいです。


💡 これで何ができるの?

例えば、次のようなフォルダ構成があったとします。

FolderA
├── FolderB
│   ├── aaa.txt
│   └── bbb.txt
├── ccc.txt  ← ドラッグ&ドロップ
└── ddd.txt

この状態で ccc.txt をブラウザにドラッグ&ドロップすると、以下の処理が行われます。

✅ フォルダ内を再帰的に検索
ccc という文字列を中身に含むファイルを全て抽出
✅ そのファイルの ファイル名と中身 を一括クリップボードコピー


👉 サイトはこちら


📝 技術ポイント

🚀 File System Access API

このアプリでは File System Access API を使い、ブラウザだけでローカルフォルダの中身を探索しています。

再帰的フォルダ探索
クリップボードAPIで一括コピー


🎯 まとめ

ドラッグ&ドロップだけで「関連ファイル」を一括コピーできるので、
ローカルの大量テキスト探索コードレビュー補助にも最適です。

関連ファイルの関連ファイルはコピーできません。実装しようと思えば実装できますが、連鎖する事で結局全部コピーする事になりかねないからです。

こういうWebアプリは自分自身を出力に含めるものなのか、割と悩んでいるところです。(現状は入れていません)
含めた方が使いやすそうですが、この CommonFunctionA.cs は誰が使っているかという観点だと含めないのが正しい気がしています。

再掲:
https://uni928.github.io/DirectoryInFileAllCopy/index3.html

追記

やはり自分自身を含めたバージョンを別に公開します。
https://uni928.github.io/DirectoryInFileAllCopy/index4.html

ChatGPT に質問する時はあった方が便利なので
公開する事にしました。

それとローカルに落として安全性をチェックしたい人向けに
ソースコードを公開します。
是非ローカルに落として、使用してみて下さい。
https://github.com/uni928/DirectoryInFileAllCopy


📘 関連リンク(再掲)

👉 今まで作ったサイト

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?