ニュース収集サイトを制作 (SvelteKit & NewsAPI)

SvelteKit を使用して、NewsAPI からニュース記事を取得する方法を紹介します。本記事では、サーバーサイドでデータを取得し、ページに反映する方法を解説します。

DEMO: https://262ae5d2.optimnewsdata.pages.dev/

📌 実装の概要

今回のコードでは、以下の手順でニュースデータを取得します。

1. NewsAPI のエンドポイントを指定
2. 環境変数から API キーを取得
3. 特定のドメインの記事を取得
4. データを load 関数で取得し、ページに渡す
5. エラーハンドリングの実装

🔧 コード解説

📂 +page.server.ts

以下の +page.server.ts のコードは、サーバーサイドでニュースデータを取得し、ページに渡す処理を行います。

環境変数のインポート

import { VITE_NEWSAPI_KEY } from "$env/static/private";
import type { NewsAPI } from "$lib/server/types";
import { error } from "@sveltejs/kit";
import type { PageServerLoad } from "./$types";

load 関数の定義

export const load = (async () => {
  const key = VITE_NEWSAPI_KEY;
  const endpoint = "https://newsapi.org/v2/everything";

API パラメータの設定

  const market = "en"; // 言語設定
  const query = "news"; // 検索キーワード
  const domains = "businessinsider.com, wired.com, washingtonpost.com"; // 記事を取得するドメイン
  const exclusion = "npr.org"; // 除外するドメイン
  const limit = 20; // 取得する記事の件数

API へのリクエスト

  const totalResponse = await fetch(
    `${endpoint}?language=${market}&q=${query}&domains=${domains}&excludeDomains=${exclusion}&pageSize=${limit}`,
    {
      method: "GET",
      headers: {
        "X-Api-Key": key,
      },
    }
  );

エラーハンドリング

  if (!totalResponse.ok) {
    throw error(totalResponse.status, "Failed to fetch news");
  }

データの取得と返却

  const totalData = await totalResponse.json();
  const articles = totalData.articles as NewsAPI[]; // API のレスポンス形式に応じて型を適用
  return { articles };
}) satisfies PageServerLoad;

🛠 コードのポイント

1️⃣ 環境変数を使用する

import { VITE_NEWSAPI_KEY } from "$env/static/private";

環境変数を利用して API キーを管理することで、セキュリティを強化します。.env ファイルに以下のように API キーを設定しておきます。

VITE_NEWSAPI_KEY=your_newsapi_key_here

2️⃣ API のエンドポイントとパラメータ

const endpoint = "https://newsapi.org/v2/everything";
const market = "en";
const query = "news";
const domains = "businessinsider.com, wired.com, washingtonpost.com";
const exclusion = "npr.org";
const limit = 20;

• market: ニュースの言語（今回は英語）
• query: 記事の検索キーワード
• domains: 特定のニュースサイトから取得
• exclusion: 除外するドメイン
• limit: 取得する記事数を制限

3️⃣ エラーハンドリング

if (!totalResponse.ok) {
  throw error(totalResponse.status, "Failed to fetch news");
}

API のレスポンスが正常でない場合、SvelteKit の error を使用して例外処理を行います。

🖥 まとめ

この +page.server.ts を使用することで、SvelteKit のサーバーサイドで NewsAPI からニュースデータを取得し、ページに渡すことができます。