Webブラウザ上でHTML/CSS/JavaScriptを書いて試すことができるサービスの比較

はじめに

Webブラウザ上で、HTML/CSS/JavaScript を書き、それをその場で実行したり保存したりするサービスがいくつもあります。それぞれのサービスについての違いを書きたいのですが、おおまかな部分は他に情報がありますので、ここでは私が気になった部分のみを書きます。ほとんどメモです。

サービス比較

CodePen

• URL: https://codepen.io/
• コミュニティー型（作品を投稿するというイメージ）

利点

• 作成したコードをブログへ埋め込むのがラク。
• Web Storage が使える。

欠点

• 独自に利用したい画像ファイルなどをアップロードして使う場合は有料
• 作ったものをプライベートにするのは有料

jsdo.it

• URL: http://jsdo.it/
• コミュニティー型（作品を投稿するというイメージ）

利点

• 独自に利用したい画像ファイルなどをアップロードして使うことができる。
• 作った作品を プライベートにすることができる。
• Web Storage が使えない？

欠点

• アカウント登録に、必ず他のサービスのアカウントを使わなければいけない。

JSFiddle

• URL: https://jsfiddle.net/

利点

• アカウント登録しなくても使える。

欠点

• 独自に利用したい画像ファイルなどをアップロードして使うことはできない？
• 作ったものをプライベートにできない。
• Web Storage が使えない？

Observable

• URL: https://observablehq.com/
• 上の3つとはタイプが異なるサービスですが、同じようなことができます。
• セルというボックスを1つの単位とし、その内に JavaScriptコードを書くと、すぐ上に評価結果が表示されます。
• JavaScript を使ってグラフを描きたい場合に向いています。
• HTML や CSS も書ける（少し変則的にはなりますが）柔軟性の高いサービスです。

利点

• 記述した JavaScriptコードの評価結果をすぐに表示させることができます。
• npm のモジュールを使うことができます。
• Markdown形式で文章を書くことができます。

欠点

• 便利な反面、その便利な機能を使うための特有の記述方法がいくつもあり、それを覚える必要があります（他のサービスでは使えない知識になるでしょう）。特有の記法を使うということで、他のサービスへの移植性は低くなります。
• せめて、作成したデータを（テキストとして）エクスポートできれば移行が少しラクになりますが、そのような機能は用意されていません。

まとめ

それぞれ一長一短ありますが、書き捨てるようなものなら JSFiddle、それなりに保存しておきたいものを書くなら jsdo.it がよさそうです。

グラフを描きたい場合には、Observable もよいでしょう。

また、この手のサービス上で「思った通りにコードが動かない」現象が起きた場合、「サービス独自の環境が原因なのか」「自分のコードが原因なのか」特定するのが難しいため、自分の管理している Webサーバー環境があるのならそちらで動かすほうが良いように思います。