メモを揉め

お勉強の覚書。

decafjsを使ってappend-cssをアップデートしました

npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。

たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてびっくりしてしまった。
しかもcoffeeだし。

良い機会なので、今使いたいと思っている(自分がかつてそのように作ったと勘違いしていた)設計に書き直した。

decafjs

ライブラリ本体はものすごく小さいのでES2015でまるっと書き直せばよかったけど、テストコードは流用できそうな部分が多かったので、coffee -> ES2015の変換にdecafjsを使ってみた。

www.npmjs.com

使い方は変換したいcoffeeのソースがあるフォルダを指定するだけ。

$ npm install decafjs -g
$ decaf coffee-folder

変換後のコードは基本的に手直しが必要だけど、単純な変換作業は全てお任せできる感じでした。

append-css

HTMLのhead内に<style></style>要素を追加して、新しくCSSルールを定義することができます。
<style></style>要素に対する操作をラップしてくれます。

www.npmjs.com

const AppendCss = require('append-css');

// CSSルールの追加
let appendedRules = new AppendCss(`
  body {
    background: black;
  }
`);

// ルールの無効化
appendedRules.disable();

// ルールの変更
appendedRules.textContent = `
  body {
    width: 100%;
  }
`;

// ルールの有効化
appendedRules.enable();

// ルールの無効化と<style></style>要素の破棄
appendedRules.dispose();

prepend

<style></style>をhead要素の先頭に追加する、prependオプションもあります。

let prependedRules = new AppendChild('body { width: 100%; }', { prepend: true });

insert-css

browserifyで有名なsubstack製のinsert-cssというライブラリがある。

www.npmjs.com

npmのページを見る限り、append-cssは少ないながらもちょびちょびダウンロードされているらしかった。
もしかしたらというか多分ほぼ確実に上述のinsert-cssと間違えてる人がいるだろう。

以前append-cssを始めて公開した時はまだこのinsert-cssの存在を知らず、公開した直後に知った。
だから本当に誓って最初から間違いを狙って作ったわけではない、という言い訳をしてこのエントリーを終わりたいと思います。

append-cssというnpmモジュールを作った

CSSルールを追加するだけのモジュールです。

npm: append-css

インストール

Nodeがあってnpmが使える場合は、

npm install append-css

npmがない場合はgithub: append-cssからダウンロード。

使い方

ブラウザの場合

browser/build.jsを読み込む。

<script src="browser/build.js"></script>
<script>
    var appendCSS = require('append-css');
</script>

Browserifyの場合

requireで読み込む。

var appendCSS = require('append-css');

メソッド

appendCSS(CSS) -> styleElement

新しいCSSルールを追加する。

  • 引数

    • css: string
      追加したいCSSルールの文字列。
  • 戻り値

    • styleElement: HTMLStyleElement
      CSSルールが追加された<style>要素。

var styleEle = appendCSS('body { background: black; }');

appendCSS.reset() -> styleElement

今までappendCSSで追加してきたルールを全て無効にする。

  • 引数

    • 無し
  • 戻り値

    • styleElement: HTMLStyleElement
      次から新しいルールを追加することになる<style>要素。 それまでルールを追加していた<style>要素とは別の新しいインスタンス

var newStyleEle = appendCSS.reset();

用途

ちょこちょこっとスクリプトからスタイルを足したり消したりできます。

CSSファイルに分けると利便性が損なわれるような、ごくごく小さい規模のスタイルをJavaScriptでコントロールしたり、インラインスタイルだと煩雑になってCSSルールで書けたほうが便利な時などに有効かもしれないです。

CoffeeScriptだとCSSが書きやすいのでオススメです。

appendCSS '''
  .hide {
      display: none;
  }
'''

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