主要なAPI一覧と概要+AWS ソリューションアーキテクトに求められる観点

## はじめに
__APIって何？__ 初めて言葉を聞いた時、アプリケーションをつなぐ窓口のようなものだよと説明されて、わかったようなわからないような __もやもや__ したまま、なんとなくわかった気になっていました。AWS資格を全て取得し、実務経験もそこそこに積んだので、説明が出来ないと恥ずかしいと考えて、主要なAPI一覧と概要を整理しました。あわせて、AWSソリューションアーキテクトとして、求められる観点を記載致しました。

## AWS ソリューションアーキテクトに求められる観点
・AWS Lambda 関数上で実行されるアプリケーションを構築したい。
・複数の顧客がこのアプリケーションを使用する。
・各顧客に特定の期間のリクエストの割り当てを与えたい。
・クォータは顧客の使用パターンと一致する必要がある。
__これらの要件を満たすソリューションは?__

__ソリューション例__
Lambda 関数を呼び出すためのプロキシ統合を使用して Amazon API Gateway REST API を作成する。顧客毎に、適切なリクエスト割り当てを含む API ゲートウェイの使用計画を構成する。顧客が必要とする各ユーザーの使用プランから API キーを作成する。

API Gateway を利用することで、顧客それぞれにAPIキーを作成することが可能。キーの所有者がアクセス可能なサービスのセットとサービスのステージ（テスト、ベータそして本番といった環境）をAPI開発者がコントロールすることが可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/f3c9abbb-88dc-d7c1-7fca-140dab672178.png)

https://aws.amazon.com/jp/blogs/news/new-usage-plans-for-amazon-api-gateway/

プロキシ統合のメリット
lambdaが受け取るeventパラメータからQueryStringなどのリクエストに含まれる情報にアクセスが可能となる。

https://qiita.com/yuuwatanabe/items/a3bd65e709f20574b6db


## APIの基本概念
API（Application Programming Interface）を使用する事で、ブラウザやWebアプリケーションの機能を拡張する事が出来るようになります。
1. **インターフェース**
異なるシステムが互いに通信し、データや機能を共有することができます。

2. **リクエストとレスポンス**
クライアント（リクエストを送信する側）は、特定のリクエストをAPIに送信し、サーバー（リクエストを処理する側）はそのリクエストに応じてレスポンスを返します。

3. **プロトコル**
最も一般的なプロトコルはHTTP/HTTPSであり、Web API（RESTful APIやSOAPなど）で広く使用されています。

4. **エンドポイント**
特定の機能やデータにアクセスするためのエンドポイントを提供します。エンドポイントは、URL形式で指定され、特定のリソースや機能にアクセスするためのパスを示します。

## 主要なJavaScript API一覧

**①DOM API (Document Object Model)**
**②WebSocket API**
**③Fetch API**
**④XMLHttpRequest (XHR) API**
**⑤Window API**

1. **History API**
2. **Web Audio API**
3. **WebRTC API**
4. **Web Speech API**
5. **Web MIDI API**
6. **Location API,Context API**
7. **Web Storage API**
8. **Geolocation API**
9. **Notification API**
10. **Vibration API**

## **①DOM API (Document Object Model)**
**概要**: HTMLやXML文書の構造を操作するためのAPI。要素の取得、作成、削除、属性の操作、イベントの追加などが可能。
**例**: `document.getElementById()`, `document.createElement()`, `element.addEventListener()`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/53e40310-1d46-3188-f39a-d3a45c90656e.png)

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model

### 例: DOM APIを使用した基本的な操作

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM API Example</title>
    <style>
        #message {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>DOM API Example</h1>
    <button id="changeTextButton">Change Text</button>
    <button id="addElementButton">Add Element</button>
    <button id="removeElementButton">Remove Element</button>
    <p id="message">This is a message.</p>
    <div id="container"></div>

    <script>
        // 要素の取得
        var changeTextButton = document.getElementById('changeTextButton');
        var addElementButton = document.getElementById('addElementButton');
        var removeElementButton = document.getElementById('removeElementButton');
        var message = document.getElementById('message');
        var container = document.getElementById('container');

        // テキストを変更するイベントリスナーを追加
        changeTextButton.addEventListener('click', function() {
            message.textContent = 'The text has been changed!';
        });

        // 新しい要素を追加するイベントリスナーを追加
        addElementButton.addEventListener('click', function() {
            var newElement = document.createElement('p');
            newElement.textContent = 'This is a new element.';
            container.appendChild(newElement);
        });

        // 要素を削除するイベントリスナーを追加
        removeElementButton.addEventListener('click', function() {
            if (container.lastChild) {
                container.removeChild(container.lastChild);
            }
        });
    </script>
