こんにちは。はやしです！
DynamoDBのページネーションはAWS SDK For JavaScriptの「LastEvaluatedKey」というnextToken的なものを利用しながら独自ロジックを実装していましたが、AWS SDK For JavaScript v3ではページネーションを簡単に実装できると知ったので、Express上で試してみました。

# 実装
```typescript:index.ts
import express, { Express, Request, Response } from "express";
import getUsers from "./handler/getUsers";

const app: Express = express();

app.get("/users", async (req: Request, res: Response) => {
  const data = await getUsers(req);
  res.status(200).json({ data });
});

app.listen(8080, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${8080}`);
});
```
```typescript:handler/getUsers.ts
import { Request } from "express";
import {
  DynamoDBClient,
  ScanCommandInput,
  paginateScan,
} from "@aws-sdk/client-dynamodb";

const tableName = "Users";

export default async (req: Request) => {
  const reqPage = req.query.page;

  const client = new DynamoDBClient({
    credentials: {
      accessKeyId: process.env.ACCESS_KEY_ID,
      secretAccessKey: process.env.SECRET_ACCESS_KEY,
      sessionToken:process.env.SESSION_TOKEN,
    },
  });
  const paginatorConfig = {
    client,
    pageSize: 2,
  };
  const params: ScanCommandInput = {
    TableName: tableName,
  };
  const paginator = paginateScan(paginatorConfig, params);

  let i = 1;
  for await (const page of paginator) {
    if (i.toString() === reqPage) {
      return page.Items;
    }
    i++;
  }
  return { message: "user not found" };
};
```
検証なのでページのサイズは2にしました。
# ポイント
実装コードにある「paginateScan」はAWS SDK For JavaScript v3で新しく追加されたページネーション用の機能です。
これを利用することで独自ロジックなしにページネーションが実装可能になりました。
DynamoDBのデータ検索において「paginateScan」だけでなく「paginateQuery」もあるので全件取得と検索で使い分けると良さそうです。

# 動作確認
## テストデータ
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/4f904635-c59b-4860-8cd6-d40a76ce0358.webp)

## 実行結果
今回はページネーションの検証にフォーカスしているので順序を担保できていませんが、「paginateQuery」でScanIndexForwardパラメータを利用したりすれば解決できます。他にも方法はありますが、今回は割愛します。
1ページ目（user1とuser4）
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/e2f09c4d-ff3d-4639-861c-e8613fa591b0.webp)
2ページ目（user5とuser2）
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/50c7dd97-f29c-4e87-9ba9-c16ac2ce9db0.webp)
3ページ目（user3）
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/da6fcf8e-8247-4dd9-9dae-a4bf315f0ea3.webp)

# 補足
DynamoDBの知見がある人向けになってしまいますが、今回紹介したpaginate系はDynamoDBDocumentClientと併用できません。
代わりに「@aws-sdk/util-dynamodb」のmarshall,unmarshallを利用しましょう。

# まとめ
直近のプロジェクトでもDynamoDBページネーション周りで困っていたので、この機能を見つけれてよかったです。
皆さんもDynamoDBを利用する機会があれば、利用してみてはいかがでしょうか。
以上、DynamoDBのページネーション検証でした！👋


# 参考資料
[AWS SDK for JavaScript v3ではページネーション処理がとてもシンプルになった | DevelopersIO](https://dev.classmethod.jp/articles/pagination-with-async-iterators-in-aws-sdk-for-javascript-v3/)


DynamoDBのページネーション実装方法についての話

こんにちは。はやしです！
最近サーバレスなAPIをローカルで開発する際に、以下を実現する良い方法はないかと検証していました。
- ローカル上での動作確認
- ホットリロードを使いながら開発
- 上記をネイティブ機能&軽量なソリューションで実現。

「Serverless Framework」「AWS SAM」「Serverless Express」の検証して、個人的に最も良いと感じた「Severless Express」を今回記事にしたいと思います。

※「AWS SAM」はそもそも2022年12月29日時点ではホットリロードに対応していませんでした。

# Expressのディレクトリ構成
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/012e8bb8-aac0-4d7b-af56-df4424421d9e.webp)
- middleware/local.ts・・・ローカル実行で使用する
- middleware/lambda.ts・・・Lambdaで実行する際に使用する
- src/app.ts・・・共通で使用するサーバー本体

# 実装
## API Gateway + Lambdaの実装(AWS CDK)
```typescript:agw-express-stack.ts
import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as apigateway from "aws-cdk-lib/aws-apigateway";
import * as lambda from "aws-cdk-lib/aws-lambda";
import { NodejsFunction } from "aws-cdk-lib/aws-lambda-nodejs";

