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

# <i class="fa fa-check-circle-o"></i> 動機
ぼくがいま勉強しているJavaScriptのフィードバックを得る際に、コードそのものをWeb上で公開できるサービスはないかと探していたところいつくか見つかったので、まとめ。

# <i class="fa fa-check-circle-o"></i> Web上でJavaScript実行できる利点

すべてのサービスに共通して、シェアができることが一番の特徴。
自分のパソコンをリモートして見てもらっているような分かりやすさがある。
また、わざわざjsファイル、cssファイルなどを開かさせる手間もなく、一度に俯瞰できるのがコード書く人にもフィードバックする人にも優しい。

# <i class="fa fa-check-circle-o"></i> JSFiddle
![jsfiddle-logo.png](https://qiita-image-store.s3.amazonaws.com/0/36099/21e02ded-a65b-367a-d639-37cc78e29b79.png)
![JSFiddle.png](https://qiita-image-store.s3.amazonaws.com/0/36099/1c4e629a-0edc-7515-4d49-6be6f2c0b7b1.png)

http://jsfiddle.net/

## <i class="fa fa-check-square-o"></i> 特徴

- 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メニューで選択）
  - Firebugを組み込みたいならhttps://getfirebug.com/releases/lite/latest/firebug-lite.js
- 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

# <i class="fa fa-check-circle-o"></i> jsdo.it
![jsdoit_logo.png](https://qiita-image-store.s3.amazonaws.com/0/36099/91974b65-6ab4-c9f7-2bcc-4416ded4c11c.png)
![jsdo.it.png](https://qiita-image-store.s3.amazonaws.com/0/36099/8e1cffd8-3fe2-65f5-9f41-459f4b1f46b4.png)

http://jsdo.it/

## <i class="fa fa-check-square-o"></i> 特徴
- みんな大好き(?)面白法人カヤック謹製
- よりシェアに特化し、他の方が書いたソースを見るのが目的ようなトップページの作り
- 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

# <i class="fa fa-check-circle-o"></i> JS Bin
![jsbin.png](https://qiita-image-store.s3.amazonaws.com/0/36099/6de42d81-a79f-3e40-87b5-62fd8047490f.png)
![JSBin.png](https://qiita-image-store.s3.amazonaws.com/0/36099/b5ae115e-21a2-afbb-963c-465b025d4664.png)

## <i class="fa fa-check-square-o"></i> 特徴
- すっきりとしたインターフェイスで、ボタンによって表示・非表示ができる
- 自分的に最大の特徴が、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

# <i class="fa fa-check-circle-o"></i> おすすめ
どれも用途によって使い分けるのが良いのかもしれない。
ある程度出来上がったもののフィードバック、また至れり尽くせりな機能を使ってコラボレーションなんかしたい方はJSFiddle。
積極的にシェアしてSNSのように使ったり、機能面でも痒い所に手が届いてるjsdo.it。
製作途中や初心者の方にはJS BinのConsole標準搭載は大きい。

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

# <i class="fa fa-check-circle-o"></i> 総評
対応Frameworkが多すぎて疲れた。
JSFiddleは無難なところ、jsdo.itはUI系のものが充実、JS Binは多種多様なものに対応してる感じ。
２割ぐらいしか名前知らないので定かではない。

本当は
http://jsperf.com/
なんかも入れて、Web上のコーディング関係のサービスのまとめにしたい。
気が向いたら追記編集。

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