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
48
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
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
490
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
21
ライブコーディングで知るAmplify Gen 2 #AWSAmplifyJP
tacck
PRO
1
140
AWS Amplify Gen 2 GA記念 ~Gen1との違いを確認
tacck
PRO
0
410
Amplify Gen2 が GA したよ! #jawsug_sapporo #jawsug
tacck
PRO
0
360
Flutter で "Hello World!! #ゆるWeb札幌
tacck
PRO
0
140
AWS Lambda で LLRT を動かしてみた #北海道まったりLT大会
tacck
PRO
0
150
地方から始める登壇のステップアップ 〜Java Do から JJUG CCC への登壇参加記録 #javado
tacck
PRO
0
210
ゆるWebの新型コロナ Before/After とこれからのこと #seb_yearend
tacck
PRO
0
49
Other Decks in Technology
See All in Technology
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
12
3.5k
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
280
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
170
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
190
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
ハイテク休憩
sat
PRO
2
140
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Speed Design
sergeychernyshev
25
670
The World Runs on Bad Software
bkeepers
PRO
65
11k
Thoughts on Productivity
jonyablonski
67
4.4k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
RailsConf 2023
tenderlove
29
940
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Being A Developer After 40
akosma
87
590k
How to Ace a Technical Interview
jacobian
276
23k
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