Next.Jsで学校コード検索APIを使ってみた[edu-data.jp]

初めに

next.jsで日本の大学を検索できるようにしたかった為、調べたところhttps://edu-data.jp が検索apiを公開していましたので実際に使ってみました。

Tokenの取得

https://api.edu-data.jp/ にアクセスするとログイン or 利用者登録が出来ますのでメールアドレスの登録、認証、利用規約の同意を行ってください。

次にhttps://api.edu-data.jp/token からトークンの発行ができます。

使い方

まずは、適当にgetリクエストの基礎構文を記述し、ヘッダーにAuthorizationとAcceptを記述します。
この際に、Bearer形式でトークンを指定する必要があるのでAuthorizationにtokenだけではなくBearer を付ける必要があります。

以下が例になります。

await fetch(`https://api.edu-data.jp/api/v1/school`, {
    method: 'GET',
    headers: {
        Authorization: 'Bearer token',
        Accept: 'application/json',
    },
});

パラメータの指定方法

ですが、このままだとフィルターを掛けれない為、全ての学校を取得してしまいます。

その為、必要な情報のみ収集出来るようにする為にapiが提供してくれているパラメータを指定します。

パラメータを指定して取得する場合は以下のようにparamsを別で設定してあげてurlの後ろにくっ付けてあげると出来ます。
※この際valueはinputで入力した文字列などを想定しています。

const params = new URLSearchParams();
params.append('keyword', value);

await fetch(`https://api.edu-data.jp/api/v1/school?keyword=${params.toString()}`, {
    method: 'GET',
    headers: {
        Authorization: 'Bearer token',
        Accept: 'application/json',
    },
});

このようにすることで検索ワードにフィルターを掛けることが出来ました。

また、条件を複数指定する場合はschool?keyword=${keywords}&school_status_code=2のように&で付け足すことで可能です。

最後に

上記のコードを組み合わせてエラーハンドリングを行ったコードになります。
ご参考までに。。。！

try {
    const params: URLSearchParams = new URLSearchParams();
    params.append('keyword', value);
    const response: Response = await fetch(`https://api.edu-data.jp/api/v1/school?keyword=${params.toString()}`, {
        method: 'GET',
        headers: {
            Authorization: 'Bearer token',
            Accept: 'application/json',
        },
    });
    if (response.status === 200) {
        const data = await response.json();
        console.log(data);
    } else {
        console.error('GETリクエストが失敗しました');
    }
} catch (error) {
    console.error('エラー:', error);
}