TypeScript 雰囲気勢がライブラリのコードリーディングで得た知識 #sacss

SaCSS Season 2 Vol.14
https://connpass.com/event/334079/

Transcript

1. TypeScript 雰囲気勢が ライブラリのコードリーディングで 得た知識 SaCSS Season 2 Vol.14 2024/11/05 Kihara, Takuya (@tacck) SaCSS Season 2 Vol.14 / #sacss 1
2. 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 好きなフィギュアスケートの技 スプレッド・イーグル
3. 今日のお話 ▪ TypeScript 雰囲気勢の私が ライブラリをコードリーディングすることになったので そこで得た知識をいくつかご紹介します。 ▪ 常識だと思ったら、常識だと教えてください。 SaCSS Season 2 Vol.14 / #sacss 3
4. なぜやることになったのか ▪ TSKaigi Kansai 2024 に採択されたテーマ 「Amplify Gen2 Deep Dive / バックエンドの型を いかにしてフロントエンドへ伝えるか」 ▪ Amplify Gen2 のライブラリを読んで解説、というテーマ。 ▪ 雰囲気勢なのに通ってしまったので、やらざるを得ない状況に追い込む。 SaCSS Season 2 Vol.14 / #sacss 4
5. ざっくり概要: Amplify Gen2 ▪ TypeScript でバックエンドに必要なAWSリソースを定義できる – リソース定義で書いたものを、即時開発環境としてAWSへデプロイ (ホットスワップ) ▪ TypeScript でWebフロントエンドのコードが書ける – 上記の定義を即時でタイプヒンティング SaCSS Season 2 Vol.14 / #sacss 5
6. SaCSS Season 2 Vol.14 / #sacss 6
7. SaCSS Season 2 Vol.14 / #sacss 7 フロントエンド バックエンド リソース ターミナルからリソースデプロイ npx ampx sandbox
8. SaCSS Season 2 Vol.14 / #sacss 8
9. SaCSS Season 2 Vol.14 / #sacss 9 フロントエンド バックエンド リソース ターミナルからリソースデプロイ npx ampx sandbox 1) リソース定義 2) バックエンドで定義 された項目をフロント エンドコードで利用 3) バックエンドで定義 された項目を CDKの定義として利用
10. 得た知識: パッケージ yargs, execa ▪ yargs – JS/TSでCLI作る時の、引数のパーサー兼実行ライブラリ。 – CLIのヘルプ表示などもかなり強力そう。 ▪ execa – JS/TSのCLIからシステムコマンドを呼び出すライブラリ。 – stdin / stdout などパイプライン周りが強力そう。 SaCSS Season 2 Vol.14 / #sacss 10
11. 得た知識: 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";
12. 得た知識: 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" };
13. その他 ▪ 正直、まだ消化しきれていない状態なので、 精進します。 SaCSS Season 2 Vol.14 / #sacss 13
14. まとめ ▪ TypeScript のライブラリ開発はかなり辛そう – アプリケーション開発で型をうまく使うために、 ライブラリはかなり技巧を凝らしたをした書き方になっている。 ▪ これによって、型安全に開発することができる。 – ライブラリ開発者の方々に感謝。 SaCSS Season 2 Vol.14 / #sacss 14
15. 宣伝1 Amplify Boost Up #7 SaCSS Season 2 Vol.14 / #sacss 15 2024/12/19 開催 オンライン参加可能!!
16. 宣伝2 ゆるWeb Advent Carendar 2024 SaCSS Season 2 Vol.14 / #sacss 16 今年もやります お気軽に使ってください!!
17. 宣伝3 TSKaigi Kansai 2024 SaCSS Season 2 Vol.14 / #sacss 17 2024/11/26 開催 オンラインもあるよ!!
18. END SaCSS Season 2 Vol.14 / #sacss 18