</body>
</html>
```

## **②WebSocket API**
**概要**: 双方向通信を行うためのAPI。リアルタイムアプリケーション（チャット、ゲームなど）に使用され、接続の確立、メッセージの送受信、接続の終了など、さまざまな操作が可能です。
**例**: `new WebSocket('ws://example.com/socket')`

### 例: WebSocket APIを使用した基本的な操作

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket API Example</title>
</head>
<body>
    <h1>WebSocket API Example</h1>
    <button id="connectButton">Connect</button>
    <button id="sendMessageButton">Send Message</button>
    <button id="closeButton">Close Connection</button>
    <input type="text" id="messageInput" placeholder="Enter message">
    <pre id="output"></pre>

    <script>
        let socket;

        // 接続ボタンのイベントリスナーを追加
        document.getElementById('connectButton').addEventListener('click', function() {
            // WebSocketオブジェクトを作成
            socket = new WebSocket('ws://echo.websocket.org');

            // 接続が開かれたときのイベントリスナー
            socket.addEventListener('open', function(event) {
                document.getElementById('output').textContent += 'Connected to WebSocket server\n';
            });

            // メッセージを受信したときのイベントリスナー
            socket.addEventListener('message', function(event) {
                document.getElementById('output').textContent += 'Message from server: ' + event.data + '\n';
            });

            // 接続が閉じられたときのイベントリスナー
            socket.addEventListener('close', function(event) {
                document.getElementById('output').textContent += 'Disconnected from WebSocket server\n';
            });

            // エラーが発生したときのイベントリスナー
            socket.addEventListener('error', function(event) {
                document.getElementById('output').textContent += 'WebSocket error: ' + event.message + '\n';
            });
        });

        // メッセージ送信ボタンのイベントリスナーを追加
        document.getElementById('sendMessageButton').addEventListener('click', function() {
            const message = document.getElementById('messageInput').value;
            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(message);
                document.getElementById('output').textContent += 'Sent to server: ' + message + '\n';
            } else {
                document.getElementById('output').textContent += 'WebSocket is not connected\n';
            }
        });

        // 接続を閉じるボタンのイベントリスナーを追加
        document.getElementById('closeButton').addEventListener('click', function() {
            if (socket) {
                socket.close();
            }
        });
    </script>
</body>
</html>
```

## **③Fetch API**
**概要**: HTTPリクエストを行うためのモダンなAPI。Promiseベースの設計により、非同期操作を簡単に扱うことができ、コードの可読性と保守性が向上します。GETリクエストやPOSTリクエストなど、さまざまなHTTPメソッドをサポートしており、最新のブラウザで広くサポートされています。
**例**: `fetch('https://api.example.com/data')`

https://www.freecodecamp.org/news/fetch-api-cheatsheet/

### 例: Fetch APIを使用したGETリクエスト

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fetch API Example</title>
</head>
<body>
    <h1>Fetch API Example</h1>
    <!-- データを取得するためのボタン -->
    <button id="fetchButton">Fetch Data</button>
    <!-- 取得したデータを表示するためのプレ要素 -->
    <pre id="result"></pre>

    <script>
        // ボタンがクリックされたときに実行されるイベントリスナーを追加
        document.getElementById('fetchButton').addEventListener('click', function() {
            // Fetch APIを使用してHTTP GETリクエストを送信
            fetch('https://jsonplaceholder.typicode.com/users/1')
                .then(response => {
                    // レスポンスが正常でない場合にエラーをスロー
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    // レスポンスボディをJSON形式でパースし、Promiseを返す
                    return response.json();
                })
                .then(data => {
                    // 取得したデータをプレ要素に表示
                    document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    // エラーメッセージをコンソールに出力
                    console.error('There was a problem with the fetch operation:', error);
                });
        });
    </script>
</body>
</html>
```


## **④XMLHttpRequest (XHR) API**
**概要**: 非同期HTTPリクエストを行うためのAPIです。Fetch APIよりも古く、多くのブラウザでサポートされていますが、Fetch APIと比べて記述量が多くなります。それでも、XHRは依然として多くの既存プロジェクトで使用されており、特定の状況では有用です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/d1223486-a208-019d-920f-6f5dc4a3f22b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/d2f7ea92-9f70-7ddf-8b02-cee982d6accf.png)

https://www.httpwatch.com/httpgallery/xhr/

### 例: XMLHttpRequestを使用したGETリクエスト

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest Example</title>
</head>
<body>
    <h1>XMLHttpRequest Example</h1>
    <button id="fetchButton">Fetch Data</button>
    <pre id="result"></pre>

    <script>
        document.getElementById('fetchButton').addEventListener('click', function() {
            // XMLHttpRequestオブジェクトを作成
            var xhr = new XMLHttpRequest();
            
            // リクエストの設定
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1', true);
            
            // レスポンスが返ってきたときの処理
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { // リクエストが完了したとき
                    if (xhr.status === 200) { // ステータスコードが200（成功）のとき
                        var data = JSON.parse(xhr.responseText);
                        document.getElementById('result').textContent = JSON.stringify(data, null, 2);
                    } else {
                        console.error('Error: ' + xhr.status);
                    }
                }
            };
            
            // リクエストを送信
            xhr.send();
        });
    </script>
</body>
</html>
```


