2015年12月24日

森島

【怖くないJavaScript + jQuery】デバッグのススメ　～なぜ動かないのか調べる～

マークアップ

facebook
twitter

jQueryのコードを見よう見まねで書いてはみるものの、動かず、そして結局諦める。初心者の方ならよくあることかと思います。今日は「なぜ動かないのか」を調べる方法を書こうと思います。デバッグの方法ですね。書いたコードのどこがおかしいのか調べて、直してみましょう。

1 方法は2つ
2 例を置いておきます

方法は2つ

デバッグの方法ですが、2つあります。アラートで出してしまうか、コンソールを使用する方法です。私は、一か所だけちょっと調べたい時とかはアラート、複数個所あったりする時はコンソール、と使い分けています。　

01.アラート

alert('アラートでたよ！');

1	alert('アラートでたよ！');

アラートデモ

02.コンソール

console.log('コンソールでたよ！')

1	console.log('コンソールでたよ！')

コンソールデモ

アラートはぽんと出てくるので分かりやすいですが、コンソールは、各ブラウザの開発者ツールやfirebugなどの「コンソール」窓を確認すると現れます。

firefox – firebug

Chrome

これらを一体どうやって使うかというと、例えば取得してきた値がどうなっているか調べたり、if文のどっちを通過しているか調べたり…想定していた動きになっているかひとつひとつ調べていきます。

例えばこんな感じ。

$(function(){
	
	var i = 0;
	
	alert(i);
	
});

$(function(){

var i = 0;

alert(i);

});

変数「i」の値をアラートするという処理なので、こちらの表示結果は「0」になります。「”」で囲むと単純に文字列がアラートされるので「alert(‘i’)」としてしまうと結果は「i」になってしまうので注意してくださいね。ちなみに文字列と繋げてアラートさせたい場合は、「alert(‘iの値は’+ i + ‘です！’)」と+を使用して繋げることができます。これで「iの値は0です！」とアラートされます。
もちろん、アラートで書いているものはconsole.logでも置き換えられます。

次は、if文のどちらを通過しているか調べてみましょう。

$(function(){
	
	var i = 0;
	
	if(i==0){
		alert('ifを通過')
	}else{
		alert('elseを通過')
	}
	
});

$(function(){

var i = 0;

if(i==0){

alert('ifを通過')

}else{

alert('elseを通過')

}

});

さて、なんてアラートされるでしょうか。

デモで確認

デモの直後に正解を書いててアレなんですが、正解は「ifを通過」と表示されます。もしiが1であれば、elseを通過と表示されます。
何かコードを書いてみて動かない時は、本当に想定した値になっているか、一度調べてみましょう。

例を置いておきます

最後に、どんな風に使うものか、例を置いておきますね。

結局windowの高さいくつになってるの

$(function(){
	
	var windowHeight = $(window).height();
	
	console.log('windowの高さは' + windowHeight + 'px');
	
});

$(function(){

var windowHeight = $(window).height();

console.log('windowの高さは' + windowHeight + 'px');

});

デモで確認

今iの値はいくつ？

$(function(){
	
	var i = 0
	
	console.log(i);
	
	i+100;
	
	console.log(i);
	

});

$(function(){

var i = 0

console.log(i);

i+100;

console.log(i);

});

デモで確認
（思わせぶりな書き方ですが、実は代入がうまくいっていなくて結果はどちらも0になります。本当は2回目を i = i+100 にしないといけません）

今のURL

$(function(){
	
	var href = location.href
	
	alert(href)
	
});

$(function(){

var href = location.href

alert(href)

});

デモで確認

執筆者：森島 [ WEBデザイナー ]

8bit デザイナーです。デザイン・マークアップ・映像制作など幅広く担当しています。

WordPress

お問い合わせフォーム作成WPプラグインに返信機能を追加！

弊社が提供しているWordPressプラグイン『Easy Form Maker』に返信機能が追加されました！『Easy Form Maker』は日本語で制作した、お問い合わせのWordPressプラグインです。 ※返信機能については有料版のみの提供となります今回はその返信機能についてご紹介します。基本的な使い方については、こちらの記事をご覧ください。目次1 こんなことで困っていませんか？2 実際の画面を見てみよう2.1 お問い合わせの一覧2.2 全体2.3 お問い合わ […]

2026年2月26日

マークアップ

SharePoint クラシックUIの通知機能をPower Automateで再現する

SharePoint サイトをモダンUIへ移行すると、よく耳にするのが「クラシックUIにあった通知機能を使いたい」という声です。しかし、モダンUIにはクラシック時代のような「標準の通知機能」が用意されていません。そこで活躍するのが「Power Automate」です。クラシック通知の代わりとして、リストの変更を自動で検知し、メールで知らせる仕組みを簡単に構築できます。本記事では、クラシックUIの通知に近い形で、Power Automate を使ったメール通知フローを作成す […]

2026年2月12日

Webサイト制作

制作会社が考える、WordPressとオリジナルCMSの選定ポイント

弊社では「WordPress」を使った制作と、弊社のオリジナルCMSツール「ProG（プログ）」を使った制作の、いずれについても多くのご相談をいただいています。それぞれにメリットがある一方で、運用時に気を付けるべき点もあり、サイトの目的や運用方法によって向き・不向きがあります。この記事ではそれぞれの特徴を整理しながら、WordPressとオリジナルCMSを併用できるケースについてもご紹介します！目次1 WordPressを使用するメリット1.1 多機能で自由度が高い1. […]

2026年2月4日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。