export class AgwExpressStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    const fn = new NodejsFunction(this, "Fn", {
      runtime: lambda.Runtime.NODEJS_18_X,
      entry: "src/lambda/agw-express/middleware/lambda.ts",
    });
    new apigateway.RestApi(this, "Api", {}).root.addProxy({
      defaultIntegration: new apigateway.LambdaIntegration(fn),
    });
  }
}
```
「NodejsFunction」でデプロイ時にTypeScriptをコンパイルするようにしています。
また全てルーティングパスはLambdaにリクエストされるようにしています。

## Expressの実装
```typescript:middleware/local.ts
import app from "../src/app";
const port = 3000;
app.listen(port, () => {
  console.info(`listening on http://localhost:${port}`);
});
```
```typescript:middleware/lambda.ts
import serverlessExpress from "@vendia/serverless-express";
import app from "../src/app";

export const handler = serverlessExpress({ app });
```
```typescript:src/app.ts
import "source-map-support/register";
import express, { Request, Response } from "express";

const app = express();
app.use(express.json());

app.get("/", async (_: Request, res: Response) => {
  res.status(200).send({
    message: "hello",
  });
});

export default app;
```
```json:package.json
{
  "name": "agw-express",
  "version": "1.0.0",
  "scripts": {
    "dev": "concurrently \"npx tsc --watch\" \"nodemon -q build/middleware/local.js\""
  },
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "source-map-support": "^0.5.21",
    "@types/source-map-support": "^0.5.6",
    "@vendia/serverless-express": "^4.10.1",
    "@types/aws-lambda": "^8.10.109",
    "@types/express": "^4.17.15",
    "concurrently": "^7.6.0",
    "nodemon": "^2.0.20",
    "typescript": "^4.9.4"
  }
}
```
「@vendia/serverless-express」が今回の主役です。
数行でローカル実行とLambda実行の両方を可能にしてくれます。

# 動作確認
## ローカル実行(ホットリロード)
1.「npm run dev」を実行すると以下のようにサーバーがポート3000で起動する。
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/f894fdd8-5a46-4f2c-a361-49f2afc1a07b.webp)

2.リンクをクリックすると、ブラウザで「hello」が返ってくる。
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/e0f2c376-a10f-489d-a868-b6e71f36b173.webp)

3.「hello」を「helloworld」にコード修正する。
```typescript:src/app.ts
import "source-map-support/register";
import express, { Request, Response } from "express";

const app = express();
app.use(express.json());

app.get("/", async (_: Request, res: Response) => {
  res.status(200).send({
    message: "helloworld",
  });
});

