【5分でできる！】自作APIをHTML/JavaScriptで読み書きしたい人が読む記事

ちゃちゃっと自作APIを使いたいとき

ハッカソンとかでテキトーに作ったDBを読み書きしたいとき、ありますよね。

①APIを作りましょう

まずはこの記事を参考にしてAPIを作りましょう。
3分でできるらしいので、残りは2分です！
https://qiita.com/cog1t0/items/b3b4a24236451b666129

②以下のコードをコピペ

API URL、キー名、カラム名や値は作ったAPIに合わせて変更してください。

index.html

<button id="button">ボタン</button>
<script>
    window.addEventListener('DOMContentLoaded', async () => {
        const res = await fetch('[httpsから始まるAPI URL]/シート1');
        const data = await res.json();
        // dataはJson形式
        console.log(data);
        // data[n].カラム名 でデータ取得
    })

    const write = async () => {
        const res = await fetch('[httpsから始まるAPI URL]/シート1', {
            method: 'PUT',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                "condition": { "キー": "りんご" },
                "set": {
                    "メニュー1": "ソーダ",
                    "メニュー2": "サラダ",
                    "メニュー3": "ケーキ",
                }
            })
        });

        const result = await res.json();
        console.log(result);
    };

    const button = document.getElementById('button');
    button.addEventListener('click', write)
</script>

このようなデータベースを想定しています。
行、列やセルを指定して取得するのではなく、キー列の値を指定して取得します。

以上！