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
53
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
31
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
48
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
620
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
23
ライブコーディングで知るAmplify Gen 2 #AWSAmplifyJP
tacck
PRO
1
140
AWS Amplify Gen 2 GA記念 ~Gen1との違いを確認
tacck
PRO
0
450
Amplify Gen2 が GA したよ! #jawsug_sapporo #jawsug
tacck
PRO
0
380
Flutter で "Hello World!! #ゆるWeb札幌
tacck
PRO
0
150
AWS Lambda で LLRT を動かしてみた #北海道まったりLT大会
tacck
PRO
0
160
Other Decks in Technology
See All in Technology
Fearsome File Formats
ange
0
550
アジャイルチームが変化し続けるための組織文化とマネジメント・アプローチ / Agile management that enables ever-changing teams
kakehashi
2
2.2k
Formal Development of Operating Systems in Rust
riru
1
370
.NET AspireでAzure Functionsやクラウドリソースを統合する
tsubakimoto_s
0
120
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
2
2.7k
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
390
20241228 - 成為最強魔法使!AI 實時生成比賽的策略 @ 2024 SD AI 年會
dpys
0
340
Fabric 移行時の躓きポイントと対応策
ohata_ds
1
120
大規模言語モデルとそのソフトウェア開発に向けた応用 (2024年版)
kazato
2
440
AWSの生成AIサービス Amazon Bedrock入門!(2025年1月版)
minorun365
PRO
7
360
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
310
非機能品質を作り込むための実践アーキテクチャ
knih
6
1.8k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
940
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
112
50k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Being A Developer After 40
akosma
89
590k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Statistics for Hackers
jakevdp
797
220k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
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