GASでスプレッドシートをいじってみよう

こんにちは、堀井です。

今回はGASの使い方と、GASを使ってスプレッドシートをいじる方法について紹介したいと思います。
最終的にはAPIからデータを取得してスプレッドシートに記述するというところまで行いますので、よろしければ最後までご覧ください。

# GASとは

Google Apps Scriptの略で、主にGoogleのサービスを利用した自動化等を行うことができるスクリプト言語です。
JavaScriptを参考にして作られているので、JavaScriptを書いたことのある方であればより簡単に始めることができると思います。

# はじめに

GASを利用するために必要なことは以下になります。

・Googleアカウントを作成する

これだけです。

それ以外は全てブラウザ上で完結します。
それでは初めていきましょう。

# 導入

まずはGoogleドライブから新規でスプレッドシートを作成、開きます。
そして「拡張機能」タブの「Apps Script」を選択します。

![スクリーンショット 2024-10-30 20.45.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/4e0cd7ab-ed0b-f001-9c38-e5a449074dda.png)

するとGASのエディターが表示されます。
ここにコードを書いていくことになります。

![スクリーンショット 2024-10-30 20.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/2a752027-f62e-c7f6-946e-f5d753073907.png)

# 出力

まずはお作法通り「hello world」を出力してみます。

myFunctionを以下のように変更します。

```myFunction
function myFunction() {
  console.log("hello world")
}
```

![スクリーンショット 2024-10-30 20.51.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/6a525060-9ecf-518d-09d7-2b1a12d910c1.png)

変更が終わったらフロッピーディスクアイコンを選択して保存し、「実行」を選択します。

すると

![スクリーンショット 2024-10-30 20.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/cfd6a564-28ac-dd79-09a8-1b4c0e8e7123.png)

しっかりと表示されましたね。

# スプレッドシートに文字を表示

次にスプレッドシートの最初のセルに文字列を表示してみます。

myFunctionを以下のように変更します。

```myFunction
function myFunction() {
  let sheet = SpreadsheetApp.getActiveSheet()
  sheet.getRange(1,1).setValue("Hello World")
}
```

![スクリーンショット 2024-10-30 21.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/1de4eaaf-e6f9-0029-f8fd-455d204b7d7c.png)

変更が終わったらフロッピーディスクアイコンを選択して保存し、「実行」を選択します。

すると

![スクリーンショット 2024-10-30 21.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/c4d0c4a2-67d4-baa8-dcb2-595bd7f856f9.png)

このような画面が表示されるので、「権限を確認」を選択します。

![スクリーンショット 2024-10-30 21.00.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/12c49c72-d56d-6bca-00a3-db1d67221c43.png)

スプレッドシートを開いているアカウントを選択します。

![スクリーンショット 2024-10-30 21.00.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/eaf5b57d-d100-f7a6-dbf1-5dd1e41b5068.png)

左下の詳細を選択します。

![スクリーンショット 2024-10-30 21.01.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/9ecd9897-2a41-4015-032f-0dc0a872a410.png)

「無題のプロジェクト（安全ではないページ）に移動」を選択します。

![スクリーンショット 2024-10-30 21.01.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/6e94735c-9eb6-b30e-d6dd-bb0c10b8f718.png)

「許可」を選択します。

![スクリーンショット 2024-10-30 21.01.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/5d977cd5-993f-0051-f5ed-8869ef3d7652.png)

これで実行完了しました。
スプレッドシートを見てみましょう。

![スクリーンショット 2024-10-30 21.01.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/48632888-a3c2-fd61-d7f6-ff786678b103.png)

しっかり表示されていることがわかります。

ここで先ほど入力したソースコードについて簡単に説明をします。

### ソースコードの説明

```
  let sheet = SpreadsheetApp.getActiveSheet()
```

スプレッドシートを取得しています。

```
  sheet.getRange(1,1).setValue("Hello World")
```

スプレッドシートの行1列1に「Hello World」を表示します。

# APIのレスポンスをスプレッドシートに表示

最後に実践編ということで天気情報を取得できるAPIを利用して、そのレスポンスをスプレッドシートに表示してみようと思います。

myFunctionを以下のように変更します。

```myFunction
function myFunction() {
  let url = 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json'
  let response = UrlFetchApp.fetch(url)
  let json = JSON.parse(response.getContentText())

  let sheet = SpreadsheetApp.getActiveSheet()
  sheet.getRange(2,1).setValue(json["publishingOffice"])
  sheet.getRange(2,2).setValue(json["reportDatetime"])
  sheet.getRange(2,3).setValue(json["targetArea"])
  sheet.getRange(2,4).setValue(json["headlineText"])
  sheet.getRange(2,5).setValue(json["text"])
}
```

![スクリーンショット 2024-10-30 21.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/bf0d887b-e5f3-4d93-e6e5-6339c8fc34fc.png)

変更が終わったらフロッピーディスクアイコンを選択して保存し、「実行」を選択します。

すると、「スプレッドシートに文字を表示」で表示された「承認が必要です」が表示されますので、先ほどと同じように進めていきます。

![スクリーンショット 2024-10-30 22.14.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/5f745a67-fc4b-241d-bf02-718dadd6bd0a.png)

これで実行完了しました。
スプレッドシートを見てみましょう。

![スクリーンショット 2024-10-30 21.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/e2cee1e1-d5fb-dd99-cfe2-4aff2acc4a8d.png)

しっかり表示されていることがわかります。

ここで先ほど入力したソースコードについて簡単に説明をします。

### ソースコードの説明

```
  let url = 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json'
  let response = UrlFetchApp.fetch(url)
  let json = JSON.parse(response.getContentText())
```

APIを実行してJson形式のレスポンスを扱いやすい形にしています。

```
  let sheet = SpreadsheetApp.getActiveSheet()
  sheet.getRange(2,1).setValue(json["publishingOffice"])
  sheet.getRange(2,2).setValue(json["reportDatetime"])
  sheet.getRange(2,3).setValue(json["targetArea"])
  sheet.getRange(2,4).setValue(json["headlineText"])
  sheet.getRange(2,5).setValue(json["text"])
```

スプレッドシートの行2に取得結果を表示します。

# まとめ

いかがだったでしょうか？

今回はスプレッドシートにAPIのレスポンスを表示するところまでやってみました。

GASは他にも、YoutubeのAPIを利用して動画の情報を定期的にスプレッドシートに保存するようなこともできたりするので、興味を持った方はGASを使ってみてください。

以上、堀井でした。