## **⑤Window API**
**概要**: ブラウザウィンドウ全体を操作するためのAPIです。ウィンドウのタイトルの設定、サイズの変更、ページの読み込み/更新制御などに利用されます。

https://developer.mozilla.org/ja/docs/Web/API/Window

### 例: ブラウザウィンドウを操作するためのAPI

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window API Example</title>
</head>
<body>
    <h1>Window API Example</h1>
    <button id="changeTitleButton">Change Title</button>
    <button id="resizeWindowButton">Resize Window</button>
    <button id="reloadPageButton">Reload Page</button>

    <script>
        // タイトルを変更するイベントリスナーを追加
        document.getElementById('changeTitleButton').addEventListener('click', function() {
            document.title = 'New Title';
        });

        // ウィンドウサイズを変更するイベントリスナーを追加
        document.getElementById('resizeWindowButton').addEventListener('click', function() {
            window.resizeTo(800, 600);
        });

        // ページをリロードするイベントリスナーを追加
        document.getElementById('reloadPageButton').addEventListener('click', function() {
            window.location.reload();
        });
    </script>
</body>
</html>
```

## その他

１. **History API**
**概要**: ブラウザの閲覧履歴を操作するためのAPIです。履歴情報の取得、削除、移動などに利用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/79f588e8-2aa9-2862-fa90-faf70997b814.png)

https://medium.com/javascript-dots/how-to-use-history-api-on-javascript-401e4673cd5f



２. **Web Audio API**
**概要**: ブラウザ上で音声の生成、再生、処理を行うためのAPIです。ゲームや音楽プレーヤーなどのアプリケーション開発に利用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/aa27bffa-64c3-d25e-1390-639a71fd0eb9.png)

https://gemini.google.com/app/9e2afc4d7ca7916a

３. **WebRTC API**
**概要**: ブラウザ間でリアルタイムの音声・動画通信を行うためのAPIです。ビデオチャットやオンライン会議などのアプリケーション開発に利用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/558e2f04-19f4-cd83-3432-9eb2a747edb2.png)

https://gemini.google.com/app/9e2afc4d7ca7916a

４. **Web Speech API**
**概要**: ブラウザ上で音声認識や音声合成を行うためのAPIです。音声入力フォームや、読み上げ機能などのアプリケーション開発に利用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/c80002b9-9d3d-8e22-ef38-f2f766c998c9.png)

https://wiki.mozilla.org/Web_Speech_API_-_Speech_Recognition

５. **Web MIDI API**
**概要**: MIDIデバイスをブラウザから制御するためのAPIです。音楽制作や、楽器演奏などのアプリケーション開発に利用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/97fc1a4b-725d-739a-4918-563ca174642f.png)

https://gemini.google.com/app/9e2afc4d7ca7916a

６. **Location API,Context API**
**概要**: ブラウザの現在のURLや、履歴などを操作するためのAPIです。ページ遷移の制御や、URL情報の取得などに利用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/fe20d8ae-9f5f-7319-27b0-93f5c4d7a009.png)

https://developers.google.com/location-context?hl=ja

７. **Web Storage API**
**概要**: クライアントサイドでデータを保存するためのAPI。`localStorage`と`sessionStorage`が含まれる。
   - **例**: `localStorage.setItem('key', 'value')`, `sessionStorage.getItem('key')`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/d63d6461-e8dc-3925-d70b-0561685adf8d.png)

https://codezine.jp/article/detail/6672

８. **Geolocation API**
**概要**: ユーザーの位置情報を取得するためのAPI。位置情報を使用して地図や位置ベースのサービスを提供する。
   - **例**: `navigator.geolocation.getCurrentPosition()`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/25be6ac1-c650-1d05-41a3-908c50c2cae3.png)

https://atmarkit.itmedia.co.jp/ait/articles/1107/14/news119_2.html

９. **Notification API**
**概要**: デスクトップ通知を表示するためのAPI。ユーザーに対して重要な情報を通知する。
**例**: `new Notification('Hello, world!')`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920213/2ea7516c-ddf2-9f89-34c3-a71428bf120b.png)
https://zenn.dev/appare45/articles/web-notification

１０. **Vibration API**
**概要**: デバイスを振動させるためのAPI。モバイルデバイスでのフィードバックに使用される。
**例**: `navigator.vibrate([200, 100, 200])`

https://hakuhin.jp/js/vibration.html