jsをhtmlに結合・分離する「Js Code Editor」
- Digital100 JPY

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 のように番号を振ることをお勧めします。
