【JavaScript】脱初心者！fetch関数でWeb APIを自在に操る方法【API】

2023年1月5日2024年12月14日

概要

こんにちは！

この記事では、Web開発で頻繁に利用されるfetch関数とJSONについて、初心者にもわかりやすく解説します。
fetch関数を使えば、JavaScriptで簡単に外部APIにアクセスし、必要なデータを自分のWebアプリケーションに取り込むことができます！

必要なデータをどのように取り出すのか、本記事で学んでいきます。

この記事で学ぶこと

fetch関数とは、、、簡単に言えばAPI連携時に使う関数です。

JSONとは、、、データ交換フォーマットの一種です。人間が読み書きしやすいシンプルなテキスト形式で、プログラミング言語を問わず利用できます。特に、Webアプリケーションにおいて、サーバーとクライアント間でデータをやり取りする際に広く使用されています。

引用

フェッチ API の使用 – Web API | MDN フェッチ API は、HTTP リクエストを行い、レスポンスを処理するための JavaScript インターフェイスを提供します。

引用

JSON – JavaScript | MDN JSON 名前空間オブジェクトは、 JavaScript Object Notation (JSON) を解釈したり、値を JSON に変換したりする静的メソッドを持ちます。

DEMO

今回使用させていただいたAPIは、「official_joke_api」。

使用したAPI(github)

ランダムにジョークを返してくれます。

APIからデータを取得し、単純に表示してみました。

実際にできたWEBページはこちら↓

DEMOページ

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ジョークapi</title>
    <script>
        
        

    let url='https://official-joke-api.appspot.com/jokes/programming/random';
    
    let arr=fetch(url) 
    .then(response => response.json()) 
    .then(data => {  
        
      console.log(data[0].setup);
      document.write(data[0].setup);
    });
    

    

    </script>
</head>
<body>
  
</body>

</html>

データの取り出し方

fetchでAPIリクエストを実行

12行目で実行

let arr=fetch(url)

戻り値をJSON形式で受け取る

13行目で実行

.then(response => response.json())

必要なデータのみ取り出す

14~18行目で実行

 .then(data => {  
        
      console.log(data[0].setup);
      document.write(data[0].setup);

 });

注意


本記事で使用したAPIにはありませんでしたが、、、
APIのほとんどは、APIキー、トークンと呼ばれるものを使って認証を行い使用します。

ブラウザ側の処理にAPIキーを書くと、ソースコードが丸見えの状態になるため危険です。
（APIキーを発行した人以外が不正使用できてしまうため）
不特定多数がアクセスできるサイトでは、使用しないでください。

不正にキーを悪用されてAPI使用料金が高額になる可能性があります。
（設定・契約によると思いますが）

使用する際は十分に注意しましょう！

一般的には、サーバーサイドでの処理やアプリに組み込まれ使用されます。
サーバーサイドでは、環境変数にAPIキーを設定することで、ソースコードから分離し、セキュリティを強化できます。