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

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

関連記事

Git

Git で管理を始める時に実行するコマンド

あるディレクトリを Git でバージョン管理する場合に、最初に実行しているコマンドを紹介します。 (1) Git で管理するディレクトリに移動 $ cd path/to/dir (2) Git管理開始 …

Vim

Emmet-vim の HTML5用スニペットを変更する

Vim エディタには、HTML & CSS の入力補助を行う mattn/emmet-vim というプラグインがあります。 これを使うと、例えば ul>li*5 と入力した直後に、Ctr …

データベース管理ツール Adminer

目次1. Adminer とは?2. Adminer の特徴A. たった1つのPHPファイルで動作するB. MySQL の多くの機能に対応しているC. 対応データベースが多いD. ユーザーインターフェ …

Anki

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

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

Anki

Anki: 学習の流れを図にしました

Ankiにおける学習の流れを図にしました。