1. はじめに
GB Coderは外部サーバーへの依存やアカウント登録なしで動作します。
動作要件と対応ブラウザ
静的エディターはIndexedDBとES2020に対応した全モダンブラウザで動作します。WebContainer環境ではSharedArrayBufferとクロスオリジン分離（COOP/COEP）が必要です（Chrome、Edge、Brave、Firefox対応）。
新規ワークスペースの作成
/app/projects を開き、「New Project」ボタンから静的プロジェクト、React、Vue、またはWebContainer環境を選択してください。
2. 静的HTML/CSS/JS開発フロー
ビルド待機時間なしで即座に動作確認が可能です。
3ペイン分割エディターの活用
HTML、CSS、JavaScriptをそれぞれ独立した領域で編集し、下部または右側のプレビュー画面にリアルタイムで反映されます。
<!-- index.html -->
<div class="card">
<h1>GB Coderへようこそ</h1>
<button id="counter">クリック数: 0</button>
</div>
<script>
let n = 0;
document.getElementById('counter').onclick = () => {
n++;
document.getElementById('counter').textContent = `クリック数: ${n}`;
};
</script>外部CDNライブラリの読み込み
Tailwind CSS、Bootstrap、React CDNなどをHTMLヘッダー内に直接指定して読み込むことができます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />3. テンプレートギャラリーとプロジェクト作成
事前構成されたスターターで素早く開発を立ち上げ。
スターターテンプレートの選択
ランディングページ、UIコンポーネント試作、ダッシュボードなど多彩なテンプレートを用意しています。
複数ファイル構成プロジェクト
サブディレクトリの作成やCSSモジュール分割、ネイティブESモジュールインポートに対応。
4. React・Vue開発環境
ブラウザ完結のコンポーネント開発。
React 18 コンポーネント開発
JSXおよびTypeScriptに対応し、高速なリロードで快適に開発できます。
import React, { useState } from 'react';
export default function App() {
const [val, setVal] = useState(0);
return <button onClick={() => setVal(val + 1)}>カウント: {val}</button>;
}Vue 3 単一ファイルコンポーネント (.vue)
template、script setup、scoped styleを含む.vueファイルをブラウザ内部で即時コンパイルします。
5. WebContainer IDEとターミナル
ブラウザタブ内で稼働する完全なNode.js環境。
xterm.js ターミナル操作
npm installやpackage.jsonスクリプトの実行をブラウザ上で直接行えます。
npm install
npm run devプレビューへの自動ポート接続
開発サーバーが起動すると、自動的に内蔵プレビューiframeにマッピングされます。
6. ローカル保存・プライバシー・オフライン
IndexedDBによる確実なデータ保護。
IndexedDB ストレージアーキテクチャ
全ファイルと設定は端末内のIndexedDBデータベースに保存され、外部送信されません。
オフラインでの継続作業
一度読み込んだ後は、インターネット接続が切断されてもそのまま編集を継続できます。
7. ZIPバックアップと復元
ベンダーロックインのない完全なデータ可搬性。
SHA-256検証付きZIPエクスポート
プロジェクト全体を標準ZIP形式でダウンロードし、改ざんや破損を防ぐハッシュを記録します。
プロジェクトの安全なインポート
ZIPファイルをダッシュボードへドラッグ＆ドロップするだけで即座に復元できます。
8. プロジェクト内検索とショートカット
軽快な操作性を支える機能群。
主なキーボードショートカット
Ctrl+Sで保存、Ctrl+Pでファイル切り替え、Ctrl+`でターミナル表示切り替えが可能です。
全ファイル対象のグローバル検索
正規表現や大文字・小文字を区別した高速な検索・置換を行えます。
9. トラブルシューティングと互換性
よくある問題と解決手順。
WebContainerが有効にならない場合
HTTPS接続であること、およびCOOP/COEPヘッダーが正しく適用されているか確認してください。
キャッシュの更新とService Worker
古い画面が表示される場合はCtrl+Shift+Rで強制再読み込みを行ってください。