自転車通勤には良い季節ですね。どうも、Lekumo キャンペーンビルダー開発担当の間です。

• Lekumo キャンペーンビルダー
  http://www.sixapart.jp/lekumo/cb/

さて、tech talk blog が Six Apart ブログに統合されてから初めての投稿になります。前々回、前回と、Lekumo キャンペーンビルダーの開発において、Closure Tools を使用しているということで、それにまつわる記事を書かせて頂きました。もちろん、今回もしつこく Closure Tools にまつわるお話です :)

Google Chart Tools は皆さんご存知ですよね。Google が提供しているグラフ作成ツールで、これを利用すれば簡単に見栄えの良いグラフを作成することができます。

• Google Chart Tools
  http://code.google.com/intl/ja/apis/chart/

Lekumo キャンペーンビルダーでも一部このツールを使い、グラフを表示している画面があるのですが、その画面の作成時に軽い罠にはまってしまいました。

Lekumo キャンペーンビルダーでは、Area Chart を使用しています。Area Chart のページには、下記のようなサンプルコードが載っていて、これを基に実装を進めました。

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}

で、問題なく実装を終えたのですが、問題が出たのは Closure Compiler を用い、ADVANCED_OPTIMIZATIONS オプション付きでコードの最適化を行った時です。

というのも、ADVANCED_OPTIMIZATIONS オプションは強力で、あらゆる変数名、プロパティ名をリネームしてコードを圧縮します。もちろん、同一コード内では整合性が保たれる為に問題ないのですが、外部コード上にある関数を呼んだり、最適化したコード上にある関数を外部コードから呼ぶ場合に問題が発生します。リネームされることにより、外部コードとの整合性が取れなくなってしまうのですね。この為、コンパイルは成功するものの、実際に動かしてみると「そんなプロパティねーよ！」とあちこちで言われる羽目になります（泣）

この問題を回避する為には、外部コード上のプロパティなどをドットシンタックスで呼ぶのは止めて、文字リテラルに書き換える必要があります。上記のサンプルコードを書き換えると、以下のようになります。

google.load("visualization", "1", {packages:["corechart"]});
google.['setOnLoadCallback'](drawChart);
function drawChart() {
var data = new google['visualization']['DataTable']();
data['addColumn']('string', 'Year');
data['addColumn']('number', 'Sales');
data['addColumn']('number', 'Expenses');
data['addRows']([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
'title': 'Company Performance',
'hAxis': {title: 'Year',  titleTextStyle: {color: 'red'}}
};
var chart = new google['visualization']['AreaChart'](
document.getElementById('chart_div')
);
chart['draw'](data, options);
}

黄色でハイライトした部分が書き変えたところです。Compiler は "文字列" を勝手に書き換えることはありませんので、これで外部コードとの整合性は保たれることになります。

最初、私はこの問題の原因になかなか気付くことができませんでした。もちろん、上記のようなコーディングルールについては知っていたにもかかわらずです。最適化した後のコードの可読性が著しく低いことも原因の一つですが、何より、ネット上で見つけた情報を何とはなしにコピー＆ペーストし、ちょこっと手を加えて、動いてしまえばそれで良し、としていたところが最大の要因でしょう。それが何者であるのか、もっときちんと理解して、自分の言葉に置き換えてコードを書いていれば、もっと早くに原因に気付けていたと思います。

まだまだ精進が足りないなぁと、改めて思わされた一件でした。