linuxBean14.04(58)Object Playgroundをローカルにインストール

前の関連記事：linuxBean14.04(57)Eclipseプラグインispaceのコールグラフのエッジの意味を調べる

JavaScriptのプロトタイプチェーンを図示ツールObject PlaygroundはObject Playground: The Definitive Guide to Object-Oriented JavaScriptでオンラインで使えますがローカルにもインストールできるのでLinuxBeanにインストールします。

gitでObject Playgroundリポジトリのダウンロード

まずはNode.jsのインストールを行います。

Node.jsのインストールはlinuxBean14.04(9)node.jsとBracketsのインストールでやったとおりです。

nvm install stableを実行するとv0.12.7がインストールされました。

次にgitリポジトリをローカルにクローンします。

gitはlinuxBean14.04(24)git-guiとgitkのインストールでgit-guiをインストールしたときに既にインストール済です。

git clone https://github.com/jamesshore/object_playground


gitコマンドを実行したフォルダにobject_playgroundフォルダができているはずです。

Object Playgroundをビルドする

実行前にまずはビルドが必要ですが、そのビルドの前にファイル名の変更が必要です。

object_playground/node_modules/karma/lib/launchersにあるBase.jsをbase.jsに変更します。

object_playground/node_modules/karma/lib/reportersにあるBase.jsをbase.jsに、Multi.jsをmulti.jsに、Progress.jsをprogress.jsに変更します。

これらの変更はlinuxBeanでは大文字と小文字のファイル名を区別するシステムのために必要な変更です。

ファイルマネージャでobject_playgroundを開いてそこでツール→現在のフォルダを端末で開く。

nvm use stable

これでまずnode.jsを起動します。

./jake.sh karma


Karmaのアドレスが表示されたらビルド完了です。

KarmaというのはJavaScriptのテストツールだそうです。

Object Playgroundを起動する

Object Playgroundを起動、、、テストツールKarmaを使っているせいか、テストする、というようです。

object_playgroundフォルダでTerminalを起動してまずはnode.jsを起動してからjake.shを実行します。

nvm use stable

./jake.sh run


これでObject Playgroundが起動したのでブラウザでhttp://0.0.0.0:8080にアクセスするとJavaScriptのオブジェクトビジュアライザーが使える状態になりました。


Object Playgroundと同じページが表示されます。

ネット接続を切断した状態では上の動画とコメント欄は表示されませんでした。

オフラインでオブジェクトビジュアライザーが使えるようになるまでは結構待たないといけませんでした。

マシンの性能の問題なのか、切断されたネット上のものにアクセスしにいっていて遅いのかははっきりしませんでした。

user_code.jsを編集して「this」に代わり「context」を使う

Object Playgroundのコメントに作者がやり方を書いてくれていたものです。

グローバルスコープのthisと区別してグラフが描画できるようになります。

object_playground/srcにあるuser_code.jsを編集します。

 exports.evaluate = function evaluate(code) {
  /*jshint evil:true, newcap: false */
  var context = {};
  Function(code).call(context);
  return context;
 };

 exports.evaluate = function evaluate(code) {
  /*jshint evil:true, newcap: false */
  var context = {};
  eval(code);
  return context;
 };

「this」オブジェクトのノードからのグラフが表示されなくなりました。

コードの最後の行の「this」を「context」に書き換えるとプロトタイプチェーンが図示されました。


グラフの表示はuser_code.jsを編集する前と変化なく「this」オブジェクトのノードから始まっています。

グラフの「this」が「context」に代わったことでグローバルスコープのthisとの区別ができるようになりました。

これによりJavaScriptプロトタイプチェーン(1)プロトタイプチェーン図示ツールで使ったthis - JavaScript | MDNの例でグローバスコープを明示的にthisで指定してもグラフには出現させなくできます。
明示的に書いたグローバルスコープのthisはページをリロードしないとリセットされないことに注意が必要です。

参考にしたサイト

Object Playground: The Definitive Guide to Object-Oriented JavaScript
JavaScriptのプロトタイプチェーンを図示してくれるツールObject Playground。

jamesshore/object_playground · GitHub
Object Playgroundのソースのgitリポジトリ。

Karma - Spectacular Test Runner for Javascript
Object Playgroundで使われているテストツールKarma。

Travis CI Fails with Cannot find module ./launchers/base · Issue #1112 · karma-runner/karma · GitHub
karmaのオリジナルはbase.jsだそうです。Base.jsとなったのはなぜでしょう。

次の関連記事:linuxBean14.04(59)jsdocのインストール