動機
ぼくがいま勉強しているJavaScriptのフィードバックを得る際に、コードそのものをWeb上で公開できるサービスはないかと探していたところいつくか見つかったので、まとめ。
Web上でJavaScript実行できる利点
すべてのサービスに共通して、シェアができることが一番の特徴。
自分のパソコンをリモートして見てもらっているような分かりやすさがある。
また、わざわざjsファイル、cssファイルなどを開かさせる手間もなく、一度に俯瞰できるのがコード書く人にもフィードバックする人にも優しい。
JSFiddle
特徴
- 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
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
特徴
- すっきりとしたインターフェイスで、ボタンによって表示・非表示ができる
- 自分的に最大の特徴が、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は多種多様なものに対応してる感じ。
２割ぐらいしか名前知らないので定かではない。
本当は
http://jsperf.com/
なんかも入れて、Web上のコーディング関係のサービスのまとめにしたい。
気が向いたら追記編集。
諸先輩方、他におすすめのWebサービスありますでしょうか？