Closure Compiler ADVANCED最適化のためのプロパティアクセス方法変更で忘れがちなところ - ニシキヘビってかわいいよね、実際みたことないけど。

JavaScriptを外部公開するにあたって、TODOとか妙なコメントや若干怪文書めいてるJSDocを消したいわけで、そういうものがないか探していると、それ以外にもファイル連結、コード圧縮や難読化を行うminifyと呼ばれることをするツールがあるようですね。

いろいろあるようですが、コマンドラインから実行できる手軽さと、超大手Googleのツールという安直な理由から、Closure Compilerをつかうことにしました。このminifyツールではADVANCED最適化と呼ばれる、変数・プロパティ名変更やコードのインライン化を行うことで大胆な最適化をする機能があるようです。使わないのはもったいないですし使いましょう。

だいたいのことは以下の記事に詳しく書かれており、参考にさせていただきました。

『トップページ - Closure Compilerを使う！ - アットウィキ』

『Closure Compiler の ADVANCED_OPTIMIZATIONS の使い方 - Qiita』

『JavaScriptをClosure CompilerのADVANCEDモードに完全対応させるその方法！ - Cybozu Inside Out | サイボウズエンジニアのブログ』

一通り読んで、頭ではわかったつもりで実際にやってみると、そんな行数のないコードのはずなのに手こずってしまいました。苦労ってやってみて初めてわかりますね、うん。

手こずったところの殆どが「プロパティへのアクセス方法」です。

1. 実は文字列アクセスでした

var なにかのObject  = function(引数_プロパティ1, 引数_プロパティ2...) {

    this.プロパティ1 = 引数_プロパティ1;
    // 2, 3とつづく...

};

で、縦にずらっと並べるのがめんどいからと、JSONレスポンスを元に初期化するものだったので、横着して下のような書き方をしてました。

var なにかのObject = function(args){

    var prop_name, prop_names = ['プロパティ1', 'プロパティ2', ... ];

    for (var i = 0; i < prop_names.length; i += 1) {
        prop_name = prop_names[i];
        this[prop_name] = args[prop_name];
    }

};

文字列アクセスをしていますが、IDEを見た時「色がついてないから文字列じゃないな!」と勘違いし、そのままにしていました。他の場所ではドットで呼び出ししているので、もちろん動きません。素直に書きましょう。

var なにかのObject  = function(args) {

    this.プロパティ1 = args['プロパティ1'];
    // 2, 3とつづく...

};

2. 非ADVANCED最適化ライブラリの引数に設定オブジェクトパターンで値を渡しているところ

JQueryの ajax() を使ってるところがありまして、こんな感じで書いていました。

$.ajax({
    url: 'http://apiへのurl',
    method: 'GET',
    data: {'わたす': val_1, 'データ': [val_2, val_3, val_4, ...], ...},
    contentType: 'application/json',
    dataType: 'json',
    traditional: true
}). // あとdone()とかいろいろ

「dataのオブジェクトは文字列だし大丈夫かな?」とおもって動かすと、APIから期待通りのレスポンスがこない… それでクエリストリングを見てみると、リストの値がtraditional=falseの時の形式。設定オブジェクトのtraditionalがリネームされていたことが原因でした。プロパティ名は全部文字列にしましょう。

$.ajax({
    'url': 'http://apiへのurl',
    'method': 'GET',
    'data': {'わたす': val_1, 'データ': [val_2, val_3, val_4, ...], ...},
    'contentType': 'application/json',
    'dataType': 'json',
    'traditional': true
}). // あとdone()とかいろいろ

3. 非ADVANCED最適化ライブラリのAPI戻り値がオブジェクトのところやJSONを扱うところ

クライアントサイドデータベースにTafyDBをつかっていまして、データベース初期化にJSONレスポンスをそのままつっこんでました。 DBから返ってくる値はもちろんJSONのキーがそのまま使われているので、文字列アクセスに変更しましょう。

他の非ADVANCED最適化ライブラリのAPIが返すオブジェクトのアクセスでも同様のことが起きるので、文字列アクセスにしましょう。

ここの説明は他の記事で書かれていることの繰り返しですね…

他にも思い出したり、ひっかかったら追加しようと思います。れっつ、みにふぁい。