GB Coderの仕組み：ブラウザIDE完全ガイド

GB Coderは、1つのシェルを共有する2つの環境と考えるとわかりやすいでしょう。静的エディターはHTML、CSS、JavaScriptに集中した作業台です。入力するとプレビューが更新され、その間にビルド処理はありません。高度なIDEは、WebContainerを通じて本物のNode.jsツールチェーンを実行します。WebContainerはWebAssemblyで動くランタイムで、ブラウザーのタブ内で動作します。どちらのモードも同じプロジェクトダッシュボード、Monacoエディター、ファイルエクスプローラー、プレビューパネル、ローカルストレージを共有するため、切り替えは製品を変えるというより道具を変える感覚に近いものです。ランディングページ、CSSの実験、授業用デモ、小さなスクリプトには静的モードを選びます。npmパッケージ、Vite開発サーバー、JSXのコンパイル、ターミナルが必要なら高度なモードを選びます。高度なランタイムにはSharedArrayBufferとクロスオリジン分離に対応した最新ブラウザーが必要で、現在のChromium系ブラウザーとFirefoxが現実的な選択肢です。処理はリモートの仮想マシンでは動きません。

入口はプロジェクトダッシュボードです。新規プロジェクトを選ぶと、空の静的サンドボックス、React 18スターター、Vue 3スターター、WebContainerのNode.js環境から選べます。テンプレートギャラリーにはランディングページ、ダッシュボード、ユーティリティアプリ、コンポーネントのプロトタイプが用意され、どれも扱いやすいファイル構成があらかじめ整っています。新しいワークスペースはブラウザーのトランザクションストレージであるIndexedDBにすぐ作成されるため、ダウンロードもアカウントもサーバーとの往復もなしに最初のプレビューが始まります。プロジェクト名とフォルダーは自由に整理でき、各ワークスペースは互いに分離されています。既存の作業はZIPアーカイブまたはGitHubリポジトリから取り込め、どちらもファイルを適用する前に確認のステップを通ります。初めて使う場合のオンボーディングはこれだけです。ダッシュボードを開き、出発点を選び、編集を始めましょう。

静的エディターはワークスペースをHTML、CSS、JavaScriptのペインに分けます。GB Coderがマークアップを標準準拠のドキュメントシェルで包むため、断片だけで始められます。定型のdoctypeを管理する必要はありません。変更は短い待ち時間を挟んだサンドボックス化されたiframeで評価されるので、速いタイピングでレンダラーが飽和せず、それでいて即座に感じられます。仮想コンソールはlog、warn、error、infoの出力をプレビューの隣に集めるため、開発者ツールを開かずに小さなスクリプトをデバッグできます。外部ライブラリはCDNまたは外部ライブラリマネージャーから追加でき、Tailwind、Bootstrap、アイコンセットといった定番を利用できます。静的プロジェクトはネイティブのESモジュールインポートを使って複数ファイルやディレクトリに育てることもできます。このモードにはパッケージのインストールもバンドルもないという割り切りがあります。学習、視覚的な実験、依存関係のないデモには最適ですが、大規模なフレームワークアプリには向きません。

インターフェースの下には、VS Codeを支えるオープンソースのエディターエンジンMonacoがあります。その系譜は細部に表れます。IntelliSenseによる補完、インラインの型ドキュメント、構文検証、括弧の対応、マルチカーソル編集、設定可能なキーバインドです。TypeScript、JavaScript、HTML、CSS、JSONには言語サービスが提供されるため、ミスはビルド後ではなく入力中に示されます。分割ビューと差分ビューアーも備わり、リビジョンの比較やAIの提案の確認に役立ちます。エディターの周囲には、通常は別のツールが必要になる機能も追加されています。正規表現と大文字小文字の区別に対応したプロジェクト全体の検索と置換、主要なWeb言語のPrettierベースの整形、コマンドパレット、検索できるキーボードショートカット一覧です。自動保存は常時動作し、状態インジケーターで現在のファイルの状況を確認できます。一つひとつは小さな便利機能ですが、組み合わさることでブラウザーエディターにありがちな制約感を取り除きます。

高度なIDEは人を驚かせる部分です。WebContainerはWebAssemblyにコンパイルされた小さなオペレーティングシステムを提供し、ページ内で本物のNode.jsバイナリを実行します。つまりnpm installは実際のパッケージを解決し、npxスクリプトが動き、Vite開発サーバーがローカルポートで起動して統合プレビューに転送されます。ターミナルはANSIスタイルとコマンド履歴を備えた完全なxterm.jsシェルであり、出力を模したパネルではありません。ランタイムがタブ内にあるため、パッケージのインストールやファイル操作でリモートコンテナを消費しません。制約も現実的です。この機能はSharedArrayBufferとクロスオリジン分離に依存し、メモリはブラウザーによって制限され、ネイティブバイナリやDockerイメージは対象外です。しかし通常のnpm依存関係を持つReactやVueアプリなら、作業手順はノートPCで行う場合と同じです。違いは、環境がマシンごとに再構築されるのではなく、プロジェクトと一緒に届くことです。

npm install
npm run dev
# ViteがローカルURLを表示し、GB Coderがそのポートをプレビューに転送します

