2013年7月1日月曜日

連載:ちょっとディープなXPages 第2-1回~JavaScriptをもっと知ろう

みなさん!XPages開発していますか!?
最近は、JavaScriptの重要性が上がってきていますね。
ご存じのとおり、XPagesでもサーバー、クライアント側ともにJavaScriptを使うのでXPagers(エックスページャーズ→XPages開発者→今作った言葉(*ノω・*)テヘ)は必携の技術です。
でも、JavaScriptってなんとなくで使ってませんか?
JavaScriptは簡単に使える言語だけでなく、高度な使い方を覚えると非常に強力で、開発効率が向上します。
また、JavaScriptでは気をつけておきたい定石もありますので、しっかり身につけておきましょう。
なお、サンプルコードはサーバーサイドJavaScript(SSJS)を想定していますが、ログの出力以外に関しては、全く同じです。

JavaScript禁忌技

まずは、JavaScriptで行なってはならないことから。やるなよ、絶対にやるなよ。

等価演算子に"=="は使わない

ifの条件分岐でよく使う等価比較演算子は、2種類あります。"=="と"==="です。"=="だけ使ってませんか?
さてその違いですが・・・実際に試してみましょう
var a = 1,
    b = "1";
print( a == b ); // true
print( a === b ); // false
この結果から分かる通り、
"=="は両端が違う型の場合は、右辺を左辺と同じ型になるように自動型変換して比較します。
"==="は、自動型変換しません。厳密等価演算というやつですね。
"=="のほうが何やら楽…と思われるかしれませんが、ソースコードを他の人や後から見たときに、この比較が型変換を意図したものかどうか、判断することができません。
型変換する場合は"=="を使わず、明示的に変換してから"==="で比較するのがマナー。
var a = 1,
    b = "1";
print( a === (+b) ); // true
型変換については後ほどまとめてやります。

配列を for-in で回さない!

配列を巡回して処理することはよくあります。で、for( var i in array) とよくやりがちですが、これはNGです。
JavaScriptにおける for...in は配列のアイテムを反復するのではなく、オブジェクトのメンバーを反復するステートメントです。
var a = ["A","B","C"];
//オブジェクトaにメソッドを追加
a.doubleJoin = function(){
    return a[0] + a[0] + a[1] + a[1] + a[2] + a[2];
}
for( var i in a){
    print(a[i]);
}
// 結果
// A
// B
// C
// function(){…}  ←想定外の出力
for...inを見たら、即座に頭の上に"!"が出てくる位に気を付けてください。
もちろん、オブジェクトのメンバーを反復する意図として使うのは可能です。
しかし、forにはまだ気を付けなくてはならないことがあります。

forの書き方によってはパフォーマンスに大きな影響あり!

↓のソースには問題があります。
for(var i=0; i < array.length; i++){
    //何らかの処理
}
このどこがいけないのか、と思うかもしれません。動作としては問題ありませんが、パフォーマンスに影響します。
問題は、2番目の項[i < array.length]にあります。この項は反復のたびに実行される部分で、array.lengthが毎回評価されるため、パフォーマンスに影響します。
array.lengthを先に確保することで回避できます。下記のように書き換えるだけで、SSJSでは処理速度に約2倍の差が出ることを確認しています。
var array = [], i = 0;

//ここで配列 arrayに大量に要素が入れられると仮定

for(var i = 0, max = a.length; i < max; i++){
    //反復ごとの処理
}
配列の要素の数が少ない場合は微々たる差ではありますが、癖をつけておくと良いでしょう。
また、コールバック関数を利用して、この反復を強制させる手段もありますが、それは後日にしたいと思います。

まだまだ続くよ

JavaScriptについてはまだまだ書き足りませんねぇ。
何回かに分けて書いていくのでお楽しみに!

0 件のコメント:

コメントを投稿