3分で API を作って世の中にデプロイするライブコーディング〜今日から君もスピードスターエンジニア〜

3分間でサーバーを用意し、APIを実装して世の中に公開するまでの手順を録画しました。（一発撮りなのでタイポ多くてすみません。。。）
一連の動画は以下からご笑覧いただけますと幸いです。
https://youtu.be/h1wuGsaJZa4


qiita では gif 動画だと 10MB 以上はアップできないっぽいので、4分割にしてそれぞれ何をしているか解説します。

ハッカソンやプロトタイプの作成、新規事業での仮実装...etc などの実装スピードが勝負の明暗を分けるシチュエーションにお役立て頂けますと幸いです。

しょっぱなからネタバレで大変恐縮ですが Google Apps Script を使います。。。
## PART 1 Google Drive で SpreadSheet を新規作成(0秒~33秒)
1. Drive を開いて
2. SpreadSheet を新規作成
3. 「ツール」 -> 「スクリプトエディタ」　より、 Google Apps Script を書く準備を行います
![3分で api を作って世の中にデプロイする、その１.gif](https://qiita-image-store.s3.amazonaws.com/0/26095/902ec528-7e90-e150-a6f7-438534b473b2.gif)

### PART 2 API のコードを書いてデプロイする(33秒~1分10秒)
4. `doGet` 関数を作成。
組み込みの `doGet` 関数を使えばすぐさま API になります。 https://developers.google.com/apps-script/guides/web
5. `ContentService.createTextOutput()` で文字列を出力。
6. 「公開」 -> 「ウェブアプリケーションとして導入」 -> 「アプリケーションにアクセスできるユーザー」 -> 「全員（匿名ユーザーを含む）」 -> 「導入」 の順でクリックし、 API を世の中にデプロイ
7. `curl -L 表示されたエンドポイント` で API からデータを取ってくることができました

**実質ここまでならほぼ　１分でデプロイまでできました。**

![3分で api を作って世の中にデプロイする、その２.gif](https://qiita-image-store.s3.amazonaws.com/0/26095/b8f32d95-eca8-d079-dcf2-bbb2a6364e6a.gif)

## PART 3 もうちょっと API っぽくデータベースからデータを取ってこれるようにする(1分10秒~2分17秒)
8. SpreadSheet をデータベースに見立てて、データを入力します。このデータを API で返せるようにします。
9. GoogleAppsScript 側で、 SpreadSheet のデータにアクセスするコードを書きます。
10. `SpreadsheetApp.getActiveSpreadsheet()` でスプレッドシートのインスタンスを作成。 
11. `getSheetByName('シート1')` で取ってくるシートを指定。
12. `getRange('A1:A4').getValues()` で取ってくるセルの範囲を指定してデータを取得。
13. 取ってきた data を `JSON.stringify(data)`　して、オブジェクトを文字列にして API のレスポンスデータとして返します。
![3分で api を作って世の中にデプロイする、その３.gif](https://qiita-image-store.s3.amazonaws.com/0/26095/0b21b025-bfb7-2339-9ce4-355bfce858ee.gif)


## PART 4 データベースからとってきたデータをレスポンスにするため、 API を更新する(2分17秒~3分00秒)
14. PRAT 2 の 6 の手順と同じように、更新します。　**この時、バージョンを「新規作成」にしないと、更新されません**
15. SpreadSheet にアクセス許可を求められるので、許可してあげます
16. 更新できたら `curl -L 表示されたエンドポイント` で API からスプレッドシートに入力したデータを取ってくることができました
![3分で api を作って世の中にデプロイする、その4.gif](https://qiita-image-store.s3.amazonaws.com/0/26095/8a02da2c-c62b-73db-8bc6-86b81c5861cc.gif)

## はい。できました。


**「3分で API は作れる。」**


あとはフロントエンドでなんとかしましょう。

一気通貫で見る場合は、以下の動画 URL からご覧ください。（qiita さん 動画とか貼れるようにならないですかね？ ~~もしかして、僕が知らないだけであるのかしら？~~）
https://youtu.be/h1wuGsaJZa4

コメントで教えていただきました。
twitter に youtube のリンクを貼ったものを投稿し、 qiita に埋め込みすると、そのまま見れるそうです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">上記記事のライブコーディングの全編動画はこちらから<a href="https://t.co/ypsZrS31Zz">https://t.co/ypsZrS31Zz</a></p>&mdash; numa 💤 pookエンジニア (@numanomanu) <a href="https://twitter.com/numanomanu/status/1021175407821799424?ref_src=twsrc%5Etfw">2018年7月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


### 補足事項

- [新規事業開発におけるエンジニアの心得〜失敗事例から学ぶツクラナイ開発〜](https://engineer.blog.lancers.jp/2018/06/knowledge_of_engineers_in_new_business_development/) というタイトルで登壇した際に、早く作って早く出すにはどうするか？というポイントを解説する例として、ライブコーディングして見た時の内容です。
- doGet があるように doPost もできるので、値を送ることもできますし、doGet でクエリパラメータを受け取ってスプレッドシートに書き込むとかもできます。
- 需要がありそうなら doPost 編などまた書きます。

コピペ用にコードも貼っときますね

```js
function doGet(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('シート1');
  var data = sheet.getRange('A1:A4').getValues();
  return ContentService.createTextOutput(JSON.stringify(data))
}
```


 
### 注意事項
- API のリクエスト制限や、レスポンスタイムは保証できないので、くれぐれも GAS を使うときは自己責任でお願いいたします。
- 自分の GAS 知識は 2014 年くらいから進歩してないので、もしかしたら 2018 年の GAS はもっとすごいやり方があるかもしれないです。