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 で直前のコミットを元に戻す方法について解説しています。

Evernote

Evernote の Template 機能 2018

2018年9月 Evernote に追加された「テンプレート」機能について紹介します。 目次1. Evernote のテンプレート機能2. テンプレートの保存方法その1: オンラインギャラリーからテン …

Java

ysoserial をビルドする

目次1. はじめに2. 前提とする環境3. ysoserial をビルドする1) Java を導入2) Maven を導入3) ysoserial の導入とビルド4) コマンド実行例4. おわりに 1 …

Linux

ウェブサーバー(Linux) 上で特定のクライアントとの通信を記録してWindowsで内容を確認する

ウェブサーバー(Linux) 上で特定のクライアントとの通信を記録してWindowsで内容を確認する方法について説明します。

Windows

Putty でスクリーン上のやりとりをログファイルに保存する方法

目次1. はじめに2. Putty でログをとる手順3. ログファイルが既に存在していた場合の挙動設定4. おわりに 1. はじめに PuTTY とは、Windows用のターミナルエミュレータです。 …