JavaScriptでミニアプリを作る方法｜DOM・イベント・APIを使った総まとめ【第15講】

JavaScript入門講座も、いよいよ今回が最終回です。

これまでの講座では、変数・条件分岐・繰り返し処理・関数・配列・オブジェクト・DOM・HTML要素操作・イベント処理・スタイル変更・非同期処理・API通信など、多くの知識を学んできました。

しかし実際のWeb開発では、それぞれの知識を単独で使うことはほとんどありません。

さまざまな知識を組み合わせて、一つのアプリを作ります。

そこで今回は、これまで学んだ内容を総復習しながら、郵便番号検索アプリを作成していきます。

この記事を読み終える頃には、「自分で簡単なWebアプリを作れる」という感覚を掴めるはずです。

完成イメージ

郵便番号を入力

[検索]

住所：
東京都千代田区千代田

ユーザーが郵便番号を入力し、検索ボタンを押すと、APIから住所情報を取得して画面に表示します。

今回使う技術

• DOM操作
• イベント処理
• 関数
• アロー関数
• 非同期処理
• API通信

第1講から第14講までで学習した知識がどのようにつながるのか確認していきましょう。

STEP1：HTMLを作る

<input
  id="zipcode"
  placeholder="1000001"
>

<button id="searchBtn">
  検索
</button>

<div id="result"></div>

今回必要なのは入力欄・検索ボタン・結果表示エリアの3つです。

STEP2：HTML要素を取得する

const zipcodeInput =
document.getElementById("zipcode");

const result =
document.getElementById("result");

const button =
document.getElementById("searchBtn");

第10講で学習した getElementById() を使ってHTML要素を取得しています。

STEP3：アロー関数で検索処理を作る

const searchAddress =
async () => {

};

今回は検索処理をアロー関数として定義します。

const zipcode =
zipcodeInput.value;

入力された郵便番号を取得します。

if (zipcode === "") {

  alert("郵便番号を入力してください");

  return;

}

入力チェックには第3講で学習した条件分岐を使用します。

STEP4：API通信を行う

郵便番号から住所を取得するためにZipCloud APIを利用します。

const url =
`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`;

const response =
await fetch(url);

const data =
await response.json();

APIから返却されたJSONデータを取得します。

{
  "address1":"東京都",
  "address2":"千代田区",
  "address3":"千代田"
}

必要なデータを取り出します。

const item =
data.results[0];

STEP5：取得した住所を表示する

result.textContent =
  item.address1 +
  item.address2 +
  item.address3;

これで取得した住所を画面へ表示できます。

完成コード

const zipcodeInput =
document.getElementById("zipcode");

const result =
document.getElementById("result");

const button =
document.getElementById("searchBtn");

const searchAddress =
async () => {

  const zipcode =
  zipcodeInput.value;

  if (zipcode === "") {

    alert(
      "郵便番号を入力してください"
    );

    return;

  }

  try {

    const url =
    `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`;

    const response =
    await fetch(url);

    const data =
    await response.json();

    const item =
    data.results[0];

    result.textContent =
      item.address1 +
      item.address2 +
      item.address3;

  } catch(error) {

    result.textContent =
      "取得に失敗しました";

  }

};

button.addEventListener(
  "click",
  searchAddress
);

今まで学んだ内容との対応表

これまで個別に学んできた知識が、実際のアプリでは一つにつながっています。

次に挑戦したいアプリ例

• ToDoアプリ
• メモアプリ
• 買い物リストアプリ
• 天気予報アプリ

今回の郵便番号検索アプリを応用することで、さまざまなWebアプリを作れるようになります。

まとめ

今回は郵便番号検索アプリを作成しました。

このアプリには、変数・条件分岐・関数・アロー関数・オブジェクト・DOM操作・イベント処理・非同期処理・API通信など、この講座で学んだ重要な内容が含まれています。

ここまで学習を続けた皆さんは、もう単なる文法学習者ではありません。

JavaScriptを使って自分でWebアプリを作るためのスタートラインに立っています。

ぜひ次は、自分だけのオリジナルアプリ制作にも挑戦してみてください。

15回にわたるJavaScript入門講座をご覧いただき、ありがとうございました。