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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

ICTリテラシー

WinMerge で Excel(Word,PowerPoint,PDF)ファイルを比較する

WinMerge で Excel ファイルや Wordファイルを比較する方法について説明します。

Chrome

Chrome のデベロッパーツールでは、リダイレクト直前のレスポンスボディが見られない

目次1. はじめに2. Chrome のデベロッパーツール3. Chrome のデベロッパーツールのバグ?4. Firefox の開発ツールなら大丈夫5. おわりに6. 参考 1. はじめに Web …

Anki

Anki: 次回の間隔[日]を算出するページを作りました

Ankiアプリにおける、次回の間隔[日]を算出するページを作りました。

Anki

Anki: JavaScript を使って「解答を表示」ボタンを押す

Anki: JavaScript を使って「解答を表示」ボタンを押す方法を紹介します。

Anki

Ankiのフィールドに表を記述する

Ankiのフィールドに表を記述する。