Help us understand the problem. What is going on with this article?

【Web開発】ブラウザさえあれば使える無料オンラインエディター紹介・比較 2019

More than 1 year has passed since last update.

イントロ

開発環境の構築はなかなか上手くいかないこともあり、時間を取られたり意欲を削がれる可能性がある。特に近年では Webpack が普及し、複雑なビルドプロセスを構築する必要も生じる。複数のデバイスで開発したいとなると、それだけ構築にかかる時間も増える。

ここで紹介するのはブラウザさえあれば使えるオンライン上のWeb開発環境の中で、React や Vue といったUIフレームワークで開発するのに向いているものである。手元で使用する PC の OS を気にする必要もない。手軽に環境を整えられるため、アイデアを試したり、プロトタイプを作成するのに役立つだろう。ここで紹介するサービスはすべて作成したアプリケーションをURLで共有したり埋め込み (embed) ができたりするため、ブログで解説記事を書くときにも便利だろう。

機能比較

※ 2019/07/22 時点

CodeSandbox (Client) StackBlitz CodeSandbox (Container) Glitch JSFiddle CodePen
ビルド実行場所 ブラウザ ブラウザ サーバー サーバー サーバー? サーバー?
オフライン実行
フォルダー/複数ファイル
Webpack プロジェクト
Webpack のコンフィグカスタマイズ - -
NPM パッケージ追加
サーバーへターミナルでアクセス
プライベートプロジェクト ✅ (有料) ✅ (有料) ✅* ✅ (有料)
コラボレーション機能 ✅(有料)
デプロイ機能 Zeit, Netlify Firebase Zeit, Netlify
GitHub 連携
URLでシェア可能
埋め込み

*アプリケーション自体は公開される

各サービスの特徴

CodeSandbox

メジャーなフレームワークのテンプレートが用意されており、すばやく開発を始められる。他の人が CodeSandbox で作成したプロジェクトを Fork できるのも便利。Visual Studio Code と同じ Monaco というエディターをベースにしているため、オートコンプリート機能が充実しており、同様のショートカットを使えるので普段 VSCode を使用している人には使いやすいだろう。ただし拡張機能は使えない。

本質的に異なる2種類の開発環境が用意されている。

  • Client Environment
    • ビルド処理を含め完全にブラウザ内で実行される
    • いったんエディターを開けばインターネットに繋がらなくなっても開発を続けられる(ただし NPM パッケージの追加には当然インターネット接続が必要)
    • Webpack のコンフィグを自由にいじることはできないが、TypeScript、Scss、Pugなどの形式には対応している
    • 用意されているテンプレートは以下

client.png

  • Container Environment
    • そのプロジェクト専用のサーバーが提供され、ターミナルを通じて自由にコマンドを実行できる
    • ビルドはサーバー側で実行される
    • APIキーなど公開してはいけないデータを安全に環境変数として設定できる
    • 用意されているテンプレートは以下

container.png

また、Zeit や Netlify にワンクリックでデプロイできるのも特徴である。個人的には Prettier でコードフォーマットができるのもありがたい。

無料アカウントではプライベートプロジェクトが作れない、50個までしかプロジェクトを作れないなどの制限がある。

StackBlitz

CodeSandbox と同じく Monaco ベースのエディターであり、CodeSandbox の Client Environment とほぼ同じ機能であるが、対応しているフレームワークは少なめであり、他人が作成したアプリを一覧で見ることもできない。エディターに関する設定も少なめである。

stack.png

動作が速いことを謳っているが、筆者には CodeSandbox と比較して大きな違いは感じなかった。無料アカウントでも無制限にプロジェクトを作れるという点ではアドバンテージがある。

他にも、Firebase に一瞬でデプロイできるらしい。

Glitch

仕組みとしてはほぼ CodeSandbox の Container Environment と同じであり、プロジェクトごとにサーバーが用意され、ターミナルでアクセスすることができる。こちらもシークレットなデータを .env ファイルに安全に書いておける。ただし、エディターに関する細かい設定はあまりできない。

特徴は作成したアプリケーションをそのままサイトとして公開できる(というか自動で公開される)点である。ただし、作成したアプリを担当しているサーバーはアクセスがないと自動的にスリープする(アクセスされるとまた起きる)などの制限がある。

また、無料でプライベート(非公開)なプロジェクトを作成できる。ただし、エディターにアクセスできないだけでアプリ自体は公開されるので注意されたい。

Glitch.com のサイト自体が Glitch によって動作しているらしい。

JSFiddle & CodePen

この2つサービスは HTML、JS、CSS のコードを手軽にシェアできるためかなり前から広く使用されている。機能的にもかなり似通っている。シンプルさにフォーカスしているため、HTML、CSS、JS それぞれ1つのファイルしか書けない。TypeScript、Babel、Sass などの compiler が使用できる。

CodeSandbox や Glitch とは異なりビルドプロセスに関してほとんど意識する必要はなく(その代わりカスタマイズもできないが)、CDN で公開されている JS や CSS ならば追加することができる。

細かな違いとしては、以下がある。

  • JSFiddle
    • Vue、React などのテンプレートが用意されている
    • JS が <head><body>DOMContentLoaded イベントの後かどこで実行されるかを指定できる
    • Tab キーを押しても Space に変換されない
  • CodePen
    • Pug、Markdown が使用できる
    • Bourbon のような Sass ライブラリが追加できる

ちなみに CodePen には2017年に Project Editor という新しいエディターが追加された。複数のファイルが使えるなど便利ではあるが、無料アカウントでは1つの Project しか作成できないためここでは比較の対象としない。

righteous
主にJavaScriptとPythonを使う。 あまり日本語に翻訳されていない情報を中心に紹介する。 分かりやすい説明、正確な用語、曖昧さのない文章を心がける。 オブジェクト指向より関数型に興味がある。 ホビープログラマーなのでプロの方からすると突っ込みどころがあるかもしれないですがご指摘いただけるとありがたいです。 感想をコメントやツイッターなどで書いていただけると喜びます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away