【更新履歴】

・2026/2/17　バージョン1.0公開。

JsCodeEditor

HTML/JS 結合・分離マネージャー

■ 概要

・JsCodeEditorは、HTMLファイルと、
　フォルダ内の複数のJavaScriptファイルを
　ボタン一つで**「結合（インライン化）」したり、
　「分離（外部ファイル化）」**したりできる開発支援ツールです。

・「開発中は管理しやすいようにファイルを分けておきたいが、
　配布時やテスト時は1つのHTMLファイルにまとめたい」
　といったニーズに最適です。

・結合時にはES Modules (import/export) の記述も自動判別し、
　適切な属性を付与します。

■ 主な機能

・結合 (Merge):
　指定フォルダ内の全JSファイルを
　HTML内の <script> タグとして埋め込みます。

・分離 (Split):
　HTMLに埋め込まれたJSコードを抽出し、
　再び個別のファイルとして復元します。

・プロジェクト管理:
　作業対象のHTMLとフォルダのパスを
　プロジェクトファイルとして保存・読込できます。

・バックアップ機能:
　ワンクリックで現状のファイルを
　丸ごとバックアップ・復元できます。

・安全設計:
　ツールが管理するコード以外
（CDNや外部ライブラリのタグなど）は変更せず、
　そのまま維持します。

使い方 (ユーザーマニュアル)

1. 準備・プロジェクト設定

HTMLファイルの選択: 　　
・対象となる .html ファイルを選択します。

JSフォルダの選択:
・JavaScriptファイルが格納されている
　（または格納したい）フォルダを選択します。

ヒント:
・HTMLファイルを選択済みの場合、
　JSフォルダ選択時に
　自動的にHTMLと同じ階層が開かれます。

プロジェクトの保存:
・メニューの [ファイル] > [名前を付けて保存] で、
　現在のパス設定を保存しておくと、
　次回から [開く] で素早く作業を再開できます。

・前回終了時の設定は自動的に記憶されます。

2. 結合 (Merge)

・複数のJSファイルをHTMLの中に埋め込みます。

1.メニューまたはボタンから [結合 (Merge)] を実行します。

2.JSフォルダ内のすべての .js ファイルが読み込まれ、
　HTMLファイルの </body> 直前（または元の位置）に埋め込まれます。

3.【重要】 結合が完了すると、
　元のJSファイルはフォルダから削除されます。
　（HTML単体で完結する状態になります）

4.結合された部分はエディタ上で色分け表示されます。

3. 分離 (Split)

HTML内のJSコードをファイルに戻します。

1.メニューまたはボタンから [分離 (Split)] を実行します。

2.HTML内に埋め込まれているコード
　（// @@start_js マーカーがある箇所）が抽出されます。

3.JSフォルダ内に .js ファイルとして復元・保存されます。

4.HTML内の記述は <script src="..."> 形式に戻ります。

4. バックアップと復元

・作業に不安がある場合は、
　こまめにバックアップをとることを推奨します。

作成:
・メニューの [バックアップ] > [バックアップ作成] をクリックすると、
　現在の日時でファイル一式のコピーが保存されます。

復元:
・[バックアップ] > [管理画面を表示] から、
　過去の状態を選択して [復元] を押すと、
　現在のファイルを削除してその時点の状態に戻します。

5. その他の機能

・Undo/Redo: エディタ上の変更や、
　結合・分離操作は [編集] > [元に戻す (Ctrl+Z)] で
　取り消すことができます。

・手動編集:
　画面右側のエディタでコードを直接編集できます。
　編集内容は自動保存されます。

・右クリックメニュー:
　左側のツリービューで、
　ファイルの追加・削除・リネームなどが可能です。

※ 注意事項

・このツールは // @@start_js [ファイル名]@@ という
　コメントマーカーを使用して結合箇所を管理しています。

・この行を削除すると分離できなくなるためご注意ください。

・結合順序はファイル名のアルファベット順です。
・読み込み順序が重要な場合は、ファイル名の先頭に
　01_main.js, 02_sub.js のように番号を振ることをお勧めします。

・ダウンロードされる方はこちら。↓