ラボラジアン はじめに
Webブラウザ上で、HTML/CSS/JavaScript を書き、それをその場で実行したり保存したりするサービスがいくつもあります。それぞれのサービスについての違いを書きたいのですが、おおまかな部分は他に情報がありますので、ここでは私が気になった部分のみを書きます。ほとんどメモです。
サービス比較
CodePen
- URL: https://codepen.io/
- コミュニティー型（作品を投稿するというイメージ）
利点
- 作成したコードをブログへ埋め込むのがラク。
- Web Storage が使える。
欠点
- 独自に利用したい画像ファイルなどをアップロードして使う場合は有料
- 作ったものをプライベートにするのは有料
jsdo.it
サービス終了
🔗 このサービスは、2019年10月31日に終了しました。
- URL: http://jsdo.it/
- コミュニティー型（作品を投稿するというイメージ）
利点
- 独自に利用したい画像ファイルなどをアップロードして使うことができる。
- 作った作品を プライベートにすることができる。
- Web Storage が使えない？
欠点
- アカウント登録に、必ず他のサービスのアカウントを使わなければいけない。
JSFiddle
利点
- アカウント登録しなくても使える。
欠点
- 独自に利用したい画像ファイルなどをアップロードして使うことはできない？
- 作ったものをプライベートにできない。
- Web Storage が使えない？
Observable
- URL: https://observablehq.com/
- 上の3つとはタイプが異なるサービスですが、同じようなことができます。
- セルというボックスを1つの単位とし、その内に JavaScriptコードを書くと、すぐ上に評価結果が表示されます。
- JavaScript を使ってグラフを描きたい場合に向いています。
- HTML や CSS も書ける（少し変則的にはなりますが）柔軟性の高いサービスです。
利点
- 記述した JavaScriptコードの評価結果をすぐに表示させることができます。
- npm のモジュールを使うことができます。
- Markdown形式で文章を書くことができます。
欠点
- 便利な反面、その便利な機能を使うための特有の記述方法がいくつもあり、それを覚える必要があります（他のサービスでは使えない知識になるでしょう）。特有の記法を使うということで、他のサービスへの移植性は低くなります。
- せめて、作成したデータを（テキストとして）エクスポートできれば移行が少しラクになりますが、そのような機能は用意されていません。
まとめ
それぞれ一長一短ありますが、書き捨てるようなものなら JSFiddle、それなりに保存しておきたいものを書くなら jsdo.it がよさそうです。
グラフを描きたい場合には、Observable もよいでしょう。
また、この手のサービス上で「思った通りにコードが動かない」現象が起きた場合、「サービス独自の環境が原因なのか」「自分のコードが原因なのか」特定するのが難しいため、自分の管理している Webサーバー環境があるのならそちらで動かすほうが良いように思います。
