Tools

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

投稿日:2016年11月18日 更新日:

はじめに

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

サービス比較

CodePen

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

利点

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

欠点

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

jsdo.it

サービス終了

? このサービスは、2019年10月31日に終了しました。
jsdo.it
jsdo.it
  • URL: http://jsdo.it/
  • コミュニティー型(作品を投稿するというイメージ)

利点

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

欠点

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

JSFiddle

JSFiddle
JSFiddle

利点

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

欠点

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

Observable

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

利点

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

欠点

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

まとめ

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

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

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

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

英辞郎

英辞郎 on the WEB はどこに行った?

最近、株式会社アルクのURL https://www.alc.co.jp/ は完全にコーポレートサイトになったようです。英辞郎 on the WEB は全く表示されなくなり、英単語を調べることはできま …

Vim

Windows: gVim からクリップボードを利用する(キーボードのみ利用)

Windows: gVim からクリップボードを利用する(キーボードのみ利用)方法を紹介します。

GIMP

GIMP: 縦横比を指定して切り抜く

GIMPで縦横比を指定して切り抜く手順を紹介します。

Anki

Anki カードの背景をストライプにする

Anki カードの背景をストライプにする方法について説明します。

Evernote

【Evernote】検索でヒットするはずのノートが、ヒットしない場合の対処法

【Evernote】検索しても、特定のノートがヒットしない場合の対処法について説明します。