JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（Nager.Date API）

JavaScript

2026.02.08

6日目のゴールと今日やること
状態管理（state）をアプリの中心に置く
fetch を「共通関数」にまとめて再利用する
Nager.Date 専用の関数を作る
1. 祝日取得を「読みやすい関数」にする
2. 深掘りポイント
UI 側の fetchHolidays を“ストーリーとして読める”形にする
1. 6日目版 fetchHolidays（完成形）
2. 深掘りポイント
複数国比較を Promise.all で整理する
1. 複数国比較の関数
2. 深掘りポイント
ローディング表示を「状態」として扱う
1. state と連動させる
2. 深掘りポイント
エラーハンドリングを「原因別」に整理する
1. どこで何を扱うか
6日目のまとめ
今日いちばん深く理解してほしいこと

6日目のゴールと今日やること

6日目のテーマは
「Nager.Date API 祝日アプリを“読みやすく・直しやすく・拡張しやすい設計”に進化させる」
ことです。

ここまでであなたは、

年・国を指定して祝日取得
ローディング表示
エラーハンドリング
前年・翌年・今年ボタン
お気に入り機能
localStorage 保存
複数国比較（Promise.all）

といった、API アプリの本質をすでに体験しています。

6日目は、これらを 「設計として整理する」 回です。

つまり、
fetch / async‑await / エラーハンドリングを“アプリ全体の型”として扱えるようにする
ことが目的です。

状態管理（state）をアプリの中心に置く

なぜ state を中心にするのか

昨日までのコードでは、
祝日一覧・お気に入り・ローディング状態などが
バラバラの変数として存在していました。

これをひとつの state にまとめると、

どこに何があるか迷わない
UI 更新がしやすい
保存（localStorage）と連動しやすい
デバッグがしやすい

というメリットがあります。

state の基本形

const state = {
  isLoading: false,
  holidays: [],
  favorites: [],
  comparison: []
};

const state = {
  isLoading: false,
  holidays: [],
  favorites: [],
  comparison: []
};

JavaScript

状態を更新する関数

function updateState(updates) {
  Object.assign(state, updates);
}

function updateState(updates) {
  Object.assign(state, updates);
}

JavaScript

この関数があるだけで、
アプリ全体のコードがスッキリします。

fetch を「共通関数」にまとめて再利用する

なぜ共通化が必要なのか

祝日アプリでは、

単一国の祝日取得
複数国比較
お気に入りからの再取得

など、fetch を使う場面が多いです。

そこで、
fetch のエラーハンドリングを共通化した関数
を作ります。

共通 fetch 関数（重要）

async function requestJson(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("データが見つかりませんでした。");
      }
      if (response.status >= 500) {
        throw new Error("サーバー側でエラーが発生しています。時間をおいて再試行してください。");
      }
      throw new Error(`HTTPエラー（${response.status}）`);
    }

    const data = await response.json();
    return data;

  } catch (error) {
    throw new Error(error.message);
  }
}

async function requestJson(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("データが見つかりませんでした。");
      }
      if (response.status >= 500) {
        throw new Error("サーバー側でエラーが発生しています。時間をおいて再試行してください。");
      }
      throw new Error(`HTTPエラー（${response.status}）`);
    }

    const data = await response.json();
    return data;

  } catch (error) {
    throw new Error(error.message);
  }
}

JavaScript

深掘りポイント

この関数は、

fetch の失敗
HTTP エラー
JSON パースエラー

をすべて Error として上に投げる 役割を持っています。

これにより、
上位の関数は「何をしたいか」だけに集中できます。

Nager.Date 専用の関数を作る

祝日取得を「読みやすい関数」にする

async function fetchPublicHolidays(year, countryCode) {
  const url = `https://date.nager.at/api/v3/PublicHolidays/${year}/${countryCode}`;
  const data = await requestJson(url);

  if (!Array.isArray(data)) {
    throw new Error("予期しない形式のデータが返されました。");
  }

  if (data.length === 0) {
    throw new Error("祝日が見つかりませんでした。");
  }

  return data;
}

