おすすめのオンラインコードエディター

最適なオンラインコードエディターは、用途が次の3つのどれに当たるかで決まります。レンダリング結果を見せるデモ向けのフロントエンドプレイグラウンド（CodePen、JSFiddle）、実際の Node プロセスを必要とするプロジェクト向けのブラウザー内開発環境（StackBlitz、CodeSandbox、Replit）、そしてプロンプトから動くプロジェクトを生成する AI ファーストのビルダー（Bolt）です。

メンテナーから最小限の再現コード（repro）を求められた場面を想像してください。CodePen のリンクを送ったあとで、そのバグは npm install と Vite ビルドを経て初めて発生するものだと気づきます。ちょっとしたバグ報告のはずが、午後をまるごと費やすことになってしまいました。

本記事では、ツールをこの3つのグループに分類し、それぞれを共通の5つの基準で評価します。あわせて、CodePen 2.0 で何が変わるのか、作業内容を他の環境へどれだけ容易に持ち出せるのか、そしてコードが実際にどこへ送られるのかについても解説します。デスクトップエディターや、GitHub Codespaces のようなクラウド VM 型 IDE は対象外とします。

オンラインコードエディターの3つの種類とは？

オンラインコードエディターは、いずれも3つのグループのどれかに属します。ツールで何を実行できるかはグループによって決まるため、まずグループを選び、次にツールを選びましょう。

• フロントエンドプレイグラウンド（CodePen、JSFiddle）： HTML、CSS、JavaScript を記述すると、ライブプレビューでページがレンダリングされます。デモや小規模な再現コード向けに作られています。
• ブラウザー内開発環境： インストール済みのパッケージとビルドステップを伴う、実際の Node プロセスを実行します。StackBlitz は WebContainers を使ってタブ内で Node を実行します。CodeSandbox の Devbox と Replit は、リモートマシン上でプロジェクトを実行します。
• AI ファーストのビルダー（Bolt）： プロンプトからプロジェクト一式を生成し、それを繰り返し改良していきます。

CodePen と CodeSandbox を比較するのは、たいていの場合カテゴリーの取り違えです。CodePen はレンダリングされたデモを共有するためのツールであり、CodeSandbox はビルドステップとインストール済みパッケージを伴うプロジェクトを実行するためのツールです。異なるグループのツール同士を順位付けしても、誤解を招く比較にしかなりません。

CodePen 2.0 で何が変わるのか？

CodePen 2.0 は CodePen をプロジェクト向けツールに近づけますが、プロジェクト向けツールそのものに変えるわけではありません。CodePen のリリース告知記事によると、リリース日は2026年7月23日です。従来の Pen エディターと Project エディターの両方を置き換える単一のエディターに、新機能が追加された形だと説明されています。

従来の Pen に慣れている方にとっての変更点は次のとおりです。

• 1つの Pen に複数ファイル。 以前は3つの Pen をつなぎ、他の2つから JavaScript をインポートしていました。現在は、ファイルを1つの Pen の中に置けます。CodePen の Files ドキュメントによると、無料の Pen は3ファイルまでに制限され、画像などのアップロードしたメディアは格納できません。PRO プランではファイル数の上限が引き上げられ、メディアファイルも使用できます。
• package.json による npm パッケージ管理。 依存関係は、CDN の URL を貼り付けるのではなく、マニフェスト内でバージョン管理されます。ただし、実際にインストールされるわけではありません。CodePen の Packages ドキュメントによると、コンパイラーが package.json を import map に変換し、パッケージは引き続き esm.sh の CDN から読み込まれます。
• コラボレーション。 有料プランでは、他のユーザーを編集者として招待できます。Pen をリアルタイムで共同編集することも、他のメンバーがオフラインの間に変更を加えることも可能です。PRO ユーザーは、別のタブや別のブラウザーで Live Preview を開くこともでき、編集内容に応じて自動で更新されます。どちらの機能についても、CodePen の「What changed」FAQ で説明されています。
• Blocks。 新しい言語やツールは Blocks として組み込まれます。MJML はその一例です。What’s New ページでは、Blocks は CodePen が新しい技術を追加するための仕組みだと説明されています。
• デプロイ。 ワンクリックで Pen を *.codepen.app のサブドメインにデプロイできます。PRO プランでは独自ドメインを割り当てることも可能です。

