現代のWeb開発は、UIコンポーネント、アニメーションツール、アイコン集、CSSフレームワークなど多種多様な外部ライブラリの上に成り立っています。GB Coderでは、煩雑なビルド設定を行わずに外部資産を活用するための柔軟な仕組みが整っています。カスタム注入マネージャーと外部ライブラリパネルを通じて、CDNスクリプト、最新のESMモジュール、自由なHTMLタグをプレビュー環境へ自在に組み込むことができます。

1. GB Coderにおける3段階の依存関係管理

プロジェクトの性質に応じて、依存関係は次の3つの階層から選択できます：手軽なCDNスクリプトタグ、ブラウザ標準のESMモジュールインポート、そしてWebContainerによる本格的なnpmパッケージのインストールです。それぞれの特性を理解することで、ビルド不要のシンプルさと高機能なバンドル環境を自由に使い分けることができます。手早く試作したい場面では、CDN注入によって待機時間ゼロで機能を取り込めます。

2. カスタム注入マネージャー：<head>配置と<body>配置の使い分け

カスタム注入パネルでは、外部リソースをプレビューHTMLのどの位置に挿入するかを緻密に制御できます。スタイルシートやフォント定義は、スタイルの崩れ（FOUC）を防ぐため<head>内に配置します。一方、Three.jsなどの3DライブラリやGSAPなどのアニメーションエンジンといった重量級のスクリプトは、DOMの読み込み完了を待つため<body>の末尾に配置するのが理想的です。

<!-- カスタム注入の設定例 -->
{
  "headTags": [
    "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'>",
    "<link rel='preconnect' href='https://fonts.googleapis.com'>"
  ],
  "bodyScripts": [
    "<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js'></script>"
  ]
}

3. 最新のESMモジュール：ビルド工程不要のモダンJavaScript

現代のブラウザにおけるECMAScript Modules（ESM）の普及により、ローカルでバンドラーを動かさなくても、npmパッケージをJavaScriptコード内で直接インポートできます。esm.shやunpkgなどのESM CDNを活用すれば、標準のエディタで直接import文を記述できます。モダンなモジュール分割の利便性と、静的コードならではの軽快な即時実行性を両立できるアプローチです。

// エディタ内で直接ESMモジュールをインポートして利用
import confetti from 'https://esm.sh/canvas-confetti@1.9.3';
import { formatDistanceToNow } from 'https://esm.sh/date-fns@4.1.0';

confetti({ particleCount: 100, spread: 70 });

4. スタイルシートの読み込み順序とCSSカスケードの制御

自作のCSSとTailwind CDNやBootstrapなどの外部フレームワークを併用する場合、スタイルの読み込み順序が優先度を左右します。GB Coderでは、外部スタイルシートを常にプロジェクトのstyles.cssより前に配置するよう管理しています。これにより、自作クラスやCSS変数が外部スタイルの初期値を確実に上書きでき、不自然な!importantの多用を防ぐことができます。

5. Webフォントとアイコンフォントのワンクリック導入

タイポグラフィとアイコンは、アプリの完成度を大きく左右します。ライブラリ管理画面から、Google Fontsの厳選コレクションやFontAwesome、Lucide、Material Iconsなどをスイッチ一つで導入できます。 GB Coderはpreconnectヒントを自動的に付与するため、フォントのダウンロードが高速化され、表示のチラつきを抑えることができます。

6. 外部スクリプトのセキュリティ：CSPとサンドボックス隔離

ブラウザIDE内でサードパーティ製コードを実行する際は、万全のセキュリティ対策が求められます。GB Coderのプレビューは、Content Security Policy（CSP）とCOEPで保護された独立iframe内で実行されます。これにより、外部スクリプトが本体エディタのIndexedDBデータを読み取ったり、Cookieや親ウィンドウのコンテキストを侵害するリスクを完全に遮断します。

7. プロジェクト保存とZIPバックアップにおける設定の継承

設定したカスタムタグやスクリプトは、プロジェクトのメタデータとしてIndexedDBに自動保存されます。プロジェクトをZIPアーカイブとしてダウンロードする際も、設定はproject.json内に完全に記録されます。別のマシンでプロジェクトを復元したり仲間に共有した際も、再設定の手間なくまったく同じ外部リソースが瞬時に再構築されます。

8. CDNの接続トラブル対策とフォールバック

会社のネットワーク制限やファイアウォールによって、特定のCDNドメインが遮断されることがあります。仮想コンソールはプレビュー内の通信を監視し、HTTP 404やCORSのエラーを検出すると原因と対策を提示します。 jsDelivr、cdnjs、unpkgなどの複数のミラーを手軽に切り替えて、通信環境に左右されずにコーディングを継続できます。