📝
API Gateway で SDK を生成して使ってみた

2025/09/28に公開
API Gateway で REST API の SDK を生成する - Amazon API Gateway

REST API 用に API Gateway で生成された JavaScript SDK を使用する - Amazon API Gateway

html ファイルに JavaScript SDK として定義して使ってみました。

 1. Lambda 関数の作成以下の設定で作成しました。
ランタイム: Python 3.13
コード: 以下の通り
import json

def lambda_handler(event, context):
    return {
        'statusCode': 200,
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Methods': 'GET,OPTIONS'
        },
        'body': json.dumps({
            'message': 'Hello from SDK test!',
            'timestamp': context.aws_request_id,
            'input': event.get('queryStringParameters', {})
        })
    }

 2. API Gateway の作成以下の設定で作成しました。
API タイプ: REST API
API エンドポイントタイプ: リージョン
リソース: users
メソッド: users リソースに GET メソッドを作成
統合タイプ: Lambda 関数
Lambda プロキシ統合: ON
Lambda 関数: 手順 1 で作成した関数

CORS: 有効にする
上記設定で作成した API をデプロイします。

 3. SDK の生成API のデプロイ後にステージアクション > SDK を生成をクリックします。

プラットフォームは任意ですが今回は JavaScript を選択しました。

SDK を生成すると zip ファイルとしてダウンロードされます。

フォルダ構成は以下の通りでした。
javascript_2025-09-12_05-19Z/
└── apiGateway-js-sdk/
    ├── lib/
    │   ├── apiGatewayCore/
    │   ├── axios.dist/
    │   ├── CryptoJS/
    │   └── url-template/
    ├── apiGClient.js
    ├── CHANGELOG.md
    └── README.md
apiGClient.js には API Gateway のエンドポイントやメソッドが定義されており、usersGet という関数も自動生成されています。
apiGClient.js
apigClient.usersGet = function (params, body, additionalParams) {
        if(additionalParams === undefined) { additionalParams = {}; }
        
        apiGateway.core.utils.assertParametersDefined(params, [], ['body']);
        
        var usersGetRequest = {
            verb: 'get'.toUpperCase(),
            path: pathComponent + uritemplate('/users').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
            headers: apiGateway.core.utils.parseParametersToObject(params, []),
            queryParams: apiGateway.core.utils.parseParametersToObject(params, []),
            body: body
        };
        
        
        return apiGatewayClient.makeRequest(usersGetRequest, authType, additionalParams, config.apiKey);
    };
関数名の命名規則についてはドキュメントに記載されているとおりです。

API Gateway の単純な電卓の API - Amazon API Gateway
API Gateway では、HTTP メソッドとパス部分を組み合わせて、対応する SDK メソッド名を生成します (定義されていない場合)。
今回の場合、users リソースに GET メソッドを定義したので、関数名は usersGet になっています。

 4. html ファイルの作成手順 3 で生成した SDK を使用して API を呼び出す html ファイルを作成します。

作成場所は apiGateway-js-sdk フォルダの直下です。
index.html
<!DOCTYPE html>
<html>
<head>
    <title>API Gateway SDK Test</title>
</head>
<body>
    <h1>API Gateway SDK Test</h1>
    <button onclick="testAPI()">Test API</button>
    <div id="result"></div>

    <!-- SDK dependencies -->
    <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/rollups/crypto-js.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
    <script type="text/javascript" src="lib/url-template/url-template.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
    <script type="text/javascript" src="apigClient.js"></script>

    <script>
        function testAPI() {
            var apigClient = apigClientFactory.newClient();
            
            apigClient.usersGet({}, {})
                .then(function(result) {
                    document.getElementById('result').innerHTML = 
                        '<h3>Success!</h3><pre>' + JSON.stringify(result.data, null, 2) + '</pre>';
                })
                .catch(function(error) {
                    document.getElementById('result').innerHTML = 
                        '<h3>Error!</h3><pre>' + JSON.stringify(error, null, 2) + '</pre>';
                });
        }
    </script>
</body>
</html>
基本的には SDK を読み込んで SDK 通りにリクエストするだけです。

apigClientFactory.newClient() は SDK を初期化するための処理です。

REST API 用に API Gateway で生成された JavaScript SDK を使用する - Amazon API Gateway
コードで、API Gateway で生成された SDK を初期化します。次のようなコードを使用します。

