HTML / CSS / JavaScript の Playground は JSFiddle などが有名ですが、結構前から CodePen と言うサービスが普及しているようで。最近になって知りました。
Qiita でも最近記事内に CodePen を埋め込めるようになったりしています。
類似サービスのまとめ記事
CodePen は Playground なので、大規模なプログラムを書くのには適していませんが、ライブラリの書き味とかを試すのに手元で環境を構築することなく開始できるのがよいところです。最近は、Web フロントエンドのメジャーなフレームワークは環境構築が一仕事になっており、余暇でやろうとしてもコードを書き始めるまでに力尽きることが多いため、お手軽さ重要です。
1枚の HTML ファイルに CSS/JavaScript を混ぜて書くぐらいの感じで*1、ライブプレビュー付きでコードを書けます。Popular なライブラリはクイックに追加できるようになっています。
CDN に配置されたライブラリの検索も楽ですので、好みのライブラリ・バージョンを使えます。
トランスパイラも選べます。
JavaScript のデバッグは Chrome の DevTools が使えますが、console.log で Console ウィンドウに情報を出せます。オブジェクトは JSON の Pretty print で出力されるので見易いです。 これなら、DevTools が使えない iPad の Safari や Chrome でもライブプレビュー、デバッグ出力を見ながらコードを書けますね*2。
数年前、Meteor がまだ勢いがあった頃に HTML5 Canvas を駆使するメディア系ライブラリ KineticJS を使ってダイヤグラムエディタのおもちゃを書いてたのですが、その UI 部分を CodePen で動くようにしてみました。
See the Pen Konva-dia by kondoumh (@kondoumh) on CodePen.
KineticJS をフォークした Konva.js を使いました。
CoffeeScript 久々に触りました。コードエディタが一画面なので、これぐらいの長さのコードになるとちょっとつらいですね。リファクタリングも手打ちですし。
CodePen ではこういった Pen と呼ばれるコード片の他に、Project を生成して Web IDE としても使える模様です。
追記) CodePen で Picked Pens 入りしてました。
