コード共有サイトのサンプル一覧!コードを書いて試せるプレイグラウンドをつかえばサンプルコードのデモページが不要になるよね

気軽にコードを書いて試せるってステキですね!
どうも! KUDOH@NIJILOG です。

みなさんプレイグラウンドって御存知ですか?
オンラインエディター上でHTMLやスクリプトなんかを書くと、リアルタイムに結果を表示してくれるアレ。いわゆるコード共有サイトなんて呼ばれたりもします。

プレイグラウンドはコード共有サイトと呼ばれるだけあって、コードを書いて試すだけじゃなくて、そのコードをシェアしつつ実行結果を外部サイトに埋め込んで、その場で試すことも出来るようになってます。

コードを紹介するテクニカル系ブログをやったりすると、そのコードが実際どうなるのかを説明するのに四苦八苦するので、こういう実行結果がそのまま埋め込めるのは素晴らしいと拍手をせざるを得ません。

ということでプレイグラウンドの最新事情をご紹介します。

コード結果ビューをシェアできるプレイグラウンド

JS Bin

jsbin_com

http://jsbin.com/

シンプルなプレイグラウンド。
HTML/CSS/Javascriptに対応でCoffeeScriptやSCSSでの記述もOK。
ログイン不要でコードのシェアが可能。
リアルタイム実行可能。
個人的に一番使いやすいのでオススメです。

プレイグラウンドのブログ掲載サンプル。

JS Bin

jsdo.it

jsdo_it

http://jsdo.it/

国産のプレイグラウンド。
HTML/CSS/Javascriptに対応でCoffeeScriptやSCSSでの記述もOK。
画像アップロードやスマフォプレビューなんて機能もあり。
書いて試すだけでもログインが必須。
リアルタイムでコード結果がでないのが残念。

プレイグラウンドのブログ掲載サンプル。

JSFIDDLE

jsfiddle_net

http://jsfiddle.net/

プレイグラウンドといえばJSFIDDLEというくらいメジャーなサイト。
HTML/CSS/Javascriptに対応でCoffeeScriptやSCSSでの記述もOK。
ログイン不要でコードのシェアが可能。
リアルタイムでコード結果がでないのが残念。

プレイグラウンドのブログ掲載サンプル。

CSSDeck

cssdeck_com
http://cssdeck.com/

ギャラリーありのプレイグラウンド。
HTML/CSS/Javascriptに対応でCoffeeScriptやSCSSでの記述もOK。
コード内容を外部にシェアするにはログインが必要。

プレイグラウンドのブログ掲載サンプル。

CODEPEN

codepen_io

http://codepen.io/

ギャラリーありのプレイグラウンド。
HTML/CSS/Javascriptに対応でMarkdownやSCSSでの記述もOK。
シンプルだけどUIがイマイチで使いづらい。
コード内容を外部にシェアするにはログインが必要。

プレイグラウンドのブログ掲載サンプル。

See the Pen ArKCu by nijilog (@kudohnijilog) on CodePen.

外部公開しないタイプのHTML/CSS/Scriptプレイグラウンド

Liveweave

liveweave_com

http://liveweave.com/

サイトのインターフェースがすこぶるキレイ。
JQueryのようなライブラリは普通につかえるけれど、MarkdownやSCSSのような書き方はできないみたい。
プレイグラウンドには珍しくOAuthでのログインに対応していないのでメンバー登録が必要。

Plunker

plnkr_co

http://plnkr.co/

ギャラリーつきのプレイグラウンド。
複数ソースを管理できる機能が特徴。
いろいろ探してみたけど外部にシェアするボタンが見つからなかったので、このカテゴリにいれてます。

dabblet

dabblet_com

http://dabblet.com/

シンプルすぎるほどシンプル。
正直なところ機能不足過ぎて、ここをあえて使う意味が見出せない。
一応こんなのもあるよということで。

おまけ:HTML/CSS/Script以外のプレイグラウンド

ideone.com

ideone_com

https://ideone.com/

C、Java、Ruby、PHP……
コンパイル型の言語までフォローしているプレイグラウンド。
TCLやSmallTalkのような化石までつかえるみたい。
ちょっとした動作確認で、こんな書き方できたっけ?というときに便利かも。


ほかにもいくつかプレイグラウンドがあったんですが、ひとまずメジャーなものから紹介してみました。
プログラムを覚えるときにもサンプルを見ながらさわって試せると、理解が一層深まること間違いなしなので積極的に使っていきたいですね。