var apigClient = apigClientFactory.newClient();

 5. 動作確認手順 4 で作成した html ファイルをブラウザで開き、Test API のボタンをクリックします。

以下のレスポンスを取得できれば呼び出し成功です。
{
  "message": "Hello from SDK test!",
  "timestamp": "a1526bc8-78bd-46b3-b1fe-b4939693ee00",
  "input": null
}

 6. リクエストパラメータの付与リクエストパラメータを付与する場合、API Gateway 側の設定を変更して再度 SDK を生成します。

users リソースの GET メソッドのメソッドリクエストに以下のような URL クエリ文字列パラメータを追加します。
age
name


API のデプロイ後に再度 SDK をダウンロードし、以下の html ファイルを apiGateway-js-sdk フォルダ直下に作成します。
<!DOCTYPE html>
<html>
  <head>
    <title>API Gateway SDK Test</title>
  </head>
  <body>
    <h1>API Gateway SDK Test</h1>

    <!-- 入力フィールドを追加 -->
    <div>
      <label>Name: <input type="text" id="nameInput" value="test" /></label
      ><br /><br />
      <label>Age: <input type="text" id="ageInput" value="25" /></label
      ><br /><br />

      <button onclick="testAPIWithParams()">Test API with Parameters</button>
      <button onclick="testAPIWithoutParams()">
        Test API without Parameters
      </button>
    </div>

    <div id="result"></div>

    <!-- SDK dependencies -->
    <script
      type="text/javascript"
      src="lib/axios/dist/axios.standalone.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/CryptoJS/rollups/crypto-js.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/CryptoJS/rollups/sha256.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/CryptoJS/components/hmac.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/CryptoJS/components/enc-base64.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/url-template/url-template.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/apiGatewayCore/sigV4Client.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/apiGatewayCore/apiGatewayClient.js"
    ></script>
    <script
      type="text/javascript"
      src="lib/apiGatewayCore/simpleHttpClient.js"
    ></script>
    <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
    <script type="text/javascript" src="apigClient.js"></script>

    <script>
      // パラメータ付きテスト
      function testAPIWithParams() {
        var apigClient = apigClientFactory.newClient();

        var name = document.getElementById("nameInput").value;
        var age = document.getElementById("ageInput").value;

        // 正しい方法：第1引数でクエリパラメータを指定
        apigClient
          .usersGet(
            {
              name: name,
              age: age,
            },
            {}
          )
          .then(function (result) {
            document.getElementById("result").innerHTML =
              "<h3>Success with Parameters!</h3><pre>" +
              JSON.stringify(result.data, null, 2) +
              "</pre>";
          })
          .catch(function (error) {
            document.getElementById("result").innerHTML =
              "<h3>Error!</h3><pre>" +
              JSON.stringify(error, null, 2) +
              "</pre>";
          });
      }

      // パラメータなしテスト
      function testAPIWithoutParams() {
        var apigClient = apigClientFactory.newClient();

        apigClient
          .usersGet({}, {})
          .then(function (result) {
            document.getElementById("result").innerHTML =
              "<h3>Success without Parameters!</h3><pre>" +
              JSON.stringify(result.data, null, 2) +
              "</pre>";
          })
          .catch(function (error) {
            document.getElementById("result").innerHTML =
              "<h3>Error!</h3><pre>" +
              JSON.stringify(error, null, 2) +
              "</pre>";
          });
      }
    </script>
  </body>
</html>
html ファイルをブラウザで開き、Test API with Paramiters をクリックして以下のようなレスポンスを取得できれば成功です。
{
  "message": "Hello from SDK test!",
  "timestamp": "77d6efdf-bfac-4b69-9f86-c34a905e85f6",
  "input": {
    "age": "25",
    "name": "test"
  }
}

 まとめ今回は API Gateway で SDK を生成して使ってみました。

どなたかの参考になれば幸いです。

 参考資料API Gateway で REST API の SDK を生成する - Amazon API Gateway
REST API 用に API Gateway で生成された JavaScript SDK を使用する - Amazon API Gateway
1. Lambda 関数の作成

2. API Gateway の作成

3. SDK の生成

4. html ファイルの作成

5. 動作確認

6. リクエストパラメータの付与

まとめ

参考資料

Discussion
