院試勉強に取り掛からなければならないのに、最近jQueryというライブラリにはまっています。以前から注目はしていたのですが…。jQueryとは、JavaScriptのコードをより効率的に記述するためのツールキット（ライブラリ）の一種で、様々な機能が利用できるのが魅力です。

今回は、拙サイトのトップページで行っているAjax処理をjQueryを使って書き換えました。

実際に見ていただいても、内部処理が変わっただけなので変化はほとんど分からないかもしれません（笑）。もし何か違いを感じるとすれば、XMLデータとして受け取った情報を表示する際にフェードイン効果を追加した程度です。

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
var outputDiv = "#divNews";
// 初期化
$(function(){
    $.ajax({url:'2009.xml', type:'get', dataType:'xml', timeout:5000, error: getError, cache:false, success:setIndex });
});
// エラー処理
function getError(XHR, status, errorThrown){
    $(outputDiv).html("<p>XMLデータ読み込みの際、エラーが発生しました。エラータイプ : " + status + "</p>");
}
// XMLデータの表示
function setIndex(data){
    $(outputDiv).hide();
    $(outputDiv).empty();
    $(data).find("item").each(function() {
        var dat = $(this).find("dat").text();
        var date = $(this).find("dat").attr("date");
        $(outputDiv).append('<p><b>'+date+'</b>'+dat+'</p>');
    });
    $(outputDiv).fadeIn("normal");
}
//-->
</script>
<div>Now Loading.</div>

そして、このスクリプトが呼び出すXMLファイルは以下のようになっています。トップページで更新履歴をXML形式で表示するために使用しています。

<list>
  <title>2009年</title>
  <item><dat date="2009/07/26">トップページのAjax処理をjQuery様にお任せしました。</dat></item>
  ・・・省略・・・
</list>

特筆すべきは、Ajaxの呼び出しが1行で済んでいる点と、XMLデータの取り扱いが非常に簡潔にまとまっている点です。これにより、以前の手作業での処理と比較して大幅な効率化を実現できました。

スクリプトを上から順番に見ていきましょう。まず最初に記述されているのは初期化処理です。従来のJavaScriptでは、`body`タグの`onload`属性や`window.onload = ～`といった形でJavaScriptを実行する必要がありましたが、これには画像の読み込み完了まで待つという制約がありました。しかし、jQueryの`$(function(){ ～ });`を使用することで、DOM（Document Object Model）の準備が整った時点で実行を開始できます。

次に、Ajaxの呼び出し部分です。この1行だけでXMLファイルを呼び出してくれます。タイムアウト処理やエラー発生時の処理もここに記述できるため、非常に便利です。

そして、エラー処理関数`getError`です。これはAjaxの呼び出し中に発生したエラーの種類を表示するために使用されます。

最後に、XMLデータの表示関数`setIndex`です。受信したXMLファイルが`data`変数に格納されているので、それを解析し、指定された要素（この場合は`#divNews`）に表示します。特に便利なメソッドは、繰り返し処理を行う`each`、タグを検索する`find`、そしてタグの属性を検索する`attr`です。これらを使用することで、複雑な処理も可読性の高いコードで記述できます。

以前、自分でXML解析関数を構築した際には、ネストされた繰り返し処理や空要素のチェックなど、様々な考慮事項があり苦労しました。しかし、jQueryを使うことでこれらの煩雑な作業から解放され、効率的にコンテンツを表示できるようになりました。

最後に`fadeIn`メソッドを使用しています。これだけでフェードイン効果を実現できます。本体とは直接関係ありませんが、試してみたかっただけです。

jQueryの導入により、ウェブサイトのコンテンツ表示をより動的かつ効率的に行うことが可能になりました。今後も様々な機能を探求し、積極的に活用していきたいと考えています。

jQuery

https://jquery.com/

高橋 登史朗氏によるAll AboutのJavaScriptに関するページ

https://allabout.co.jp/gm/gt/1054/