【JavaScript 2021】 Googleスプレッドシート を簡単に API化してくれる SSSAPI を JavaScript で扱う

この記事は、2021年の [JavaScript のアドベントカレンダー](https://qiita.com/advent-calendar/2021/javascript) の 7日目の記事です。

内容は、[Googleスプレッドシート を簡単に API化してくれる SSSAPI](https://sssapi.app/) に関するものです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Googleスプレッドシートの内容を簡単に API化してくれるサービス、試してみた！<br><br>●APIの利用方法<br>　<a href="https://t.co/y2uUzh4zE1">https://t.co/y2uUzh4zE1</a><br>●スプレッドシートの書き方<br>　<a href="https://t.co/lVoDCSz9Z8">https://t.co/lVoDCSz9Z8</a> <a href="https://t.co/LCJ0Itz5Av">pic.twitter.com/LCJ0Itz5Av</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1466940525362421765?ref_src=twsrc%5Etfw">December 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## SSSAPI について
SSSAPI は、上記のとおり「Googleスプレッドシート を簡単に API化してくれる」というものです。
以下の作者の方の記事に、いろいろ紹介やサービスの裏側の実装面について等が書かれていたりします。

●GASでもできるけど、スプシをAPI化するサービスを作ってみた。そして、そのときハマったこと。 - Qiita
　https://qiita.com/kira_puka/items/b61f8cd682161afb55a9

### 他サービスとの比較
公式の Zenn の記事に、以下の比較がありました。

●SSSAPIと他のサービスをいろいろ比較してみた(GAS/SheetDB/sheety/Stein/sheetsu)
　https://zenn.dev/sssapi/articles/22aaf266a1dd5f

## SSSAPI を JavaScript で使う
### API仕様
公式ページトップに、分かりやすい説明が画像で掲載されています。

![公式トップの記載1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2b392f64-ff84-a6f9-1ebf-f9e9a8c99e39.jpeg)

![公式トップの記載2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7ed9f70a-589a-dfa5-1bb1-35a174e586a9.jpeg)

スプレッドシートに書いた内容を丸ごと取得する以外に、特定の行を取得したり、取得した内容のソートをしたりなど、いろいろできるようです。

また、以下に使い方の情報がいろいろ書かれています。

●使い方やよくある質問
　https://sssapi.app/help

### サービスの利用料金
利用料金は以下となっていて、無料でも利用できます。
![料金.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c655175d-9337-119c-6be5-ec9bc675a904.jpeg)

### JavaScript で利用する
#### サンプル1
公式の FAQ を見ていたら、以下の GitHub のリポジトリにサンプルがあると書いてありました。

●sssapi/examples: SSSAPI Examples
　https://github.com/sssapi/examples
![GitHubのサンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e5709584-70b4-4dd6-8ae5-1bc17427ffa4.jpeg)

そこで、[バニラJS の例](https://github.com/sssapi/examples/blob/master/prefectures-js/index.html)として以下が掲載されていました。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SSSAPI Example(Vanilla JS)</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
    <style type="text/css">
      html {
        background-color: #ebdcf5;
      }
      body {
        padding: 20px 10px;
      }

      table {
        margin: 40px auto;
        box-shadow: 0px 2px 4px rgb(55 47 56 / 25%);
        max-width: 600px;
      }
    </style>
  </head>
  <body>
    <h1 class="title has-text-centered">SSSAPI Example</h1>
    <h2 class="subtitle has-text-centered">(Vanilla JS)</h2>

    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>ID</th>
          <th>名前</th>
          <th>かな</th>
          <th>English</th>
        </tr>
      </thead>
      <tbody id="container">
        <!-- ここにデータが挿入される -->
      </tbody>
    </table>

    <!-- 挿入するデータのテンプレート -->
    <template id="template">
      <tr>
        <td class="id"></td>
        <td class="name"></td>
        <td class="kana"></td>
        <td class="en"></td>
      </tr>
    </template>

    <script>
      window.onload = function () {
        // ロード時にAPIを呼び出す
        const API_URL = "https://api.sssapi.app/P6-UQD_usZfHC93t7gtos";
        fetch(API_URL).then((response) => {
          if (response.status != 200) {
            // APIの呼び出しが失敗した場合
            console.log(response.status);
            return response
              .json()
              .then((error) => alert(JSON.stringify(error, null, 2)));
          }

          // APIの呼び出しが成功した場合
          // template要素の取得
          const template = document.getElementById("template");

          return response
            .json() // JSONデータを取得
            .then((data) => {
              // 取得したデータを挿入
              data.forEach((v) => {
                // templateを複製
                const item = template.content.cloneNode(true);

                // 各項目の設定
                item.querySelector(".id").textContent = v.id;
                item.querySelector(".name").textContent = v.name;
                item.querySelector(".kana").textContent = v.kana;
                item.querySelector(".en").textContent = v.en;

                // 要素の追加
                document.getElementById("container").appendChild(item);
              });
            });
        });
      };
    </script>
  </body>
</html>
```

#### サンプル2
また、[公式ページの記事一覧](https://sssapi.app/articles)の中に、以下などいくつかの記事が紹介されていたりします。

●スプシとSSSAPIでお知らせや更新情報をサクッと作成する
　https://sssapi.app/articles/20211020_usacese_news

#### 試してみたもの
サンプルや公式ドキュメントを見て、最終的には以下のようなものを作りました。

まずは、HTML の内容から。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SSSAPI のお試し</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
  <style type="text/css">
    html {
      background-color: #d7dfff;
    }
  </style>
</head>

<body>
  <section class="section">
    <h1 class="title is-spaced has-text-centered">イベントで発表される内容</h1>
  </section>
  <div class="section pt-0">
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>登壇順</th>
          <th>登壇者名</th>
          <th>タイトル</th>
        </tr>
      </thead>
      <tbody id="container">
        <!-- ここにデータが挿入される -->
      </tbody>
    </table>
  </div>
  <!-- 挿入するデータのテンプレート -->
  <template id="template">
    <tr>
      <td class="id is-size-5"></td>
      <td class="name is-size-5"></td>
      <td class="title is-size-5"></td>
    </tr>
  </template>

  <script>
    window.onload = function () {
      const API_URL = "https://api.sssapi.app/【自分のAPI用の値】";
      fetch(API_URL).then((response) => {
        if (response.status != 200) {
          console.log(response.status);
          return response
            .json()
            .then((error) => alert(JSON.stringify(error, null, 2)));
        }

        const template = document.getElementById("template");

        return response
          .json()
          .then((data) => {
            data.forEach((v) => {
              const item = template.content.cloneNode(true);

              item.querySelector(".id").textContent = v.登壇順;
              item.querySelector(".name").textContent = v.登壇者名;
              item.querySelector(".title").textContent = v.タイトル;

              document.getElementById("container").appendChild(item);
            });
          });
      });
    };
  </script>
</body>

</html>
```

スプレッドシートはこんな感じです。
![スプレッドシート.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bef3e39e-a984-8e83-95db-2f3030ad127a.jpeg)

そして、画面表示はこのようになりました。
![HTML.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d74c9cd0-71b0-e928-b3be-a356c524c4ec.jpeg)

スプレッドシートを書きかえたら、こちらの表示が連動して変わってくれるのは良いです。

## おわりに
Googleスプレッドシート を簡単に API化してくれる SSSAPI を、HTML＋JavaScript と組み合わせて使ってみました。

今後は、Node.js との組み合わせなど、また違った使い方を試せればと思います。