export default app;
```

4.ブラウザをリロードすると「helloworld」が返却される。
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/ffb0c258-edf0-48e8-845b-dbf207172671.webp)

## API Gateway + Lambdaで動作確認
API Gatwayで[GET] / のテストを実行すると、「helloworld」が返却される。
![](https://kokosyna-post-bucket-prd.s3.ap-northeast-1.amazonaws.com/6552d896-2c26-4879-8384-2b2f7f085588.webp)

# まとめ
今までサーバレスアーキテクチャのローカル開発で苦労していましたが、Serverless Expressで解消できそうです。
本記事が皆さんにもお役に立てれば幸いです。
では！👋

ローカルでLambdaコードを動作確認して、デプロイしてみた。

# はじめに
自分の作業用のスクリプトがほしいときありませんか。
何にも設定しないでいると、ディレクトリを雑に作ってgit addしそうになるのは困りますし、
フロントだとなくてもなんとかなりますし、考えるのが面倒で結局作らない人って意外といるのかもしれないと思います。
気軽にgit管理できない類のものだからか、あまりこの手の情報がないのも障壁になっているのではないでしょうか。

残念ながら私はいい考えを持っているわけではなく、むしろこの記事きっかけで何かコメントくれる人いないかな、と思って書いてます。
参考程度でお願いします。

# 概要
基本的に以下のことが解決できればいいのではないでしょうか。

1. とりあえずディレクトリ作ってgit管理にしないようにしたい
2. package.jsonに書くわけにはいかないのでその代わりがほしい
3. (Reactの場合) jsx, tsxを扱いたい

では見ていきましょう

# 1. とりあえずディレクトリ作ってgit管理にしないようにしたい
ググればすぐ出てきますし、普通に知っているかと思いますが念のため。
以下のファイルにgit管理したくないファイル/ディレクトリ名を記載するだけです。

`./.git/info/exclude`

_my_scriptsとかを作って、excludeに記載するだけです。

# 2. package.jsonに書くわけにはいかないのでその代わりがほしい
理想はyarn xxxで実行したいですが、package.jsonに自分用のコマンドは書けません。
妥協案として、今は使われないタスクランナー系のツールだったり、別言語で使用されるビルドツールを使用します。

- Makefile
- gulp
- Gradle

自分のなじみのある言語で使っている(使っていた)ツールを使うだけです。
package.jsonじゃなければほとんどのケースでなんでも使えるはずです。

ちなみに私はなじみのある言語を持っていないのでMakefileでやってます。
```
touch Makefile
# vscodeなので以下で。開いてMakefileって書くだけ。
code ./.git/info/exclude
```
私のように、さっと使えるものがないなら[cargo-make](https://github.com/sagiegurari/cargo-make)とかを使うと「Rust触らないと...」という罪悪感が多少和らぎます。

# 3. jsx, tsxを扱いたい
スクリプトの中で、jsx, tsx使えたらいいのに、と思うことありませんか?
これは自分用のテストファイル置き場を作ってテストファイルとして管理すると割と解決します。
最近はテストがあるプロジェクトも多いと思うため「なんだそんな話か」っていうレベルかもしれません。
ですので、テストがない環境にいる人にこそオススメしたいです。きっとtesting-libraryだけは入っているはずです。
「テスト書かないと...」という罪悪感が割と和らぎます。
なんとなくテスト駆動で開発している気持ちになれます。
やっぱりコマンド叩いてすぐフィードバックが返ってくるのは気持ちいいです。
これもexcludeしておいたらいいのですが、テストが通る状態にしておかないといけないのが欠点です。

# 最後に
こういった情報がなかなか見つからず、なんとなく私がやっている手法の紹介でした。
ほとんどのエンジニアの方は私より効率のいい方法を使っているはずです。
是非、教えてください!

# おまけ
※以下、vscode前提の話です。
今は自分用のシェルスクリプト書くくらいならzx書きます。
ただ、全員の同意をとってnode_modulesに入れるのは面倒です。
ですので、上記同様に自分のフォルダを切ってそこに置いて運用しています。
zxと書いてますが、[zx_deno](https://deno.land/x/zx_deno@1.2.2)使ってます。

ただ、eslintがプロジェクトのものとぶつかってエラーが出たり、このスクリプトのせいでbuildが通らなくなってしまったり(TypeScript)。。

- build対象外になるようにスクリプト用のディレクトリ名をbower_componentsにする(tsconfigで書かなくてもdefaultでexcludeになっている)
- プロジェクトの都合でsettings.jsonを触れないためcode-workspaceをルートディレクトリに置いて、そこにdeno.enablePathsを記載する

```json
{
  "settings": {
    // エディタの色をかえたりとか
  },
  "deno.enablePaths": ["bower_components"]
}
```

bower_componentsだなんてすごく格好悪いので誰か助けてください。。