async function fetchPublicHolidays(year, countryCode) {
  const url = `https://date.nager.at/api/v3/PublicHolidays/${year}/${countryCode}`;
  const data = await requestJson(url);

  if (!Array.isArray(data)) {
    throw new Error("予期しない形式のデータが返されました。");
  }

  if (data.length === 0) {
    throw new Error("祝日が見つかりませんでした。");
  }

  return data;
}

JavaScript

深掘りポイント

fetchPublicHolidays は
「Nager.Date API の仕様を知っている唯一の関数」
です。

UI 側は API の細かい仕様を知らなくてよくなり、
コードが読みやすくなります。

UI 側の fetchHolidays を“ストーリーとして読める”形にする

6日目版 fetchHolidays（完成形）

async function fetchHolidays() {
  const rawYear = yearInput.value.trim();
  const countryCode = countrySelect.value;

  const parsed = parseYear(rawYear);
  if (!parsed.ok) {
    statusDiv.textContent = parsed.message;
    resultDiv.textContent = "";
    return;
  }

  const year = parsed.value;

  setLoading(true, `${year}年の祝日を取得中です…`);
  resultDiv.textContent = "";

  try {
    const holidays = await fetchPublicHolidays(year, countryCode);

    updateState({ holidays });
    statusDiv.textContent = "祝日の取得に成功しました。";
    renderHolidays(holidays);

  } catch (error) {
    statusDiv.textContent = `取得中にエラーが発生しました：${error.message}`;
    console.error(error);

  } finally {
    setLoading(false);
  }
}

async function fetchHolidays() {
  const rawYear = yearInput.value.trim();
  const countryCode = countrySelect.value;

  const parsed = parseYear(rawYear);
  if (!parsed.ok) {
    statusDiv.textContent = parsed.message;
    resultDiv.textContent = "";
    return;
  }

  const year = parsed.value;

  setLoading(true, `${year}年の祝日を取得中です…`);
  resultDiv.textContent = "";

  try {
    const holidays = await fetchPublicHolidays(year, countryCode);

    updateState({ holidays });
    statusDiv.textContent = "祝日の取得に成功しました。";
    renderHolidays(holidays);

  } catch (error) {
    statusDiv.textContent = `取得中にエラーが発生しました：${error.message}`;
    console.error(error);

  } finally {
    setLoading(false);
  }
}

JavaScript

深掘りポイント

この関数は、
「祝日取得の流れをそのまま読める」
という設計になっています。

入力チェック
ローディング開始
fetchPublicHolidays で祝日取得
成功時の表示
失敗時のメッセージ
ローディング終了

fetch の細かい処理は
fetchPublicHolidays と requestJson に隠れているため、
とても読みやすくなっています。

複数国比較を Promise.all で整理する

複数国比較の関数

async function fetchMultipleCountries(year, countries) {
  const promises = countries.map((code) =>
    fetchPublicHolidays(year, code)
  );

  const results = await Promise.all(promises);
  return results;
}

async function fetchMultipleCountries(year, countries) {
  const promises = countries.map((code) =>
    fetchPublicHolidays(year, code)
  );

  const results = await Promise.all(promises);
  return results;
}

JavaScript

深掘りポイント

Promise.all を使うと、

並列で API を叩ける
全部終わるまで待てる
結果をまとめて扱える

というメリットがあります。

ローディング表示を「状態」として扱う

state と連動させる

function setLoading(isLoading, message) {
  updateState({ isLoading });

  if (isLoading) {
    statusDiv.textContent = message || "処理中です…";
  }

  fetchButton.disabled = isLoading;
  compareButton.disabled = isLoading;
  thisYearButton.disabled = isLoading;
  prevYearButton.disabled = isLoading;
  nextYearButton.disabled = isLoading;
}

function setLoading(isLoading, message) {
  updateState({ isLoading });

  if (isLoading) {
    statusDiv.textContent = message || "処理中です…";
  }

  fetchButton.disabled = isLoading;
  compareButton.disabled = isLoading;
  thisYearButton.disabled = isLoading;
  prevYearButton.disabled = isLoading;
  nextYearButton.disabled = isLoading;
}