こんにちは、フェンリルの青野です。
今回は、JavaScript 実装中、もしくはテスト中うまく動作しない場合にありがちなことをいくつか挙げたいと思います。
変数名やメソッド名などのスペルミス
なんちゃってブラインドタッチの私は、よくチラチラ手元に目線を落とすためかこのミスが非常に多いです。
「エラーでメソッドないって怒られてる！」となっても落ち着きましょう。
「問題ないはずなのに動かない・・。」問題なければ動きます。深呼吸しましょう。
スペルは正しいですか？
最近私は、「position」が「potision」となっていたり、「test」が「tset」になっていることがありました。
メソッド、関数の引数が正しくない
引数の値が正しくない。
これもよくあることではないかと思います。
回避方法として値のチェックなどを入れましょう。
型は正しいですか？意図しないデータがきていませんか？
Ajax などでの通信タイミングミス
Ajax で API などから取得する場合、必ず取得後に API から取得したデータが必要な処理を入れるようにしましょう。
よく見るものとして、
var APIDATA;
$.ajax({
url: "hoge.php",
cache: false,
success: function(data){
APIDATA = data;
}
});
for(var i=0,l=APIDATA.length;i<l;i++){
//APIDATA を使った処理
}
のようなものがあります。
このようなコードで「うまく動きません」と言われるとちょっと反応に困ります。
なぜか JavaScript は上から順番に動いてくれると思っている方が多い気がします。
そんなことはないので気をつけましょう。
変数のグローバル化
スペルも問題ない。引数も正常。しかしなぜかうまく動かない。
焦っているときは特に気が付きにくいと思います。
ソースコードをじっくりみてみるとうっかり「意図しない変数のグローバル化」をしていたなんてことがあります。
中途半端に動くこともあるので、気がつきにくい度も高いです。
配列の末尾にカンマ
Firefox OK！、Safari OK!、Chrome OK!、IE ・・・ダメ！！
なんてときによくあるのがこのミスかと思います。
しかし最近はエディタ側で配列の末尾にカンマが入っているときに下線などで強調してくれますので、よくしてしまう方はエディタを変えましょう。
それでも動かない
現実逃避しましょう。
明日になれば直っていますので、すぐに帰ったほうがいいです。
というのは冗談ですが、
直らない！分からない！という状態で何時間も画面とにらめっこするよりは、
PC から離れて頭を休めることも重要だと思います。
疲れきった頭では集中力もありませんので、頭をリフレッシュしてから頑張りましょう！
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