従来の Pen がなくなったわけではありません。クラシックエディターはこれまでどおり使えます。既存の Pen を 2.0 に変換するかどうかは任意ですが、CodePen は将来的にすべての Pen を 2.0 に変換する可能性があると表明しています。

確認されている 2.0 の機能には、サーバーランタイムもターミナルも含まれていません。Node の開発サーバーを必要とする再現コードには、依然として CodePen は適したグループではありません。ファイル数以外のプランの制限については、CodePen の料金ページを確認してください。

その他のツール

以下では、JSFiddle、StackBlitz、CodeSandbox、Replit、Bolt を、共通の5つの項目で説明します。料金体系はいずれも同様で、無料枠があり、有料プランでは容量とプライバシー関連のオプションが追加されます。詳細は各ベンダーの料金ページを参照してください。

JSFiddle

実行できるもの： ブラウザープレビューでの HTML、CSS、JavaScript。無料枠： 公開スニペットには十分。リポジトリのインポート： リポジトリ中心のワークフローに適したものはなし。埋め込み／共有： URL で共有。ポータビリティ： 各パネルの内容を手作業でコピー。バグが1画面に収まる場合は JSFiddle を使いましょう。

StackBlitz

実行できるもの： WebContainers を介した、ブラウザータブ内での Node.js。StackBlitz のインポートに関するドキュメントでは、Node.js 以外のものは動作しないと注意喚起されています。つまり、PHP、Python、Java などの言語や、専用のサーバープログラムを必要とする MySQL や PostgreSQL などのデータベースは使えません。無料枠： 公開の再現コードには十分実用的。リポジトリのインポート： stackblitz.com/github/{user}/{repo} を開くと、任意の公開リポジトリを読み込めます。StackBlitz のプロジェクトはその後もリポジトリに追従するため、GitHub に新しいコミットをプッシュすると StackBlitz 側にも反映されます。埋め込み／共有： ドキュメントやブログ記事にプロジェクトを埋め込んだり、README に「Open in StackBlitz」ボタンを追加したりできます。埋め込みデモではなく、自社プロダクト内にエディターを組み込みたい場合は別の課題になります。それについては Create your own Code Editor with React で解説しています。ポータビリティ： GitHub から始めた場合は高い。再現コードに npm install が必要な場合は StackBlitz を使いましょう。

CodeSandbox

実行できるもの： Devbox によるリモートマシン上でのプロジェクト実行。無料枠： あり。有料プランではより多くのコンピューティングリソースを利用可能。リポジトリのインポート： CodeSandbox の GitHub 連携ワークフローは変化の途中にあります。Together AI が CodeSandbox を買収し、CodeSandbox の製品を自社プラットフォームへ移行しているため、インポート手順に頼る前に最新のドキュメントを確認してください。埋め込み／共有： 共有ワークスペース。ポータビリティ： プロジェクトの裏にリポジトリがあるかどうかによる。チームで1つのリモート環境を共有する必要がある場合は CodeSandbox を使いましょう。

Replit

実行できるもの： Replit のインフラ上でホストされるワークスペース。Node に限定されません。無料枠： 学習や小規模なプロトタイプには十分。リポジトリのインポート： Replit の GitHub インポートでは、replit.com/github.com/{user}/{repo} で公開リポジトリを開けます。プライベートリポジトリの場合は、replit.com/import で GitHub アカウントを連携します。シークレットや環境変数は引き継がれません。埋め込み／共有： 実行中のアプリへのリンクを共有。ポータビリティ： エクスポートしない限り、プロジェクトは Replit 上に置かれたまま。バックエンドが JavaScript でない場合は Replit を使いましょう。

Bolt

実行できるもの： Bolt が生成したプロジェクトは、WebContainers 上でブラウザー内で実行されます。Bolt は StackBlitz が開発しており、その技術スタックは オープンソースのリポジトリで説明されています。無料枠： プロンプトを試すには十分。リポジトリのインポート： 主要なワークフローではない。埋め込み／共有： ホストされたプレビュー。ポータビリティ： 残しておきたいものを作る前に、Bolt のエクスポート機能を確認すること。プロンプトからアプリを作るビルダーではなく、本格的なエディターに組み込まれた AI を求めている場合は、AI-Powered Code Editors: Are They Actually Improving Developer Productivity? を参照してください。

