ランニングコスト0の書籍管理webアプリ！　GASってどんなもの？

# ランニングコスト0の書籍管理webアプリを開発！　GASってどんなもの？

※こちらの記事の内容は2022/3/19に執筆したものです。

## 初めに

この記事は、[以下の元記事](https://qiita.com/keisuke_suzuki_engineer/items/3be494864dffb3b5543b)で紹介しているアプリを構築する際に使ったGASの機能について紹介している記事です。元記事からご覧ください。


https://qiita.com/keisuke_suzuki_engineer/items/3be494864dffb3b5543b

## GASってなに？

GASとは __google application script__ の略で、主にgoogle drive上のリソース(各種ファイル)にアクセスし操作することができます。GCP(google cloud platform)と連携することもできるよう(というかこちらが本来の使い方？)ですが、今回はランニングコスト0で行くのでgoogle drive上のリソースのアクセスの機能のみ使っていきます！


## どうやって始めるの？

いくつかやり方はありますが、今回はスプレッドシートに紐づけた形でGASプロジェクトを作成していきます！
やり方は簡単で、

1. 適当にスプレッドシートを作成して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/dbf73482-2669-7009-3cf5-daaff9bd2846.png)

2. 上の方にあるタブから拡張機能を選択し、その中の __Apps Script__ を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/12a809f5-0085-c5df-5acb-c878c87ea6dc.png)

3. 別タブでこんなのが開いてプロジェクトの作成完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/3a21768b-ab16-501c-dd64-6082c304ee7a.png)


## 何ができるの？
できることはいくつかあるのですが、今回のアプリではwebAPIとして実行できるように作っていきます。
なおwebAPIのように使えるように作りますが、gasの機能上の名前は __ウェブアプリ__ です。ウェブアプリとは別に実行可能APIというものもありますが、それはGCPにつなぐ必要がある(有料な)ので今回は不採用です。

なおwebアプリとしてデプロイする場合、(少なくとも無料の範囲では)ホスト名もパスも自動生成で選ぶことはできず、メソッドはGETとPOSTの2種類のみです。

## やってみよう！

基本構文はjsなので、webページを作った経験がある人であれば、gas用のメソッドやオブジェクトを調べる程度で始められるので学習コストは低めな印象です。

### スプレッドシートにアクセスしてみよう！

1. スプレッドシートのIDを確認します。
スプレッドシートのIDとは、開くときのリンクのパスワードみたいなやつ(下の画像の下線部)のことです。
これはスプレッドシートごとに違うので、操作したいスプレッドシートのIDを確認してgasに変数として持たせておきましょう。なお画像のurlは私が記事執筆用に作ったリンクなので外部に公開していませんし、中に大したデータはありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/a3716172-4774-8194-c439-f5837a0b72c1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/753b61d8-b0b6-542c-c9e8-a238f40d3869.png)

1. シートを名前で選択して準備完了！
ここでは「てすと」という名前のシートにアクセスしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/e5f4c069-b6ac-8926-00bf-da34f9593036.png)

スプレッドシートはこんな感じで、左上から数えて縦に1,横に1の場所のセルに「hello」と入れてあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/b744135c-e3aa-af69-b00e-8075b8997db9.png)

1. シートから読み書きしてみよう！
A1(左上から数えて縦に1,横に1の場所)のセルから文字を読み込んで、B1(左上から数えて縦に1,横に2の場所)のセルに文字をしまってみましょう。コードはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/58270c43-30b2-29e6-1d6c-55b078de2101.png)
実行後のシートと表示されるログはこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/34da10c8-b660-36e3-c239-a4d647e49c54.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/0799043f-1372-1e47-2e14-962730953ade.png)




### webAPIを公開してみよう！
1. doGetメソッドとdoPostメソッドを用意します。
ここでリクエストを受け付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/ae81056a-338e-541b-5757-0a5b372a13fc.png)


1. パラメータを受け取れるようにします。
リクエストパラメータとbodyで受け取り方が違うので注意です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/78db115d-f676-722c-c936-b2359cb540d7.png)

1. レスポンスを返してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/5b6bc8b2-60ad-d9b2-2545-e0b125cd74cf.png)

1. デプロイしてみます
右上のデプロイ>新しいデプロイを押すとこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/4d28c744-8c56-fb71-31ce-db3e47c4af17.png)
ポータルの左上の種類の選択の右の歯車からウェブアプリを選択するとこうなります。
ひとまずはアクセスできるユーザーを全員に設定して、デプロイボタンを押したらデプロイ完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/5f7b1776-2ffe-f5c4-277e-578eb71147ce.png)
デプロイが完了するとアクセス用のURLが表示されます。

1. アクセスして動確してみます。
postman(メソッドの種類やパラメータやヘッダ等を指定してリクエストを送れるGUIツール)を利用してGETとPOSTの2種類のリクエストを送ってみます。
まずデプロイ時に表示されたurlにGETでリクエストを送ったら下のようなレスポンスが返ってきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/7d41d4a6-f98b-2b5e-f8b5-9a19ee1fa99b.png)
続いてデプロイ時に表示されたurlにPOSTでbodyに適当な値を設定してリクエストを送ったら下のようなレスポンスが返ってきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601154/bb42e058-f620-a81e-c9d0-dc1c959b11de.png)



以上GASについての簡単なあれこれでした！