何はともあれHello World!｜jQuery入門2

2009/05/1

おはようございます。きんくまです。

早速今回はjQueryを使って「Hello World!」を表示させましょう。

■デバッグ環境を整える
まずはつくり始める前に、デバッグ環境を整えましょう。
JavaScriptはデバッグを含めた統合された開発環境は特に用意されているわけではありません。自分で好きなように作っていくことになります。

★エディタ
エディタはなんでもよいです。以前にJavaScriptエディタについてまとめたので、参考にしてみてください。
⇒JavaScriptエディタを比較してみた

★デバッグ
他に選択肢はいろいろあるかもしれませんが、メインをFirebugとします。
FirefoxのプラグインFirebugのインストール
⇒Firebug

デバッグの流れとしては、私は現在こんな風にしています。
Firefox（Firebug）→IE6→IE7→その他のブラウザ→IE8
左の方が動作確認の頻度が高いです。FirefoxとIE6が大丈夫だったら、その他のブラウザでもだいたい動くと思います。ただし、最終的には対象ブラウザで確認が必要となります。
IE6はJavaScriptの実行速度が他と比べると極端に遅かったり、CSSの挙動が他と違ったりしているので、早いうちから確認をしておく方がよいです。最終的な確認でやってしまうと、バグの原因をつきとめるのにものすごく時間がかかってしまうと思います。

IEのテスト環境なのですが、こんなものがあります。
⇒IE6までのスタンドアロン版（browsers.evolt.org: / ie / 32bit / standalone）
⇒IE8まで同時確認できるIETester
⇒IE1, 2, 3, 4, 5, 6, 7, 8の確認が同時にできる -Internet Explorer Collection（coliss）

私は上の2つのものを使っています。スタンドアロン版はIEのfilter機能（透明機能で使います）が使えなかったりするのですが、動作は安定しているので落ちることは少ないです。IETesterはfilter機能が使えるのですが、ときどきエラーが出て動かなくなります。IETester自体を再起動かければまた動きだすのですが、毎回だと面倒です。これを使い分けてます。
Internet Explorer Collectionは試していないので、使用している方がいれば使用感などをコメント欄にお気軽に書いてくださいね。

あと有料なのですがさきほどのIETesterの作者さんのサイトではIE版のFirebugと同じような機能をもつものを公開しています。
⇒DebugBar

また本家FirebugではIEでも使えるFirebug Liteを公開しています。便利なんですが、使用感は「重い」です。
⇒Firebug Lite

以上が開発環境です。

次から早速jQueryを使ってみましょう。

■jQueryをとってくる
jQuery公式サイトに行ってメニューのDownloadからCurrent Releaseをクリックしてソースをダウンロードしてきます。
⇒jQuery公式サイト

このとき
・jQuery Minified
・jQuery Regular
とありますが、上のMinifiedは改行などをとりのぞいて圧縮をかけたファイル。下はソースコードを読める状態のファイルです。実案件ではMinifiedを使って、ソースを研究したいときはRegularを使うとよいでしょう。

それで、とってきたファイルが
jquery-1.3.2.min.js
となっていますが、ファイル名を変更して
jquery.js
としておきました。

■Hello World!
さきに今回作るファイルをお見せしておきます。いきなりアラートが出るんですが気にしないでください。
⇒Hello World jQuery
ソースはまとめておきました。
⇒ソースファイル一式

■文字コード
文字コードはutf-8にします。BOMをつけないutf-8Nの方がよいみたいです。

■jQueryをhtmlに取り込む
headタグ内に以下のように記述します。

<script src="js/jquery.js" type="text/javascript"></script>

自作のスクリプトファイルを「sample.js」として追記します。なのでまとめるとこんな感じ

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/sample.js" type="text/javascript"></script>

sample.jsに次のようにかきます。

$(function(){
  alert('Hello World!');
});

ブラウザで読み込めばalertダイアログが出ると思います。

$(function(){
 ここにソースをかく
});

この間にはさまれた部分は、ブラウザがhtmlを解釈してDOMが生成された状態で初めて実行されます。というか、解釈がおわらないとDOM操作が不安定になるので、ここから書き始めましょう。

さきほどのアラートでもデバッグしていけるのですが、アニメーションさせたときの値が毎回ダイアログが出てくると不便です。なのでブラウザに出力させましょう。こんな感じにします。

$(function(){
  console.log('Hello Firebug!');
});

これをFirefoxで開いて、リロードしたあと、F12をおしてみてくださいもしくは右下のFirebugのマークでもよいです。

そして「コンソール」のタブをクリックするとこんな感じに出力されています。

このconsole.logなんですが、IEではさきのDebugBarが入っていない状態ではエラーとなってしまいスクリプトがうまく動作しません。なのでIEで動かないなあと思ったときはconsole.logが入っていないかどうかチェックしましょう。

それで、console.logは毎回書くのが面倒なんでFlashと同様にtraceという関数を用意してデバッグしたいと思い追記しました。

function trace(s){
  var logstr = '';
  if(typeof(s) == 'object'){
    for(var i in s){
      logstr += i + ' : ' + s[i] + 'rn';
    }
  }else{
    logstr = s;
  }
  console.log(logstr);
};

このtrace文は配列やObjectを投げてあげると中身を1階層目まではきます。

■リロードについて
あと、よくひっかかったのがページのリロードについてです。F5を押したりリロードボタンを押すだけだと、うまく更新してくれない場合がありました。なんだかJSをキャッシュしているみたいです。なので、ControlキーとF5を同時に押してキャッシュを無視してリロードするようにするときちんと更新してもらえます。

これで、準備がひとまず整いました。