GitHubを始める為に - その7.スニペットやライブラリの動作を試すなら jsbin

jsbin


前回までで以下3つのカテゴリに分けてGitHub関係の基礎的な事を学んできました。

  • Git
  • GitHub
  • Gist

さて今回は少しGitHubの本筋とは逸れますが、前回の[その6.スニペットを管理しやすい GistBoxから引き続きスニペットの話題になります。

ネットや書籍で勉強していて得たスニペットをGistに保存する前に、どんな挙動をするプログラムなのか試してみたいですよね。
生のHTMLやCSS、JavaScriptならまだローカルで動かせそうなものですが、プリプロセッサで書かれたコードはそんなに簡単に試せません。
そんな時に便利なWeb applicationのおはなしです。

jsbin

jsbinというサイトがあります。

主な仕様はFeature list - JS Bin Documentationに記載されているのですが、目立った特徴を以下にまとめます。

UI

以下のタブがあって、それぞれ表示/非表示が可能です。

  • HTML
  • JavaScript
  • CSS
  • Console
  • Output

Live reload

このjsbinのサイト上のエディタでリアルタイムにコードの結果が反映されるだけでなく、ブログ等のサイトに貼られたシェア先でもコードを修正&反映が即座に行えます。 これは、挙動理解にすごく良いですね。

JS Bin on jsbin.com

Gist import

Gists: how to import a gist - JS Bin Documentation

Gistからのインポートも簡単です。
説明ページにも書いてある通り、GistのURLの一部を以下のように変更するだけです。
github -> jsbin

https://gist.github.com/remy/271333

https://gist.jsbin.com/remy/271333

と、思ったのですが、実際に試してみると上手く行かず、

sadfsdfsafsdsdsadf

と表示されるのみ。

調べてみたら、同様の事象が起きていたみたいで、まだ解決してないのかな。。?

github.com

Gist export

Gists: how to export to a gist - JS Bin Documentation

Gistへのエクスポートは出来ました。

ここを選択して、

この様に匿名のGistが作成されるので、このままシェアするか、自分のGistに加えたければForkをしましょう。

Languages

利用できる言語は以下になります。

カテゴリ 言語
HTML系 HTML, Markdown, Jade
JavaScript系 JavaScript, Processing, JSX(React), Traceur, TypeScript, CoffeeScript, ES6/Babel, LiveScript, ClojureScript
CSS系 CSS, Less, Myth, Stylus, Sass, SCSS