複雑な処理を関数としてまとめることで、重複したコードが無くなり、プログラムがシンプルになります。
■index.js側
(1)関数 getValue() を新たに定義しました。
この関数は、 XML の一部分とタグ名を引数として受け取ります。子要素がある場合は値があることになるので取り出し、値が無い場合は空文字を代入しています。最後に値を返します。
function getValue(xmlData, tagName) {
var tmp = xmlData.getElementsByTagName(tagName);
var tmpValue;
//子要素を取得
var cn = tmp[0].childNodes;
//値がある場合は取得
if(cn.length >= 1) {
tmpValue = tmp[0].firstChild.nodeValue;
}else{
tmpValue = "";
}
return tmpValue;
}
(2)以下のように try-catch文 を使って、簡単に書くこともできます。
function getValue(xmlData, tagName) {
var tmp = xmlData.getElementsByTagName(tagName);
var tmpValue;
try {
tmpValue = tmp[0].firstChild.nodeValue;
} catch (e) {
tmpValue = "";
}
return tmpValue;
}
空の場合に値を取り出そうとすると、エラーが発生します。わざとエラーを出して捕捉するという仕組みです。こちらのほうが単純ですね。
■item.js側
(1)独自に定義した関数 getValue() を使うと、値を取得するプログラムが短く書けます。
この関数は XML の一部分とタグ名を引数として呼び出すと、値が返ってくるように作っています。
前
var status = response[0].getElementsByTagName('Status')[0].firstChild.nodeValue;
↓
後
var status = getValue(response[0], 'Status');
かなり短くなりましたね。
(2)商品データを取得するプログラムも短くなりました。
var itemNameValue = getValue(item[i], 'itemName');
var itemPriceValue = getValue(item[i], 'itemPrice');
var affiliateUrlValue = getValue(item[i], 'affiliateUrl');
var mediumImageUrlValue = getValue(item[i], 'mediumImageUrl');
var itemCaptionValue = getValue(item[i], 'itemCaption');
(3)HTMLタグを作成している部分を、短く区切って見やすくしました。
tmpHtml += "<p>";
tmpHtml += "<a href='" + affiliateUrlValue + "'>";
tmpHtml += itemNameValue + "</a>";
tmpHtml += "<br />";
tmpHtml += "<b>" + itemPriceValue + "円</b>";
tmpHtml += "<br />";
tmpHtml += "<a href='" + affiliateUrlValue + "'>";
tmpHtml += "<img src='"+ mediumImageUrlValue + "'>";
tmpHtml += "</a>";
tmpHtml += "<br />";
if(itemCaptionValue.length >= 200){
tmpHtml += itemCaptionValue.substring(0, 200);
tmpHtml += "<br />";
}else{
tmpHtml += itemCaptionValue;
tmpHtml += "<br />";
}
tmpHtml += "</p>";
tmpHtml += "<hr />";
プログラムは横に長くなると見難くなるので、適当な部分で改行するようにしたほうがわかりやすいです。
sample002 のプログラムと比べると、全体的にだいぶシンプルになったと思います。
【ワンポイント】
関数 getValue() は index.js 側に書いていますが、item.js 側に書いても動きます。しかし今後も共通して使う機能なので、index.js 側に書いておいたほうがよいでしょう。
または lib フォルダに、別ファイルとして配置しておくという手もあります。