Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

話すこと ● GASでアプリケーションを作る ● claspについて ● TypeScriptについて ● clasp + TypeScriptでAPIを開発してみる

Slide 3

Slide 3 text

GASでアプリケーションを作る ● Spread SheetsとかGoogle製品のAPIを使ってあんなこ とやこんなことできる ● でも普通に作ろうとするとつらい ○ ローカルで開発できない ○ バージョン管理できない ○ 補完も何も効かないザコい専用エディター

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

clasp

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

TypeScript ● 静的型付けをJavaScriptにもたらす JSのスーパーセット ● 既存のJSコードをそのまま使っても動作する ● JSコードにトランスパイルするので、 型情報はトランスパイル時に失われる ● そのため実行時には型は保証されない

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ローカル環境初期設定

Slide 13

Slide 13 text

tsconfig.jsonを作成

Slide 14

Slide 14 text

src/appscript.jsonのtimeZoneを修正

Slide 15

Slide 15 text

src/Code.tsを実装

Slide 16

Slide 16 text

src/Code.t s を実装

Slide 17

Slide 17 text

src/Code.tsを実装

Slide 18

Slide 18 text

コードをデプロイ

Slide 19

Slide 19 text

公開

Slide 20

Slide 20 text

公開

Slide 21

Slide 21 text

公開URLを叩く

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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