Java Scriptの基礎その29　AJAX Call XMLHttpRequest

イントロダクション

この記事では、JavaScriptの基本的なスクリプトを用いて、国のデータを取得し、ウェブページ上に表示する方法について解説します。この方法は、旧式の書き方を使っていますが、まだ多くのWebアプリで対応しているため、知っておくと便利です。コードを理解しながら、最新の技術との違いを学ぶことで、より効果的にJavaScriptを活用できるようになります。

DOM要素の取得

ボタンとコンテナの選択

最初に、DOM（Document Object Model）から特定の要素を取得します。これにはdocument.querySelectorを使用します。

const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');

• const btnは、クラス名がbtn-countryのボタン要素を取得します。

• const countriesContainerは、クラス名がcountriesのコンテナ要素を取得します。

これにより、後でこれらの要素に対して操作を行うことができます。

国データの取得

XMLHttpRequestを使ったリクエスト

次に、指定した国のデータを取得するために、XMLHttpRequestオブジェクトを使用します。

const getCountryData = function (country) {
  const request = new XMLHttpRequest();
  request.open('Get', `https://countries-api-836d.onrender.com/countries/name/${country}`);
  request.send();
  console.log(request.responseText);

• const request = new XMLHttpRequest();は、新しいリクエストオブジェクトを作成します。

• request.open('Get', URL);は、指定されたURLに対してGETリクエストを開きます。

• request.send();は、リクエストを送信します。

このコードは非同期で実行され、レスポンスが受信されると次のステップに進みます。

データの処理

レスポンスが受信された後、データを処理してウェブページに表示します。

  request.addEventListener('load', function () {
    const [countryData] = JSON.parse(this.responseText);
    console.log(countryData);

• request.addEventListener('load', function() {...});は、リクエストが完了したときに実行される関数を指定します。
• const [countryData] = JSON.parse(this.responseText);は、レスポンスのJSONデータを解析し、最初のオブジェクトを取得します。

これにより、取得したデータを使ってHTMLを生成する準備が整います。

HTMLの生成と表示

国データのHTML生成

取得した国データを元にHTMLを生成し、ページに挿入します。

    const html = `
        <article class="country">
          <img class="country__img" src="${countryData.flag}" />
          <div class="country__countryData">
            <h3 class="country__name">${countryData.name}</h3>
            <h4 class="country__region">${countryData.region}</h4>
            <p class="country__row"><span>👫</span>${(+countryData.population / 1000000).toFixed(1)} million people</p>
            <p class="country__row"><span>🗣️</span>${countryData.languages[0].name}</p>
            <p class="country__row"><span>💰</span>${countryData.currencies[0].name}</p>
          </div>
        </article>
    `;
    countriesContainer.insertAdjacentHTML('beforeend', html);
    countriesContainer.style.opacity = 1;
  });
};

• const html = ...は、取得したデータを使ってHTMLテンプレートを生成します。

• countriesContainer.insertAdjacentHTML('beforeend', html);は、生成したHTMLを指定したコンテナの中に挿入します。

• countriesContainer.style.opacity = 1;は、コンテナを表示するためのスタイル変更を行います。

国データの取得と表示の実行

最後に、特定の国のデータを取得して表示するために関数を呼び出します。

getCountryData('portugal');
getCountryData('usa');

• getCountryData('portugal');は、ポルトガルのデータを取得して表示します。

• getCountryData('usa');は、アメリカのデータを取得して表示します。

まとめ

この記事では、JavaScriptを使って国のデータを取得し、ウェブページ上に表示する方法について説明しました。この方法は旧式ですが、多くのWebアプリでまだ使用されています。最新の技術に対応するためにも、こうした基礎を理解しておくことが重要です。これからもJavaScriptの様々な機能を学び、実際のプロジェクトに活用していきましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！