楽天ウェブサービス初心者入門講座

楽天ウェブサービス にリクエストを送り、返ってくる XML のタグに、空の値が含まれる場合にも対応できるように、値を取得する部分を関数にしました。

複雑な処理を関数としてまとめることで、重複したコードが無くなり、プログラムがシンプルになります。


■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 フォルダに、別ファイルとして配置しておくという手もあります。