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
110
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
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
84
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
110
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
380
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
110
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
71
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
97
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
830
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
60
ライブコーディングで知るAmplify Gen 2 #AWSAmplifyJP
tacck
PRO
1
190
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
430
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
730
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
270
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
360
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
690
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
130
解析の定理証明実践@Lean 4
dec9ue
0
170
フィンテック養成勉強会#54
finengine
0
170
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
180
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Bash Introduction
62gerente
614
210k
Site-Speed That Sticks
csswizardry
10
660
Making Projects Easy
brettharned
116
6.3k
Thoughts on Productivity
jonyablonski
69
4.7k
The Language of Interfaces
destraynor
158
25k
How STYLIGHT went responsive
nonsquared
100
5.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Scaling GitHub
holman
459
140k
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