GASでもハードコーディングは避けよう（自戒）

プログラミングってなんの言語からはじめるといいですか？という質問に私がお勧めしているのはGASなのですが（業界的にはニッチ）、環境構築の手間がなくてとっつきやすい分、思わぬ失敗も経験しやすいと思うんですよね。
GASをお勧めする理由としてはまた別に記事にしようと思います。

思わぬ失敗として思いつくのが、ハードコーディング（重要な情報を直接コードに書いちゃう。）

```javascript
const token = "token情報をここにペースト"
```
みたいな説明の記事ってよく見ると思うんですけど、ダブルクォーテーションマークは付けるの？付けないの？といった疑問も初心者（の頃の僕）は抱いていました。
それに、よっしゃこれで動くコード作れた！commitしてpushしよ！ってなって勢いのままtoken情報載ったコードをGithubに挙げてしまうことも経験しています（あくまで練習用のプロジェクトだけど）。

一般的に、重要な情報は直接コードに書き込まず、例えばenvファイルに切り出してgithubやデプロイ先には上げないようにするというのが言われますね。
でもGASだとenvファイルとして役割を持つ者がなかったり、別ファイルからのインポートという概念がないため（ファイル分けても自動的に変数や関数がまとめられて実行される）、ちょっとした工夫が必要になります。

その工夫として用意されているのが、PropertiesServiceクラスです。
基本的には、エディタの設定画面からスクリプトプロパティを保存して呼び出すことが推奨です。

![1キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524273/1f59c324-b975-a59f-b022-0df815269511.png)

設定から下の方にスクロールしていくと見つかります。
![2キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524273/7c6801a2-3a1f-cf74-cca7-5fb853a39db0.png)


ここに自分で値を用意していくこともできますが、プログラムによるsetも可能です。
例えば、スプレッドシートでIDとかTokenとかを書いてもらうことを想定しましょう。任意のユーザーが元のファイルをコピーして、C2セルに情報を入力すれば、その情報に基づいてプログラムが実行できるといった具合です。


![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524273/4cfcfd22-9f32-0ed0-327b-3b28ac587e85.png)

この時、GASエディタからスクリプトプロパティに値をsetするにはこのようなコードになります。
```javascript
// スプレッドシートのセルから値を取得してGASのスクリプトプロパティに保存する
function setIdData(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const targetSheet = ss.getActiveSheet();
  
  const tokenData = targetSheet.getRange(2,3).getValue();
  PropertiesService.getScriptProperties().setProperty("token", tokenData);
  return
}
```
これを実行することで、
![3キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524273/ee868c9e-0483-9eb9-f76c-b81147861bf6.png)
こんな感じでプロパティと値が保存されるようになります。setしたらスプレッドシートの方は「入力済み」とか値を削除してしまうとSecurity的には安心ですよね。


ちなみに開発側だと以下の画像のように自分で登録していくこともできます。
![4キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524273/e6a9d45f-af34-4f39-fdf1-fd80e17195de.png)


じゃあ無事に登録したら今度はどうやって呼び出して使うねんってことでGetしていきます。
一つの値を取得するにはこんな感じ。実行ログもスクショしてます。
![6キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524273/61c97d7b-3de1-322f-7ab4-75fd1d67680c.png)

そして複数の値を取得するにはちょっと手間がかかりますがこんな感じ。
![7キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524273/3747253b-cbc9-bc6c-f75e-559638b8aeb6.png)
取得したデータはそれぞれこんな感じになります。
```JSON:
keys：
[
  "api-key",
  "token"
]

properties：
{
  "token": "tesutoyounopuropathidesu-tokuntokawotukautokinibenri!",
  "api-key": "apinojouhoumodaijidayone"
}

propertiesArray：
[
  "apinojouhoumodaijidayone",
  "tesutoyounopuropathidesu-tokuntokawotukautokinibenri!"
]

formattedProperties：
[
  {
    "Key": "api-key",
    "Value": "apinojouhoumodaijidayone"
  },
  {
    "Key": "token",
    "Value": "tesutoyounopuropathidesu-tokuntokawotukautokinibenri!"
  }
]
```

今回の全体コードはこんな感じ。
```javascript
// スプレッドシートのセルから値を取得してGASのスクリプトプロパティに保存する
function setIdData(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const targetSheet = ss.getActiveSheet();
  
  const tokenData = targetSheet.getRange(2,3).getValue();
  PropertiesService.getScriptProperties().setProperty("token", tokenData);
  return
}

// GASのスクリプトプロパティから値を取得して利用する：一つの値
function getIdData(){
  const property = PropertiesService.getScriptProperties().getProperty("token");
  console.log(`property：${property}`)
}

// GASのスクリプトプロパティから値を取得して利用する：複数の値を配列として取得
function getIdDatas(){
  const keys = PropertiesService.getScriptProperties().getKeys() // これは配列として取得する
  const properties = PropertiesService.getScriptProperties().getProperties()  //これはキー・値のオブジェクトとして取得する

  // 値だけの配列にする
  const propertiesArray = keys.map((key) => properties[key]);

  // キー・値ごとの配列にする
  const formattedProperties = keys.map( (key) => ({
    "Key": key,
    "Value": properties[key]
  }))

  console.log(`keys：\n${JSON.stringify(keys, null, 2)}`)
  console.log(`properties：\n${JSON.stringify(properties, null, 2)}`)
  console.log(`propertiesArray：\n${JSON.stringify(propertiesArray, null, 2)}`)
  console.log(`formattedProperties：\n${JSON.stringify(formattedProperties, null, 2)}`)
}
```

これで安心安全のGASライフがはじめられますね！

今回のリポジトリ

https://github.com/takumakoike/public-qiita-hardcoding