すべてのプロジェクトにプレビューがあり、それは静的なサムネイルではありません。サンドボックス化されたiframeで動作し、デュアルモニター用に独立したウィンドウへ切り離せ、スマートフォン、タブレット、デスクトップの表示幅を選べます。QRコードを使うと実際のスマートフォンでプレビューを開けるため、デスクトップのウィンドウを縮めるだけでは見落とすレイアウトの問題を発見できます。素早いフィードバックのために、GB Coderは単一ファイルのプロジェクトをURLハッシュで共有URLにエンコードできます。ハッシュはサーバーに送信されないためリンクは自己完結しますが、実用上のサイズ上限があり、複数ファイルのプロジェクトは切り詰めずに拒否されます。そのようなプロジェクトはZIPアーカイブまたはサンドボックスのワークフローで共有します。この区別は重要です。共有リンクは小さなデモのための便利機能であり、アーカイブやリポジトリは実際の仕事を確実に引き継ぐ手段です。

GB CoderのAIは任意機能であり、確認できるように設計されています。GB Assistは質問、エラーの説明、変更計画のためのチャットパネルです。ファイル編集を提案できますが、適用前に差分として表示されます。アシスタントを使うにはプロバイダーとモデルを接続する必要があり、利用時にはプロンプトと選択したコードがそのプロバイダーに送信されます。Build with AIは逆方向の機能です。インターフェースを日常言語で説明すると、構造化されたHTML、CSS、JavaScriptのプロジェクトが返り、エディターの内容を置き換える前に検証されます。Screenshot to Codeは画像を受け取り、キャプチャツールから貼り付けたものでも、マークアップとスタイルの初稿を生成します。音声操作はブラウザーの音声認識を使い、実行、整形、説明、修正、ビルド、エクスポート、パネルを開く、ファイルを切り替えるといったコマンドを実行します。現在はChromeとEdgeが最もよく対応しており、入力式のコマンドボックスも常に利用できます。4つの機能に共通するのは、生成は速いが、採用するかどうかは自分で決めるという点です。

プロジェクトはIndexedDBに自動保存されますが、自動保存はバージョン履歴ではありません。スナップショットは現在のプロジェクト状態に名前付きのチェックポイントを作り、差分ビューアーで復元前の変更を確認できます。ブラウザーの外へ出す必要がある作業には、ZIPエクスポートがディレクトリツリー全体をまとめ、整合性ハッシュを記録します。インポートはドロップされたアーカイブを受け取り、ファイルを書き込む前に構造のプレビューを表示します。GitHub同期は双方向の経路で輪を閉じます。個人アクセストークンで接続し、既存リポジトリを選ぶか新規作成して、プッシュまたはプルします。プッシュは1つのアトミックなコミットとしてまとめられ、変更のないファイルは省略され、途中で動いたブランチは他人の作業を黙って上書きせず競合として報告されます。プルしたファイルはアーカイブと同じ確認・適用フローを通ります。トークンは既定ではセッション限りで、デバイスに記憶するのは暗号化して保存するオプトインです。GitHubとの通信はブラウザーからapi.github.comへ直接行われ、LadeStackが認証情報を保持する必要はありません。

誰かが開けるようになるまで、プロジェクトは完成しません。GB Coderは自分のアカウントのトークンを使ってVercelとNetlifyへワンクリックでデプロイできます。サービスはプロジェクトが静的サイトかViteアプリケーションかを検出し、適切なファイルを送信して公開URLを返します。トークンは自分のものなので、デプロイは自分のアカウントに作成され、その後もそこで管理できます。静的プロジェクトはZIPとして書き出して任意のホストへアップロードでき、GitHub同期を使えばCIパイプラインを動かすリポジトリにワークスペースをつなげられます。どの経路もプロジェクトをGB Coderに囲い込みません。ファイルは標準のHTML、CSS、JavaScript、設定のままです。この移植性こそが要点です。ブラウザーは作業が起きる場所であり、閉じ込められる場所ではありません。

GB Coderは無料で、ログインも登録も不要、広告もありません。既定の姿勢はローカルファーストです。プロジェクトはブラウザーのストレージに置かれ、開くのにLadeStackのアカウントは必要ありません。データがデバイスの外に出るのは、AIプロバイダー、GitHub同期、デプロイ、自分のコードに含めたサードパーティCDNなど、接続機能を選んだときだけです。ローカルファーストはオフライン専用ではないため、この違いは明確にしておく価値があります。HTMLとCSSの反応をすぐに見たい学習者、インストール不要の教室を必要とする教師、リポジトリに預ける前にインターフェースを試作する開発者、小さなユーティリティやデモをすぐ公開したい人に向いています。巨大なモノレポ、ネイティブツールチェーン、Dockerベースのサービス、ブラウザーストレージを禁止する組織にはあまり向きません。AIの利用には選択したプロバイダーの料金がかかる場合があり、デプロイはVercelまたはNetlifyのプランに従います。アプリケーション自体は無料のままで、外部サービスは自分で選べます。

信頼できる手順はこうです。プロジェクトダッシュボードを開き、作業に合ったモードでワークスペースを作ります。まず最小限の見える形を作り、コンソールとプレビューで修正します。静的エディターで本当に解決できない場合にだけパッケージを追加します。デスクトップの細部を磨く前に、スマートフォン幅で試すかQRコードを読み取ります。意味のある節目ごとにスナップショットを取ります。作業に永続的な置き場所が必要になったらGitHubへプッシュするかZIPを書き出します。見せる価値が生まれたらデプロイします。どの手順もローカルインストールを必要とせず、同じブラウザーストレージまたは新しいクローンがあれば別のマシンでも繰り返せます。初めてなら、空の静的プロジェクトと見出し1つから始めてください。以前必要だったセットアップが終わるより早く、最初のプレビューが画面に現れます。プロジェクトダッシュボードは/app/projectsにあります。