Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript + GASでAPIを作る / Build API with TypeScript and GAS

D1d987836a880f8c29d1f63c88b92f80?s=47 shike
April 11, 2019
Programming
0
110

TypeScript + GASでAPIを作る / Build API with TypeScript and GAS

Cluexの社内LT大会で発表した時の資料です。

D1d987836a880f8c29d1f63c88b92f80?s=128

shike

April 11, 2019
Tweet

More Decks by shike

See All by shike
Code Generatorを作ってコンポーネントを自動生成しよう / Let's make code generator
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
1
1.6k
Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
0
89
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
0
1.4k
Reduxについて / Redux introduction and TODO example with Redux
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
0
82

Other Decks in Programming

See All in Programming
そこのSTMボード，ROS 2とオシャベリできるかも！？
91b03a57e0ef56fee59fbddc66a7f6fd?s=48 takasehideki
1
560
Keeping your team in top shape with the Gradle Enterprise API
5f69045a2ca496221cfc624405917cdf?s=48 runningcode
3
120
Treasure.map(): Functional programming in JVM-based languages
A5503b91ff91d4f8041bcce9bd5ca5ee?s=48 paranoidmonoid
0
130
Amazon ECSのネットワーク関連コストの話
D4d93646eedaaf5a9551cfc0ccd5b020?s=48 msato
0
610
競プロのすすめ
3a10a8f9ae25b2eb5bf3579dd3141dd8?s=48 uya116
0
650
dotdotdot_in_predict_function
465a530291aedb53fff5a6333e3dedaa?s=48 bk_18
1
170
Reactive Java Microservices on Kubernetes with Spring and JHipster
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
1
160
[DC SF 2022] Hitchhiking through Jetpack Compose
2fff9b69a69973e14026624f8c8a9672?s=48 jossiwolf
2
150
個人開発でReact Native + Expo製アプリを作った話
E58501f623cc1706b66097e7a9628a3b?s=48 ryonakae
1
430
Independently together: 
better developer experience & App performance
80d92d5d0bd0170aebf6e07589a0b571?s=48 bcinarli
0
150
Custom Design Systems in Compose UI
E86c7de302b490b7f2a67e54960510d0?s=48 rharter
5
510
Why Airflow? & What's new in Airflow 2.3?
4114559062197ddc69b311ea6e6207d0?s=48 kaxil
0
110

Featured

See All Featured
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Build The Right Thing And Hit Your Dates
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
19
1.2k
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
46
3.9k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
36k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.5k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
131
21k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
83
4.7k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
209
39k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k

Transcript

  1. TypeScript + GASで APIを作る Cluex Webグループ 柴山健吾

  2. 話すこと • GASでアプリケーションを作る • claspについて • TypeScriptについて • clasp +

    TypeScriptでAPIを開発してみる

  3. GASでアプリケーションを作る • Spread SheetsとかGoogle製品のAPIを使ってあんなこ とやこんなことできる • でも普通に作ろうとするとつらい ◦ ローカルで開発できない ◦

    バージョン管理できない ◦ 補完も何も効かないザコい専用エディター

  4. GASでアプリケーションを作る

  5. clasp

  6. claspとは • ローカルで開発できる ◦ バージョン管理できる • コマンド一つでデプロイできる • TypeScriptで開発できる！！！

  7. ＿人人人人人人人人人人人人人人人人＿ ＞　TypeScriptで開発できる！！　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

  8. TypeScript • 静的型付けをJavaScriptにもたらす JSのスーパーセット • 既存のJSコードをそのまま使っても動作する • JSコードにトランスパイルするので、 型情報はトランスパイル時に失われる •

    そのため実行時には型は保証されない

  9. clasp + TypeScriptで開発してみる Googleカレンダーから1週間の予定を取得して JSONで返すAPIを作ってみた

  10. claspのインストールとログイン

  11. Google Apps Script APIをオンに https://script.google.com/home/usersettings

  12. ローカル環境初期設定

  13. tsconfig.jsonを作成

  14. src/appscript.jsonのtimeZoneを修正

  15. src/Code.tsを実装

  16. src/Code.t s を実装

  17. src/Code.tsを実装

  18. コードをデプロイ

  19. 公開

  20. 公開

  21. 公開URLを叩く

  22. まとめ • clasp使えば自分の好きな開発環境で GASアプリケーションが開発できるし バージョン管理もできる • TypeScriptによる型付けで補完が効いて開発が捗る • 型安全による安心感 •

    静的型付けは正義

  23. ご清聴ありがとうございました