もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第5回 難しくなる前にFirebugの活用を学ぶ

この記事を読むのに必要な時間:およそ 3 分

console.log()

ここまでの第4回までの説明の中でも何度か出てきているconsole.log()ですが,これを使うことで,カッコ内に入れた文字や,変数であればその中身などを,コンソール上に表示されることができるようになります。

例えば文字の場合,console.log('文字');と入力することで,コンソール上に『文字』を出力させられます。

console.log()で文字を表示

console.log('文字');

console.log('文字');の結果

console.log('文字');の結果

変数であれば,その変数の中身が表示されます。

console.log()で変数を表示

var a;
console.log(a);

var b = '変数B';
console.log(b);

var c = b;
console.log(c);

var c = '変数Cを変更';
console.log(c);

console.log();に変数を入れた結果

console.log();に変数を入れた結果

変数aのように変数の中身が空の場合は「undefind」が表示されます。

ちなみに,コンソールで入力したコードが間違っていたりしていてエラーだった場合,コンソールでは緑色で「{}」という表示が出ます。

エラーの場合

エラーの場合

ちなみに,上記画像中のエラーの場合,なぜエラーになっているのかわかるでしょうか?

その緑色部分もクリックすることができて,クリックをすると,エラーメッセージなどを見ることができます。

エラー内容が表示される

エラー内容が表示される

実際に先ほどのコードを書いて,エラーメッセージをみるとわかるのですが,divを指定するときにクォーテーション(もしくはダブルクォーテーション)ではさむのを忘れていたため,divという要素を指定するのではなく,divという文字が何を示しているのかわからない状態のためにエラーが起きていたのです。

あらかじめ「var div = 'div'」などを書いておくと動作するのですが,このくらいであれば変数に入れずとも,忘れずにクォーテーション(もしくはダブルクォーテーション)をつけるようにして$('要素')としましょう。

エラーの場合

エラーの場合

$()と$jq()の違い

ここまでいくつかのサイトでjQuerifyを試した人ならすでにお気づきかもしれないですが,サイトによっては,$()で書くのではなく,$jq()で書かないと動作しないという場合があります。これはどうしてかというと,jQueryの他に,JavaScriptのライブラリというのを使っていると,中にはドルマーク($)を使って何かをするという機能がぶつかり合ってしまい,機能しなくなるというときが出てきたりします。prototype.jsというライブラリを使用しているときなんかもそうですが,prototype.jsとjQueryを一つのサイトで同時に使おうとする時なんかに,そのまま$()を使おうとすると,エラーとなってしまい,どちらの機能も使えなくなってしまいます。

この使えなくなるのを防ぐために,jQueryではnoConfict()といぶつかり合いをなくすための機能があります。ドルマーク($)を使って書いていたところを,影響がないように,jQueryと書くようにします。そのjQueryという文字は,変数に入れることで,jQuerifyのように$jq()と書くよううすることができるのです。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/