読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

Light Tableについて

Light Table使ってます。

Light Tableってどのくらい使われてるんだろう?
twitterのタイムラインを見てるとSublime TextとかAtom関連のつぶやきは良く見かけるけど、Light Tableの事はほぼ見ない印象。

なのでLight Tableのいいところを紹介します。

Evaluation(即時実行)

これがLight Table最大の特徴だと思うんですけど、エディタの中でcmd + enterを押すと即座にそのコードを実行出来ます。
実際に自分で試してみた範囲だと、

  • Java Script
  • Coffee Script
  • Ruby
  • HTML & CSS(タブの中でブラウザが起動できる、ライブリロード)

などを実行出来ます。他にも、

などたくさんのプラグインがありました。(これらは実際に試してないので、シンタックスハイライトだけの物もあるかも)

使い方はcmd + enterが基本です。
JavaScriptの場合はカーソルのある文やブロック、関数などの単位で実行されます。
eval_07_01
行単位で、もしくはより細かく選択した範囲のみを実行することも出来ます。

  • 行単位でeval!
    eval_07_02
  • 選択範囲でeval!
    eval_07_03
実行される範囲(JSの場合)
  1. カーソルのある行の先頭から、一つの式として値を評価できるところまでを実行する。
    行の途中でセミコロンがあるとそれ以降は実行しない。
    eval_01_01
    eval_01_02
  2. forブロック行にカーソルがある場合は、そのforブロックが実行される。
    eval_02
  3. 関数宣言行にカーソルがある場合は、関数宣言が実行される。
    eval_03
  4. 関数式の代入でも同じ。
    eval_04
  5. でも即時関数はなぜかブロック単位で実行されないので、選択してあげる必要がある。
    スコープを作るために即時関数で包む用途が多いから、敢えてそうしているのかもしれない。
    eval_05
関数の動作テスト

たとえばRubyCoffeeScriptなんかだと、

5行くらいの関数を書く→その場で実行してテストする

みたいな使い方を良くします。
とりあえずその場で動作を確認できるので相当便利です。

eval_08

どこでもプレイグラウンド

cmd + enterで実行出来るということは、いわば編集中のあらゆる場所でプレイグラウンドできちゃうということです。
ビルトインライブラリや言語の仕様など、しばらく触っていないとうろおぼえなことも多いですよね?そんな時すぐにその場で確認できるので超便利です。

0の真偽値ってどっちだっけ?って思ったら…

って確かめられるぅ。

  • JSのオーバーフロー
    eval_11
計算用紙

どこでもプレイグラウンドのように使えるということはすなわち、計算用紙の様に書捨ての計算をどんどん実行できるということです。
電卓のような感覚で気軽に計算できちゃう。

ブラウザの開発ツールみたいに使える

各種ブラウザの開発ツールのように使うことが出来ます。
Light Table内でブラウザを起動することで、そのページ上でJS、Coffeeのコードを実行することが出来ます。
これは次に紹介するWatch機能とも関連する部分です。

Watch(監視)

これはJS、coffeeでしか試してませんが強力な機能です。
おそらくRuby, Clojure, ClojureScriptでも利用出来ます。

基本的にはEvaluationと一緒ですが、あらかじめ選択しておいた範囲を監視して、
その部分が実行されると値を右に表示してくれます。

監視したい範囲を選択後、alt + wでWatch出来ます。

これをブラウザタブと連携して使うことで、強力なデバッガとして使うことが出来ます。 watch_01

たとえば、jQueryを使ってるサイトだと… watch_02 みたいな事もできる。

ltWatch関数(名前はなんでも良い)を作っておくデバッグ方法

あらかじめグローバルにltWatchという関数を定義する、
名前はLight TableのWatchで使うからltWatch

下のようなコードを別ファイルにして読み込ませておくと便利、他のコードより先に読み込ませる。
jQuery等他のライブラリを拡張する場合はそれより後)

ltwatch.js

 

function ltWatch() {

}

jq-ltwatch.js

 

//jQuery用
jQuery.fn.extend({
  ltWatch: function () {
    return this;
  }
});

空の関数を宣言しておいて、Watchしたいタイミングで中身を実装、Evaluationすることで上書きします。

監視したい対象のオブジェクトなり、変数なりをltWatch関数に渡しておけばこれを監視できます。
thisの値を監視するのも便利です。
jQueryメソッドチェーンの中身も覗くことができます。 watch_03
これ実はLight Tableに限らず、chromeとかのデバッガでもメソッドチェーンの途中にブレークポイントを設定できるようになるので便利です。

アニメーションの更新やイベントのコールバック関数を監視 watch_04

Coffee Script

そしてこれらの機能はすべてCoffee Scriptでも使えます(要プラグイン)。
Light TableでEvaluationするコード以外はちゃんとコンパイルしないと当然反映されないので、
gulpのwatchタスクでソースファイルを監視、コンパイルしながら使うと快適です。

watch_05

プラグインマネージャが便利

AtomやSublimeTextと同じようにプラグインマネージャがあって、簡単にインストール、アンインストール、アップデートができます。

見た目

良い。すごく良い。

好きではない所

ぐらいです。

最近の状況

最近は新しいプラグインが増えてない印象。
SwiftプラグインAtomでは速攻で出ましたよね。Light Tableでも出て欲しいナー(自分では作れない)。

追記: 2015/5/27

公式ページのリンクです。

Light Table