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
130
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
Amazon Q Developer CLI でゲームと Amplify アプリを作ってみた #ゆるWeb札幌
tacck
PRO
0
24
ゆるWeb勉強会@札幌 #30 #ゆるWeb札幌
tacck
PRO
0
5
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
130
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
140
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
130
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
440
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
130
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
86
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
120
Other Decks in Technology
See All in Technology
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
140
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
株式会社ARAV 採用案内
maqui
0
340
知られざるprops命名の慣習 アクション編
uhyo
10
2.4k
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.1k
Goでマークダウンの独自記法を実装する
lag129
0
210
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
140
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
ECS モニタリング手法大整理
yendoooo
1
120
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
310
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
1
140
アジャイルテストで高品質のスプリントレビューを
takesection
0
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Invisible Side of Design
smashingmag
301
51k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Visualization
eitanlees
147
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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