Edited at

ブラウザ上でJavaScriptの実行ができるサービスまとめ

More than 5 years have passed since last update.


動機

ぼくがいま勉強しているJavaScriptのフィードバックを得る際に、コードそのものをWeb上で公開できるサービスはないかと探していたところいつくか見つかったので、まとめ。


Web上でJavaScript実行できる利点

すべてのサービスに共通して、シェアができることが一番の特徴。

自分のパソコンをリモートして見てもらっているような分かりやすさがある。

また、わざわざjsファイル、cssファイルなどを開かさせる手間もなく、一度に俯瞰できるのがコード書く人にもフィードバックする人にも優しい。


JSFiddle

jsfiddle-logo.png

JSFiddle.png

http://jsfiddle.net/


特徴


  • HTML・CSS・JavaScriptと、その表示結果(Result)を画面いっぱいに表示してくれる(他サービスと比べて随一の見やすさ)

  • Fork、ベースバージョン管理ができる

  • TidyUpで自動整形可能、JSHintでJavaScriptのチェックが可能

  • Collaborationで同時編集が可能(試してない)

  • CSSはSCSS、JavaScriptはCoffeeScriptにも対応(Languagesメニューで選択可能)

  • Normalized CSSを標準装備(Fiddle Optionsメニューで選択可能)

  • Body tag、DTD指定、Frameworkの<script>属性を設定可能(Fiddle Optionsメニューで選択可能)

  • また、外部ファイルの読み込みも可能(External Resourcesメニューで選択)



  • console.logは標準で出力しないのでFirebugを使うしかないが、エラーは出力されない

  • スマートフォンプレビュー対応

  • 対応Frameworkの多さ


    • Mootools

    • jQuery

    • Prototype

    • YUI

    • Dojo

    • Processing.js

    • ExtJS

    • Raphael

    • RightJS

    • Three.js

    • Zepto

    • Enyo

    • Shipyard

    • Knockout.js

    • The X Toolkit

    • AngularJS

    • Ember

    • Underscore

    • Bonsai

    • KineticJS

    • FabricJS

    • qooxdoo

    • D3

    • CreateJS

    • WebApp Install

    • Thorax

    • Paper.js

    • React

    • svg.js

    • Minified

    • jTypes

    • Lo-Dash

    • Brick




jsdo.it

jsdoit_logo.png

jsdo.it.png

http://jsdo.it/


特徴


  • みんな大好き(?)面白法人カヤック謹製

  • よりシェアに特化し、他の方が書いたソースを見るのが目的ようなトップページの作り

  • GitHubのようにREADMEまである(Markdown記法可)

  • JavaScript記法は、Coffee Script・JSX・TypeScriptに対応(たぶんすごい)

  • HTMLはEmmetに対応のよう(すごく良い!)

  • CSSはSCSS・Compass・LESSに対応(ほぼ対応してるのでは?)

  • 外部ファイル(画像など)も添付できる

  • Gistに連携も可能

  • スマートフォンプレビュー対応

  • ライセンス表記もMITを始めとしたものを選択可能

  • 対応Framework


    • jQuery 2系

    • jQuery 1系

    • jQuery migrate developer

    • jQuery migrate

    • jQuery UI

    • jQuery Mobile

    • jQuery Easing

    • jsdoitController

    • enchant.js

    • tmlib.js

    • Prototype

    • Raphael

    • SWFObject

    • Processing.js

    • MooTools More

    • MooTools core without compatibility

    • Dojo Toolkit

    • three.js

    • Cannon.js

    • CreateJS

    • YUI

    • ExtJS

    • Sencha Touch

    • JSDeferred

    • Socket.IO

    • Angular.js

    • Underscore.js

    • Backbone.js

    • Knockout.js

    • jPayer

    • Bootstrap 3系

    • Bootstrap 2系

    • Arctic.js

    • OrbiterMicro




JS Bin

jsbin.png

JSBin.png


特徴


  • すっきりとしたインターフェイスで、ボタンによって表示・非表示ができる

  • 自分的に最大の特徴が、Consoleのエラーがそのまま確認できる!

  • Gist連携可能

  • 対応FrameWork


    • jQuery 2系

    • jQuery 1系

    • jQuery UI

    • jQuery Mobile

    • Bootstrap Latest

    • Bootstrap 2.3.2

    • Prototype

    • script.aculo.us

    • YUI

    • MooTools

    • Dojo

    • Dijit

    • Kendo UI Core

    • Kendo UI Q1・A3

    • QUnit

    • Zepto

    • Angular.js

    • React

    • Enyo

    • Bluebird

    • Promise

    • Q

    • RSVP

    • Autoprefixer

    • Backbone

    • MarionetteJS

    • Bonsai

    • CoffeScript

    • Ember.js

    • ES5 shim

    • ext-core

    • Foundation

    • Handlebars.js

    • Knockout

    • Less

    • Lo-Dash

    • Modernizr Development

    • Detectizr

    • Prefixfree

    • Processing

    • D3

    • Highcharts

    • Raphael

    • Sammy

    • Sencha Touch

    • Traceur

    • TwitterLib

    • Underscore

    • CanJS

    • Three.js

    • HTML5 shiv

    • Lungo

    • Polymer

    • Font Awesome

    • Paper.js

    • OpenUI5

    • GSAP

    • Phaser




おすすめ

どれも用途によって使い分けるのが良いのかもしれない。

ある程度出来上がったもののフィードバック、また至れり尽くせりな機能を使ってコラボレーションなんかしたい方はJSFiddle。

積極的にシェアしてSNSのように使ったり、機能面でも痒い所に手が届いてるjsdo.it。

製作途中や初心者の方にはJS BinのConsole標準搭載は大きい。

スニペット・コードが散らばってしまうのが怖いけれど、Gist連携ですべてのサービスから集めてしまえば大丈夫そう。


総評

対応Frameworkが多すぎて疲れた。

JSFiddleは無難なところ、jsdo.itはUI系のものが充実、JS Binは多種多様なものに対応してる感じ。

2割ぐらいしか名前知らないので定かではない。

本当は

http://jsperf.com/

なんかも入れて、Web上のコーディング関係のサービスのまとめにしたい。

気が向いたら追記編集。

諸先輩方、他におすすめのWebサービスありますでしょうか?