Mac + Node.js + Google Sheets APIでGoogleスプレッドシートを参照

採用系のプロダクトを提供している会社でもろもろ担当する予定のAkibinです。
最近は岡村ちゃんにハマってます。めちゃくちゃいまさら感満載ですが、サイコー！
[岡村靖幸 - ビバナミダ](https://www.youtube.com/watch?v=6bH_SAZixqQ)

# やってみたこと
Node.jsとGoogle Sheets APIでGoogleスプレッドシートの内容をMacから参照してみました。
ここらへんの情報はWebに結構多いですが、古くていまいち手順に手間取ったのと[Node.js quickstart](https://developers.google.com/sheets/api/quickstart/nodejs)のアクセストークン取得部分が大まかなので、自分の備忘録の意味も込めて記事にしてみます。

### 環境
* MacOS `12.2.1`
* Node.js `v16.14.2`
* npm `8.5.0`
* Google Sheets API v4
* Visual Studio Code

### 作業概要
1. Google Sheets APIを有効にする
1. アクセストークンを取得
1. ライブラリのインストール
1. VS Codeでスクリプト実行時の入力の受け取りをできるようにする
1. サンプルコードの実行（Node.jsからスプレッドシートの参照）

# 作業
### Google Sheets APIを有効にする
1. `GCP` > `IAMと管理` > `プロジェクトを作成`から任意のプロジェクを作成
1. 作成したプロジェクトを選択して`APIとサービス` > `ライブラリ`を開く
1. `Google Sheets API`を有効にする

### アクセストークンを取得
Google Sheets APIを使用するにはOAuthでアクセストークンを取得する必要があるようです。まず`OAuth 同意画面`でOAuthのポリシーとスコープを設定、その後`認証情報`からアクセストークンを取得します。
1. `APIとサービス` > `OAuth 同意画面`を開く
1. 今回はGoogleWorkSpaceのアカウントではないので、`内部`は選択できません。`外部`を選択して`作成`
1. `アプリ情報`で以下を入力、`保存して次へ`
    * アプリ名：任意の名前
    * ユーザサポートメール：自身の適当なメールアドレス
    * デベロッパーの連絡先情報：自身の適当なメールアドレス
1. `スコープ（アプリのユーザーに許可を求める権限）`を設定します。
    1. `スコープを追加または削除`をクリック
    1. 今回はスプレッドシートの参照のみなので以下を選択して`更新`<br>![Screen Shot 2022-04-04 at 9.29.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/ad94cd53-452d-c8af-bae3-d379ee596fcc.png)
    1. `保存して次へ`
1. `テストユーザ`でアプリへのアクセスを許可するユーザを追加します。<br>正式にアプリを使用する場合は本番環境に移行する必要がありますが、結構Googleの承認が大変みたいです。今回はテストなのでテストユーザのまま進みます
    1. `ADD USERS`
    1. アプリを使用するGoogleアカウントのメールアドレスを入れて`追加`
    1. `保存して次へ`
1. 設定内容を確認して`ダッシュボードに戻る`。次にアクセストークンを取得します。
1. `APIとサービス` > `認証情報`を開く
1. `認証情報を作成` > `Oauth クライアントID`
1. アプリケーションの種類：`デスクトップアプリ`を選択して、`名前`に任意の名前を入力。`作成`
1. アクセストークンが作成されます。`JSONをダウンロード`でトークンが記載されたjsonファイルをダウンロード
1. jsonファイルを作業ディレクトリに移動して名前を`credentials.json`に変更しておく

### ライブラリのインストール
VS Codeのターミナルで以下コマンドを実行してGoogleAPIのNode.jsクライアントライブラリをインストール
```zsh
npm install googleapis
```

### VS Codeでスクリプト実行時の入力の受け取りをできるようにする
追々実行する[Node.js quickstart](https://developers.google.com/sheets/api/quickstart/nodejs)のサンプルがOAuthトークンをreadlineで受け取ろうとしているが、Visual Studio Codeのコンソールは出力専用なので、VS Codeでスクリプトを実行すると入力の受け取りができないので、launch.jsonの設定を変え、コンソールを外部のものにする必要があるようです。
1. VSCode画面左の虫ボタンをクリックします。Run and Debugの下のcreate a launch.json fileをクリック<br>![Screen Shot 2022-04-04 at 10.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/4ca89913-309b-3066-eda2-3b9a4cd0826a.png)
1. 「Select Environment」と要求されるので選択肢の中から`Node.js(legacy)`を選択
1. 作成された`launch.json`ファイルを開き、`configurations`に`"console": "externalTerminal"`を追加<br>![Screen Shot 2022-04-04 at 10.05.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/063d8e8b-96df-933f-c749-bf0c238a8dda.png)
1. あと、`program`は、後々自分の作業ディレクトリに`index.js`を作成するので、そのパスに更新しておいてください<br>![Screen Shot 2022-04-04 at 11.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/3e15707b-43a6-bf08-ca63-b9cce595c1db.png)


### サンプルコードの実行（Node.jsからスプレッドシートの参照）
サンプルコードを実行して、[サンプルとして公開されているスプレッドシート](https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit#gid=0)の値を取得します。
![Screen Shot 2022-04-04 at 11.05.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/8edbb7d1-fde7-c615-be99-d18e3a8a00c2.png)

1. 作業ディレクトリに`index.js`を作成、[Node.js quickstart](https://developers.google.com/sheets/api/quickstart/nodejs)のサンプルコードを貼り付ける<br>![Screen Shot 2022-04-04 at 10.17.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/3a12a1ba-6b06-1de2-803b-647d9dbae04a.png)
1. `node index.js`でサンプルコードを実行
1. ターミナルに認証用のURLが表示されるので、`this url:`以降のURLをコピーしてブラウザでアクセス<br>![Screen Shot 2022-04-04 at 10.46.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/432b4086-84a0-fb06-5917-5fc05c224ff5.png)
1. アカウント選択画面でトークンを取得したアカウントを選択<br>![Screen Shot 2022-04-04 at 10.24.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/d2870b4f-0cc4-c46a-88c4-6c56f66665c2.png)
1. `続行`をクリック<br>![Screen Shot 2022-04-04 at 10.56.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/49f82b5d-37b1-0382-df33-198a4984d121.png)
1. `続行`をクリック<br>![Screen Shot 2022-04-04 at 10.25.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/747cf23e-f5a1-865e-6224-f0ccc7cb67d3.png)
1. Macのlocalhostで何も設定していなければ以下画面が表示されますが、URL部分の`code=`から`&scope`までの部分をコピー<br>![Screen Shot 2022-04-04 at 10.58.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/5ef4cf68-2788-1337-708d-645a64a79938.png)
1. ターミナルに戻りコピーしたコードを貼り付けEnterすると、サンプルスプレッドシートが参照できました！<br>![Screen Shot 2022-04-04 at 11.01.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/8ca44d93-4989-c80b-30e6-48529c8adbe5.png)

# こちらもチェックお願いします！
[Twitterアカウント](https://twitter.com/akibinmusic)
[Youtubeチャンネル](https://www.youtube.com/channel/UC-JOpwEnJn3gCrUA4NdCYgg)