地域別天気情報アプリ

Weather App

天気アプリ

天気情報

地域を選択

技術解説

1. 外部API（OpenWeatherMap）の利用

このアプリでは、OpenWeatherMapという無料の天気APIを使って、リアルタイムの天気情報を取得しています。

// APIを呼び出す関数
const fetchWeather = async () => {
  const apiKey = process.env.NEXT_PUBLIC_WEATHER_API_KEY;
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric&lang=ja`
  );
  const data = await response.json();
  return data;
};

async/await: 非同期処理を扱うための構文です。async関数内でawaitを使うと、APIのレスポンスを待ってから次の処理に進みます。
fetch API: ブラウザに標準搭載されている、HTTPリクエストを送るためのAPIです。fetch()でURLを指定すると、そのURLにリクエストを送ってデータを取得できます。
環境変数:process.env.NEXT_PUBLIC_WEATHER_API_KEYで、APIキーを安全に管理しています。APIキーは公開リポジトリに含めず、環境変数で管理するのがベストプラクティスです。

2. 状態管理（useState）

アプリの状態（選択された地域、天気データ、ローディング状態など）を管理するために、ReactのuseStateフックを使っています。

// 複数の状態を管理
const [weatherData, setWeatherData] = useState<WeatherData | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);

// 状態を更新
setLoading(true);  // ローディング開始
setWeatherData(data);  // データを設定
setError("エラーメッセージ");  // エラーを設定

useState: コンポーネント内で状態を管理するためのフックです。[値, 更新関数]の形式で返され、更新関数を呼ぶと画面が自動的に更新されます。
型定義:useState<WeatherData | null>(null)のように型を指定することで、TypeScriptが型チェックを行い、エラーを防げます。

3. エラーハンドリング

API呼び出しは失敗する可能性があるため、エラー処理を実装しています。

try {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("エラーメッセージ");
  }
  const data = await response.json();
  setWeatherData(data);
} catch (err) {
  setError(err.message);
} finally {
  setLoading(false);
}

try-catch-finally:tryブロックでエラーが発生する可能性のある処理を囲み、catchブロックでエラーを処理します。finallyブロックは、成功・失敗に関わらず必ず実行されます。
エラー状態の管理: エラーが発生したら、ユーザーに分かりやすいメッセージを表示します。

4. 条件付きレンダリング

ローディング中、エラー時、データ取得成功時で、表示する内容を切り替えています。

{loading && <div>読み込み中...</div>}
{error && <div>エラー: {error}</div>}
{weatherData && !loading && (
  <div>
    <h3>{weatherData.name}</h3>
    <p>{weatherData.main.temp}°C</p>
  </div>
)}

論理AND演算子（&&）:{condition && <Component />}の形式で、条件が真の時だけコンポーネントを表示します。
三項演算子（? :）: 条件によって2つの異なる内容を表示する場合に使います。

5. 環境変数の設定方法

Next.jsで環境変数を使うには、.env.localファイルを作成します。

// .env.local ファイル
NEXT_PUBLIC_WEATHER_API_KEY=your_api_key_here

// コード内で使用
const apiKey = process.env.NEXT_PUBLIC_WEATHER_API_KEY;

NEXT_PUBLIC_プレフィックス: ブラウザ側でも使える環境変数には、必ずNEXT_PUBLIC_を付ける必要があります。
.env.local: このファイルは.gitignoreに追加して、Gitにコミットしないようにします（APIキーを公開しないため）。
APIキーの取得:OpenWeatherMapで無料アカウントを作成すると、APIキーが取得できます。