Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript 雰囲気勢がライブラリのコードリーディングで得た知識 #sacss
Search
Kihara, Takuya
PRO
November 06, 2024
Technology
1
80
TypeScript 雰囲気勢がライブラリのコードリーディングで得た知識 #sacss
SaCSS Season 2 Vol.14
https://connpass.com/event/334079/
Kihara, Takuya
PRO
November 06, 2024
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
49
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
79
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
740
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
45
ライブコーディングで知るAmplify Gen 2 #AWSAmplifyJP
tacck
PRO
1
170
AWS Amplify Gen 2 GA記念 ~Gen1との違いを確認
tacck
PRO
0
580
Amplify Gen2 が GA したよ! #jawsug_sapporo #jawsug
tacck
PRO
0
430
Flutter で "Hello World!! #ゆるWeb札幌
tacck
PRO
0
170
AWS Lambda で LLRT を動かしてみた #北海道まったりLT大会
tacck
PRO
0
180
Other Decks in Technology
See All in Technology
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
140
20250328_RubyKaigiで出会い鯛_____RubyKaigiから始まったはじめてのOSSコントリビュート.pdf
mterada1228
0
130
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
250
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
560
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.4k
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
290
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Security response for open source ecosystems
frasertweedale
0
100
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
19k
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
150
Featured
See All Featured
BBQ
matthewcrist
88
9.5k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Automating Front-end Workflow
addyosmani
1369
200k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
Being A Developer After 40
akosma
90
590k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Unsuck your backbone
ammeep
670
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Transcript
TypeScript 雰囲気勢が ライブラリのコードリーディングで 得た知識 SaCSS Season 2 Vol.14 2024/11/05 Kihara,
Takuya (@tacck) SaCSS Season 2 Vol.14 / #sacss 1
SaCSS Season 2 Vol.14 / #sacss 2 木原 卓也 Kihara,
Takuya / @tacck 生活協同組合コープさっぽろ デジタル推進本部システム部 Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile 好きなフィギュアスケートの技 スプレッド・イーグル
今日のお話 ▪ TypeScript 雰囲気勢の私が ライブラリをコードリーディングすることになったので そこで得た知識をいくつかご紹介します。 ▪ 常識だと思ったら、常識だと教えてください。 SaCSS Season
2 Vol.14 / #sacss 3
なぜやることになったのか ▪ TSKaigi Kansai 2024 に採択されたテーマ 「Amplify Gen2 Deep Dive
/ バックエンドの型を いかにしてフロントエンドへ伝えるか」 ▪ Amplify Gen2 のライブラリを読んで解説、というテーマ。 ▪ 雰囲気勢なのに通ってしまったので、やらざるを得ない状況に追い込む。 SaCSS Season 2 Vol.14 / #sacss 4
ざっくり概要: Amplify Gen2 ▪ TypeScript でバックエンドに必要なAWSリソースを定義できる – リソース定義で書いたものを、即時開発環境としてAWSへデプロイ (ホットスワップ) ▪
TypeScript でWebフロントエンドのコードが書ける – 上記の定義を即時でタイプヒンティング SaCSS Season 2 Vol.14 / #sacss 5
SaCSS Season 2 Vol.14 / #sacss 6
SaCSS Season 2 Vol.14 / #sacss 7 フロントエンド バックエンド リソース
ターミナルからリソースデプロイ npx ampx sandbox
SaCSS Season 2 Vol.14 / #sacss 8
SaCSS Season 2 Vol.14 / #sacss 9 フロントエンド バックエンド リソース
ターミナルからリソースデプロイ npx ampx sandbox 1) リソース定義 2) バックエンドで定義 された項目をフロント エンドコードで利用 3) バックエンドで定義 された項目を CDKの定義として利用
得た知識: パッケージ yargs, execa ▪ yargs – JS/TSでCLI作る時の、引数のパーサー兼実行ライブラリ。 – CLIのヘルプ表示などもかなり強力そう。
▪ execa – JS/TSのCLIからシステムコマンドを呼び出すライブラリ。 – stdin / stdout などパイプライン周りが強力そう。 SaCSS Season 2 Vol.14 / #sacss 10
得た知識: TypeScript infer / extends ▪ 型引数などを使って、定義する型の出しわけを行なう型演算子。 ▪ 二つが絡むと、割と混乱する。 SaCSS
Season 2 Vol.14 / #sacss 11 type ModelType<T> = T extends true ? T : T extends () => infer R ? R : never; const model1: ModelType<true> = true; const model2: ModelType<() => string> = "true";
得た知識: TypeScript Omit<T, Keys> ▪ 型引数Tのオブジェクトから、Keysのプロパティを抜いたものを返す。 ▪ データベースの情報など実装由来のプロパティを抜いて、 欲しい型にするときに便利そう。 SaCSS
Season 2 Vol.14 / #sacss 12 type DbModel = { title: string; dbName: string; }; type RecordModel = Omit<DbModel, "dbName">; const record: RecordModel = { title: "foo" };
その他 ▪ 正直、まだ消化しきれていない状態なので、 精進します。 SaCSS Season 2 Vol.14 / #sacss
13
まとめ ▪ TypeScript のライブラリ開発はかなり辛そう – アプリケーション開発で型をうまく使うために、 ライブラリはかなり技巧を凝らしたをした書き方になっている。 ▪ これによって、型安全に開発することができる。 –
ライブラリ開発者の方々に感謝。 SaCSS Season 2 Vol.14 / #sacss 14
宣伝1 Amplify Boost Up #7 SaCSS Season 2 Vol.14 /
#sacss 15 2024/12/19 開催 オンライン参加可能!!
宣伝2 ゆるWeb Advent Carendar 2024 SaCSS Season 2 Vol.14 /
#sacss 16 今年もやります お気軽に使ってください!!
宣伝3 TSKaigi Kansai 2024 SaCSS Season 2 Vol.14 / #sacss
17 2024/11/26 開催 オンラインもあるよ!!
END SaCSS Season 2 Vol.14 / #sacss 18