ロックインとエクスポート

作業内容がすでに GitHub リポジトリにあれば、ツールから簡単に離れられます。作業内容がホストされた Pen、Fiddle、AI ビルダーのプロジェクトとしてしか存在しない場合は、身動きが取れなくなります。

StackBlitz の GitHub インポートでは、リポジトリがコードの正本であり続けるため、ここで紹介した中で最も乗り換えやすいツールです。ホスト上にしか存在しないプロジェクトは、取り出すのに手作業が必要です。CodePen のエクスポートでは、ソースファイルと最後のビルドの出力を含む .zip が得られますが、ローカルで作業を続けるには自分でビルドツールを用意する必要があります。

重要な作業であれば、リポジトリから始めるか、早い段階でリポジトリにプッシュしましょう。ポータブルなプロジェクトは、特定のツールに依存しないプレーンなファイルだけで構成されます。

{
  "name": "portable-repro",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build" },
  "devDependencies": { "vite": "^8.3.0" }
}

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Portable repro</title></head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

const app = document.getElementById('app');
app.textContent = `Rendered at ${new Date().toISOString()}`;

この3つのファイルを GitHub にプッシュすれば、StackBlitz の /github/ URL からプロジェクトを開けます。ローカルでも npm install && npm run dev で実行できます。

プライバシーとオフラインでの利用

本記事で紹介したオンラインコードエディターは、いずれも他者のサーバー上で動作します。コードがブラウザーのタブ内で実行される場合、変わるのは実行場所であって、保存場所ではありません。StackBlitz はタブ内でコードを実行しますが、プロジェクトが自分のリポジトリにない限り、プロジェクトは StackBlitz 自身のサービスに保存されます。

コードを自分のマシンの外に出してはならない場合、タブ内で実行されるものも含め、どのオンラインエディターも適切なツールではありません。ローカルファイルをちょっと編集したいだけなら、How to use Chrome as a Code Editor and Debugger で、DevTools の Workspaces を使ってローカルフォルダーを直接読み書きする方法を紹介しています。

どのオンラインコードエディターを使うべきか？

あらゆる面で優れたオンラインコードエディターはありません。タスクに応じて選びましょう。

ツールが属するグループによって、何を実行できるかが決まります。そのグループ内でどのツールを選ぶかによって、どれだけ容易に乗り換えられるかが決まります。次に後で必要になるものを作ろうとタブを開いたときは、まず GitHub リポジトリに置き、それを開けるエディターを選びましょう。

よくある質問

CodePen 2.0 は package.json 内のパッケージに対して npm install を実行しますか？

いいえ。CodePen 2.0 は Pen が使用しているパッケージを検出し、編集可能な package.json に一覧表示します。その後、CodePen のコンパイラーがこのファイルを import map に変換し、各パッケージを esm.sh の CDN から読み込みます。実際には何もインストールされず、node_modules フォルダーも存在しません。独自の import map を追加することもでき、その場合は自動生成されたエントリーよりも自分のエントリーが優先されます。

StackBlitz は Firefox や Safari で動作しますか？

はい、ただし制限があります。StackBlitz と Bolt を支えるランタイムである WebContainers は、Chrome および Chromium ベースのブラウザーで完全に動作します。Firefox はベータ版としてサポートされており、Safari もバージョン 16.4 以降でベータ版としてサポートされています。Firefox と Safari はいずれも、WebContainers に必要なクロスオリジン分離モードを完全にはサポートしていないため、エディター内のサーバープレビューでサードパーティのアセットがブロックされることがあります。プレビューを別ウィンドウで開けば、この問題を回避できます。

StackBlitz でプライベートな GitHub リポジトリを開けますか？

StackBlitz の有料メンバーシップがある場合のみ可能です。公開リポジトリは stackblitz.com/github/USER/REPO で無料で開けますが、プライベートリポジトリのインポートはメンバーシップ限定の機能です。通常の /github/ リンクでは書き込み権限なしでリポジトリが読み込まれ、最初に保存した時点でページが再読み込みされ、自分用のコピーに切り替わります。stackblitz.com/fork/github/USER/REPO のように GitHub パスの前に /fork を付けると、最初から新しいコピーとして開けます。