Netlify FunctionsでTypeScriptを使う方法 / netlify-lambda-typescript

by mottox2

Slide 1

Slide 1 text

netlify-lambda TypeScript Netlify Meetup #3 2018.12.13 - @mottox2

Slide 2

Slide 2 text

TypeScript, React, Gatsby, Ruby on Rails エンジニアの登壇を応援する会 write-blog-every-week, JS Ninja Gatsby, netlify-lambda, etc. お仕事コミュニティ OSS mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

#netlifytokyo 技術書典5で書きました

Slide 5

Slide 5 text

#netlifytokyo ブログもJAMstack（Gatsby+esa.io）mottox2.com

Slide 6

Slide 6 text

#netlifytokyo 注意 • 本⽇の内容は2018.12.13時点での情報です。 • JavaScriptの話をします。Golangの⼈はごめんなさい。

Slide 7

Slide 7 text

#netlifytokyo 今⽇の流れ • Functionsの紹介 • netlify-lambdaの説明 • TypeScriptで書いていく

Slide 8

Slide 8 text

#netlifytokyo Functions は AWS Lambda を簡単に使えるようにしたもの

Slide 9

Slide 9 text

#netlifytokyo Functions

Slide 10

Slide 10 text

#netlifytokyo Functions

Slide 11

Slide 11 text

#netlifytokyo Functions

Slide 12

Slide 12 text

#netlifytokyo Functions

Slide 13

Slide 13 text

#netlifytokyo netlify-lambda • build/serveコマンドを提供するCLIツール • netlify.tomlの内容からいい感じにビルドしてくれる。 • build: いい感じのwebpackとbabelの設定でビルド • serve: expressを⽴ち上げて開発サーバーとして振る舞う *netlify/netlify-lambda https://github.com/netlify/netlify-lambda

Slide 14

Slide 14 text

#netlifytokyo netlify-lambdaが1.1.0から TypeScriptに対応した

Slide 15

Slide 15 text

#netlifytokyo netlify-lambdaでTypeScriptを使う（1） • @babel/preset-typescriptをインストール • 右の.babelrcをディレクトリに設置 *netlify-lambdaはディレクトリ内の .babelrc を優先的に使⽤します。

Slide 16

Slide 16 text

#netlifytokyo netlify-lambdaでTypeScriptを使う（2） • 型定義が欲しいのでインストール • 型定義はaws-lambdaのものを使います

Slide 17

Slide 17 text

#netlifytokyo netlify-lambdaでTypeScriptを使う（3） • あとは書くだけ。

Slide 18

Slide 18 text

#netlifytokyo セットアップが⾯倒な⽅向け • ボイラープレート作りました。 • https://github.com/mottox2/netlify-functions-typescript-starter • 本当はもう少しセットアップを簡単にしたい気持ちあります。

Slide 19

Slide 19 text

#netlifytokyo @mottox2 @mottox2 / Frontend Conference Fukuoka 2018 Thank you!