decafjsを使ってappend-cssをアップデートしました
npmにappend-css
というパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。
たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')
してみたら、自分が作ったと思っていたものと随分設計が違くてびっくりしてしまった。
しかもcoffeeだし。
良い機会なので、今使いたいと思っている(自分がかつてそのように作ったと勘違いしていた)設計に書き直した。
decafjs
ライブラリ本体はものすごく小さいのでES2015でまるっと書き直せばよかったけど、テストコードは流用できそうな部分が多かったので、coffee -> ES2015の変換にdecafjsを使ってみた。
使い方は変換したいcoffeeのソースがあるフォルダを指定するだけ。
$ npm install decafjs -g $ decaf coffee-folder
変換後のコードは基本的に手直しが必要だけど、単純な変換作業は全てお任せできる感じでした。
append-css
HTMLのhead内に<style></style>
要素を追加して、新しくCSSルールを定義することができます。
<style></style>
要素に対する操作をラップしてくれます。
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
というライブラリがある。
npmのページを見る限り、append-css
は少ないながらもちょびちょびダウンロードされているらしかった。
もしかしたらというか多分ほぼ確実に上述のinsert-css
と間違えてる人がいるだろう。
以前append-css
を始めて公開した時はまだこのinsert-css
の存在を知らず、公開した直後に知った。
だから本当に誓って最初から間違いを狙って作ったわけではない、という言い訳をしてこのエントリーを終わりたいと思います。
append-cssというnpmモジュールを作った
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ルールを追加する。
var styleEle = appendCSS('body { background: black; }');
appendCSS.reset() -> styleElement
今までappendCSS
で追加してきたルールを全て無効にする。
引数
- 無し
戻り値
- styleElement: HTMLStyleElement
次から新しいルールを追加することになる<style>
要素。 それまでルールを追加していた<style>
要素とは別の新しいインスタンス。
- styleElement: HTMLStyleElement
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
を押すと即座にそのコードを実行出来ます。
実際に自分で試してみた範囲だと、
などを実行出来ます。他にも、
などたくさんのプラグインがありました。(これらは実際に試してないので、シンタックスハイライトだけの物もあるかも)
使い方はcmd + enter
が基本です。
JavaScriptの場合はカーソルのある文やブロック、関数などの単位で実行されます。
行単位で、もしくはより細かく選択した範囲のみを実行することも出来ます。
- 行単位でeval!
- 選択範囲でeval!
実行される範囲(JSの場合)
- カーソルのある行の先頭から、一つの式として値を評価できるところまでを実行する。
行の途中でセミコロンがあるとそれ以降は実行しない。
- forブロック行にカーソルがある場合は、そのforブロックが実行される。
- 関数宣言行にカーソルがある場合は、関数宣言が実行される。
- 関数式の代入でも同じ。
- でも即時関数はなぜかブロック単位で実行されないので、選択してあげる必要がある。
スコープを作るために即時関数で包む用途が多いから、敢えてそうしているのかもしれない。
関数の動作テスト
たとえばRubyやCoffeeScriptなんかだと、
5行くらいの関数を書く→その場で実行してテストする
みたいな使い方を良くします。
とりあえずその場で動作を確認できるので相当便利です。
どこでもプレイグラウンド
cmd + enter
で実行出来るということは、いわば編集中のあらゆる場所でプレイグラウンドできちゃうということです。
ビルトインライブラリや言語の仕様など、しばらく触っていないとうろおぼえなことも多いですよね?そんな時すぐにその場で確認できるので超便利です。
0
の真偽値ってどっちだっけ?って思ったら…
- Rubyの場合
- JavaScriptの場合
って確かめられるぅ。
- JSのオーバーフロー
計算用紙
どこでもプレイグラウンドのように使えるということはすなわち、計算用紙の様に書捨ての計算をどんどん実行できるということです。
電卓のような感覚で気軽に計算できちゃう。
ブラウザの開発ツールみたいに使える
各種ブラウザの開発ツールのように使うことが出来ます。
Light Table内でブラウザを起動することで、そのページ上でJS、Coffeeのコードを実行することが出来ます。
これは次に紹介するWatch機能とも関連する部分です。
Watch(監視)
これはJS、coffeeでしか試してませんが強力な機能です。
おそらくRuby, Clojure, ClojureScriptでも利用出来ます。
基本的にはEvaluationと一緒ですが、あらかじめ選択しておいた範囲を監視して、
その部分が実行されると値を右に表示してくれます。
監視したい範囲を選択後、alt + w
でWatch出来ます。
これをブラウザタブと連携して使うことで、強力なデバッガとして使うことが出来ます。
たとえば、jQueryを使ってるサイトだと… みたいな事もできる。
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のメソッドチェーンの中身も覗くことができます。
これ実はLight Tableに限らず、chromeとかのデバッガでもメソッドチェーンの途中にブレークポイントを設定できるようになるので便利です。
アニメーションの更新やイベントのコールバック関数を監視
Coffee Script
そしてこれらの機能はすべてCoffee Scriptでも使えます(要プラグイン)。
Light TableでEvaluationするコード以外はちゃんとコンパイルしないと当然反映されないので、
gulpのwatchタスクでソースファイルを監視、コンパイルしながら使うと快適です。
プラグインマネージャが便利
AtomやSublimeTextと同じようにプラグインマネージャがあって、簡単にインストール、アンインストール、アップデートができます。
見た目
良い。すごく良い。
好きではない所
- 検索、置換で正規表現が使えない
ぐらいです。
最近の状況
最近は新しいプラグインが増えてない印象。
Swiftのプラグイン、Atomでは速攻で出ましたよね。Light Tableでも出て欲しいナー(自分では作れない)。
追記: 2015/5/27
公式ページのリンクです。