フェンリル

Developer's Blog

JavaScript がうまく動作しない・・・。という時にありがちなこと


js_bug_photo


こんにちは、フェンリルの青野です。

今回は、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 アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Facebook コメント

コメント

二階堂 将博2014年06月03日 15:59

こんにちは。質問です。

私のホームページにJavascriptをDreamweaver5.5で設定しました。通常Niftyのサーバーをr費用していますが、最近になって別のサーバーに変更しようと同じファイルをべつのサーバーにアップロードをしました。
そうしたら、Javascriptが動作しなくなってしまいました。

原因として、何が考えられますでしょうか?
教えてください。どうかよろしくお願いします。

パソコンアカデミー
   二階堂将博

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。