Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Kihara, Takuya

November 06, 2024
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  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 好きなフィギュアスケートの技 スプレッド・イーグル
  2. なぜやることになったのか ▪ TSKaigi Kansai 2024 に採択されたテーマ 「Amplify Gen2 Deep Dive

    / バックエンドの型を いかにしてフロントエンドへ伝えるか」 ▪ Amplify Gen2 のライブラリを読んで解説、というテーマ。 ▪ 雰囲気勢なのに通ってしまったので、やらざるを得ない状況に追い込む。 SaCSS Season 2 Vol.14 / #sacss 4
  3. ざっくり概要: Amplify Gen2 ▪ TypeScript でバックエンドに必要なAWSリソースを定義できる – リソース定義で書いたものを、即時開発環境としてAWSへデプロイ (ホットスワップ) ▪

    TypeScript でWebフロントエンドのコードが書ける – 上記の定義を即時でタイプヒンティング SaCSS Season 2 Vol.14 / #sacss 5
  4. SaCSS Season 2 Vol.14 / #sacss 7 フロントエンド バックエンド リソース

    ターミナルからリソースデプロイ npx ampx sandbox
  5. SaCSS Season 2 Vol.14 / #sacss 9 フロントエンド バックエンド リソース

    ターミナルからリソースデプロイ npx ampx sandbox 1) リソース定義 2) バックエンドで定義 された項目をフロント エンドコードで利用 3) バックエンドで定義 された項目を CDKの定義として利用
  6. 得た知識: パッケージ yargs, execa ▪ yargs – JS/TSでCLI作る時の、引数のパーサー兼実行ライブラリ。 – CLIのヘルプ表示などもかなり強力そう。

    ▪ execa – JS/TSのCLIからシステムコマンドを呼び出すライブラリ。 – stdin / stdout などパイプライン周りが強力そう。 SaCSS Season 2 Vol.14 / #sacss 10
  7. 得た知識: 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";
  8. 宣伝1 Amplify Boost Up #7 SaCSS Season 2 Vol.14 /

    #sacss 15 2024/12/19 開催 オンライン参加可能!!
  9. 宣伝2 ゆるWeb Advent Carendar 2024 SaCSS Season 2 Vol.14 /

    #sacss 16 今年もやります お気軽に使ってください!!
  10. 宣伝3 TSKaigi Kansai 2024 SaCSS Season 2 Vol.14 / #sacss

    17 2024/11/26 開催 オンラインもあるよ!!