【JavaScript】fetchで外部ドメインのXMLファイルを取得する

齋藤仁志｜シビックテッカー

2022年9月10日 18:59

今回はfetchを使って、外部ドメインのXMLファイルを取得してみます。

以前の記事は↓こちら

JSONファイルの時は、fetchで読み込んでjson()でパース（解析）すれば簡単に取得できました。

なるほど！XMLファイルだから、おそらくxml()でパースすれば•••

って、できんのかい！！！汗

text()やjson()はありますが、xml()はない模様。ちょっと、つまずいたのでNoteに書こうと思った訳です。

では、気を取り直して行ってみましょう！

全体のソースコード

<!DOCTYPE HTML>
<html lang="ja">

<head>
  <title>fecthで外部ドメインのxmlファイルをスクレイピングしよう！</title>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    ul {
      padding: 0;
      margin: 0;

    }

    li {
      width: 80%;
      margin: 0;
      line-height: 2em;
      padding: 0.5em;
      text-align: left;
      list-style: none;
      border-top: 1px #000 solid;
    }

    li:nth-child(even) {
      background: #f2f2f2;
    }

    li:last-child {
      border-bottom: 1px #000 solid;
    }
  </style>
  <script type="module">
    onload = async () => {

      const parser = new DOMParser();

      const res = await fetch('https://www.ezairyu.mofa.go.jp/opendata/area/newarrivalA.xml');

      const data = await res.text();

      const txt = await parser.parseFromString(data, "text/xml");

      const doc = txt.querySelectorAll("mail");

      const arr = Array.from(doc);

      for (let i = 0; i < arr.length; i++) {

        info.innerHTML += "<li><h2>" + arr[i].querySelector("title").textContent + "</h2>" + arr[i].querySelector("leaveDate").textContent + "<br>" + arr[i].querySelector("lead").textContent.replace("●", "") + "</li>";

      }

    }
  </script>
</head>

<body>
  <center>
    <h1>fecthで外部ドメインのxmlファイルをスクレイピングしよう！</h1>

    <ul>
      <div id="info"></div>
    </ul>

    出典：外務省、<a href="https://www.anzen.mofa.go.jp/">海外安全情報</a>、<a href="https://creativecommons.org/licenses/by/4.0/deed.ja">CC BY 4.0</a>
  </center>
</body>

</html>

今回は、外部ドメインのXMLファイルを読み込んで、リストで表示されるまで、やってみます！

どのデータを取得しよう？

今回は、外務省のオープンデータの「海外安全情報」を見つけましたので、取得してみました！

利用マニュアルに取得方法があったので、見てみます。

全量、通常、軽量と分けられているようです。せっかくなので、全量データを取得します。

コード解説

一旦、テキストで読み込む

const res = await fetch('https://www.ezairyu.mofa.go.jp/opendata/area/newarrivalA.xml');

const data = await res.text();

ひとまず、fetchでURLにアクセスし、テキストで読み込みます。デバッグすると、テキストで読み込まれていることが分かります。

DOMParserを使う

const parser = new DOMParser();

const txt = await parser.parseFromString(data, "text/xml");

読み込んだdataをDOMParserでパースします。

どういう風に読み込まれているでしょうか？こちらもデバッグしてみましょう！

ちゃんとdocumentで読み込まれていることが分かります。

queryselectorAllを使う

const doc = txt.querySelectorAll("mail");

情報を見るに、重要なところは、<mail>〜</mail>の部分だと分かります。なので、queryselectorAllでここを抽出します。

配列に格納する

const arr = Array.from(doc);

ここはお好みです。そのままXMLの解析に入っても良いです。僕は、配列に格納しました。

リストに表示させる

for (let i = 0; i < arr.length; i++) {

　　　　　　　　　info.innerHTML += "<li><h2>" + arr[i].querySelector("title").textContent + "</h2>" + arr[i].querySelector("leaveDate").textContent + "<br>" + arr[i].querySelector("lead").textContent.replace("●", "") + "</li>";

}

あとは、textContentなどで、必要な情報を取り出して、innerHTMLでli要素に書き込んでいきます。

ちゃんと表示されているかな？見てみましょう！

良いですね！問題なく、表示されています。リストは、cssを使って色々とデザインできますので、お好きなデザインにしてみてください！

DOMParserを使って、パースするところがポイントです。ぜひ、トライしてみてください！

Github

https://github.com/linkevery2s/sourcecode

参考文献

外務省、海外安全情報

Fetch API