コピペで使える!JavaScriptでフェッチAPIを使用し情報を取得する

4-Apr-05-2024-02-27-06-0703-AM

🎬初めに

お久しぶりです!!フューチャースピリッツ、エンジニアブログの中の人、「通行人 R」でございます。

「JavaScript」でAPIを使用したいと思ったことはございませんか？

JavaScriptでは「XMLHttpRequest」や「Fetch API」その他のライブラリを使用しAPIをたたく事が可能となっております。

シリーズ第四回目は「JavaScriptでフェッチAPIを使用し情報を取得する」について皆様にお届け致します!!

📘APIとは？

4 (1)

初めにAPIとは？について簡単に説明させていただきます!!

APIとはアプリケーションにおいて情報を共有する仕組みとなります。

APIは使用する側と提供する側が存在ますが今回は利用側の立場として進めさせて頂きます。

APIを使用する事で天気のリアルタイム情報や株価の情報、その他プログラムに使用できる様々な情報を取得する事が出来ます。

APIを使用する事で開発とメンテナンスの手間を省き効率を向上させる事が出来ます。

📘Fetch APIの実装方法

4 (2)

ここまでお付き合い頂きありがとうございます!!

それでは、Fetch APIの実装方法について解説させていただきます!

基本的な使い方

初めにFetch APIの基本的な使用方法を解説致します。fetch

fetch関数を呼び出し引数にAPIのURLを入力します。

#JavaScript

fetch('APIURL')

fetch()関数は、指定されたURLにGETリクエストを送信する関数となります。

カッコ内の引数に対してリクエストを送信したいURLを設定します。

fetch()関数を実行するとPromiseというオブジェクトを返します。

Promiseは、処理が完了した際に成功または失敗を示すオブジェクトとなります。

エラー判定を付ける

次にAPIのエラー判定を作成します。

.then()メソッドと.catch()メソッドを使用しエラー判定を行います。

#JavaScript

fetch('APIURL')
    .then(response => {
        if (!response.ok) {
            throw new Error('ネットワークエラーが発生しました');
        }
    })
    .catch(error => {
        // リクエストが失敗した場合の処理
    });

.then()ブロックにてif文を使用しレスポンス判定を行っています。

天気APIを使用してみる

4 (3)

以上を踏まえ天気APIを使用してみます。

今回は「Open-Meteo」が提供しているAPIを使用します。

取得する場所は京都とし本日分の気温の予想データを指定します。

リクエストパラメータにつきましては下記ツール使用し作成致しました。

パラメーター作成ツール

下記コードとなります。

#JavaScript

fetch('https://api.open-meteo.com/v1/forecast?latitude=35.0211&longitude=135.7538&hourly=temperature_2m&timezone=Asia%2FTokyo&forecast_days=1')
    .then(response => {
        if (!response.ok) {
            throw new Error('ネットワークエラーが発生しました');
        }
        return response.json();
    })
    .then(data => {
        console.log('取得したデータ:', data);
        data.hourly.temperature_2m.forEach((temperature, index) => {
            console.log(`時間: ${data.hourly.time[index]} - 気温: ${temperature}°C`);
        });
    })
    .catch(error => {
        console.error('Fetch APIでエラーが発生しました:', error);
    });