javascript　直下のサブディレクトリを一覧表示する

この記事で紹介するスクリプトの内容：
自分のPCにおいて、あるディレクトリを指定したときに直下のサブディレクトリを一覧表示するサンプルコードです。
具体的には、入力フォームの「選択」ボタンを押して親ディレクトリを指定すると、直下のサブディレクトリが一覧表示されます。
※動作確認はMacで行っており、Window機での動作は未確認です。

※PC内の指定ディレクトリにアクセスすることから、安全なディレクトリに対してのみ使用してください。

HTMLの例
大文字で始まる名前はユーザが付ける名前です。

<!-- 選択部 -->
<form class="inputform">
<input type="file" id="IDform" webkitdirectory multiple />
</form>

<!-- 表示部 -->
<div class="inputform" id="IDdisp"></div>

javascriptの例
大文字で始まる名前はユーザが付ける名前です。

//　サブディレクトリの取得
document.getElementById("IDform").addEventListener( "change", (event) => {
let DIVoutput = document.getElementById("IDdisp");
let SUBDIRarray = new Array();	//　サブディレクトリ格納用
let NN=0;	//　発見したサブディレクトリの数

//　サブディレクトリをすべて読み出す
for (const EachElement of event.target.files) { 
	//　サブディレクトリ
	let DirNames = EachElement.webkitRelativePath.split('/');
	let SubDirName = DirNames[0] + '/' + DirNames[1];

	if ( EachElement.webkitRelativePath.includes("DS_Store") ) { continue; }	//　Mac用
	//　未登録か
	if ( !SUBDIRarray.includes(SubDirName) ) { 
		SUBDIRarray[NN] = SubDirName;
		NN++;
	} else { continue; }

}	// end for

//	ソート
SUBDIRarray.sort( function(a, b) {
	if ( a< b ) {
		return 1;
	} else {
		return -1;
	}
})

//　設定して出力
for ( let kk=0; kk < NN; kk++ ) {
	let item = document.createElement("span");
	item.innerText = SUBDIRarray[kk];
	let br = document.createElement("br");

	//　出力
	DIVoutput.appendChild(item);
	DIVoutput.appendChild(br);
}	// end for

},

  false,
);

以上です。