はじめに

サーバーレスを趣味で始めてみたので、勉強がてらAWS Lambda＋APIGateway＋DynamoDBでTODOアプリを作成し始めました。
個人のメモとして、サーバー側とクライアント側での処理を記事にまとめます。（まだ作成途中です）

概要

Lambdaで使用する言語はNode
DynamoDBはidとtodoという項目のみを持ちます。
テーブル名は「todoTable」
今回は、GETとPOSTのみを実装します。

Lambdaで関数作成

本来であれば１つの関数にまとめたかったのですが、GETメソッドであることをLambdaに渡す方法がわからず、ひとまず関数を分けました。

まずはGETメソッドから。
単純に全てのカラムを取得します。（本来はあまりscanは使わない方がいいらしいが）

const AWS = require('aws-sdk')
const dynamo = new AWS.DynamoDB.DocumentClient()

exports.handler = (event, context, callback) => {
    const httpMethod = event.httpMethod
    const params = {
        'TableName': 'todoTable'
    }
    dynamo.scan(params, function (err, data) {
        const response = {
            statusCode: 200,
            body: JSON.stringify(data.Items)
        }
        callback(null, response)
    })
};

クライアント側でbodyからtodoListを取り出し表示するようにします。

続いてPOSTメソッド。

const AWS = require('aws-sdk')
const dynamo = new AWS.DynamoDB.DocumentClient()

exports.handler = (event, context, callback) => {
    const params = {
        'TableName': 'todoTable',
        'Item': {
            'id': event.id,
            'todo': event.todo
        }
    }
    dynamo.put(params, function(err, data) {
        if (err) {
            console.log('error')
        } else {
            console.log('success')
            const response = {
                statusCode: 200,
                body: JSON.stringify(data)
            }
            context.done(null, response)
        }
    })
};

try-catchでやるべきですが、今回は簡略化のためこのような実装にしました。（あとで全てtyr-catchに直します）
なぜかここでcallbackを使うと怒られました。
理由分かる方、教えていただきたいです。

あとはAPIGatewayでこれらの関数を各メソッドに割り当てて、デプロイしてください。
詳細は省きます。

クライアントサイド

今回はjQueryは使わずにXMLHttpRequestを使用して実装します。

まずは、画面がロードされた際にGETメソッドでテーブルの項目を取得し、表示をします。

window.onload = () => {
    const request = new XMLHttpRequest()

    request.open('GET', 'https://ほにゃらら.amazonaws.com/dev', true)
    request.responseType = 'json'

    request.onload = event => {
        const data = this.response
        const todoList = JSON.parse(data.body)
        for (task of todoList) {
            const item = task.todo
            // HTMLのulにliを突っ込むだけのメソッド
            createTodoList(item)
        }
    }

    request.send()
}

特に難しい部分はなし。

続いて、TODOを追加した際に走るイベントを追加。

// addというinputタグにイベントを追加
const addTask = document.querySelector('.add')
addTask.addEventListener('submit', e => {
    e.preventDefault()

    const id = Math.random().toString(36).slice(-8);
    const task = addTask.add.value.trim()
    const item = {
        'id': id,
        'todo': task
    }

    const request = new XMLHttpRequest()
    request.open('POST', 'https://ほにゃらら.amazonaws.com/dev/insert', true)
    request.setRequestHeader('Content-Type', 'application/json' );

    request.send(JSON.stringify(item))

    if (task.length){
        createTodoList(task)
        addTask.reset()
    }
})

これで完成です。サーバーレスは短時間で割といろいろできて楽しいですね！

躓いたところ

CORS問題

Access-Control-Allow-Origin

これを理由にずっと怒られていました。
↓参考記事
【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法
 AWS API Gateway クロスドメイン通信

XMLHttpRequestのパラメータの渡し方

現在のコード

request.send(JSON.stringify(item))

過去のコード（エラー発生）

request.send(item)

JSON形式にしておらず、３０分くらい悩まされていました。。。

終わり

今後はUPDATE、DELETEの実装をし、全て１つの関数にまとめたいと思っています。
それが終わったらなんかしらアプリ作ってみようかな。