Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

その複雑な型、いつ使うんですか？OSSから学ぶ、高度な型定義の活用方法 / Learning ...

Avatar for 株式会社カミナシ 株式会社カミナシ
November 30, 2025
2
170

その複雑な型、いつ使うんですか？OSSから学ぶ、高度な型定義の活用方法 / Learning Advanced Type Definitions from Open Source

2025/11/30
フロントエンドカンファレンス関西2025
https://fortee.jp/fec-kansai-2025

その複雑な型、いつ使うんですか？
OSSから学ぶ、高度な型定義の活用方法

Shimmy(@naoya7076)
ソフトウェアエンジニア

Avatar for 株式会社カミナシ

株式会社カミナシ

November 30, 2025
Tweet

More Decks by 株式会社カミナシ

See All by 株式会社カミナシ
Wasm×C++で実現するフロントエンドAI画像処理 / Frontend AI Image Processing with Wasm and C++
Avatar for 株式会社カミナシ kaminashi
0
21
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
Avatar for 株式会社カミナシ kaminashi
2
3.3k
多種多様なノンデスクワーカーのお客様へ 現場DXを推進するためにCSに求められる「ハイタッチ」とは / For a wide variety of non-desk workers: What is the "high touch" required from CS to promote on-site DX?
Avatar for 株式会社カミナシ kaminashi
0
260
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう！ / Let's build an OAuth protected remote MCP server based on AWS managed services
Avatar for 株式会社カミナシ kaminashi
4
890
そのWAFのブロック、どう活かす？ サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
Avatar for 株式会社カミナシ kaminashi
0
480
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
Avatar for 株式会社カミナシ kaminashi
3
1.7k
CSテラコヤ - 新規プロダクトの市場探索と顧客体験設 計 立ち上げのリアルをお話します 編 / CS Terracoya - Market exploration and customer experience design for new products - The reality of launching
Avatar for 株式会社カミナシ kaminashi
0
750
Sentry初心者が便利だなと思ったポイントと活用事例 / Helpful Points and Use Cases for Sentry Beginners
Avatar for 株式会社カミナシ kaminashi
0
170
読書会から始める関数型ドメインモデリング / Learning Functional Domain Modeling Through a Reading Group
Avatar for 株式会社カミナシ kaminashi
3
190

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

Transcript

  1. その複雑な型、いつ使うんですか？ OSSから学ぶ、高度な型定義の活用方法 Shimmy(@naoya7076) / 株式会社カミナシ フロントエンドカンファレンス関西2025

  2. 話すこと 普段のプロダクト開発であまり使わないこれらの型が OSSでどのように使われているのか • extends • Template Literal Types •

    Infer • Conditional Types

  3. TanStack Router

  4. None

  5. 存在しない値は型エラー

  6. None

  7. どうして 型推論されるの？

  8. コードを追っていく

  9. None

  10. /posts/$postIdから $postIdを見つける

  11. None
  12. None

  13. 逃げてはいけない

  14. extends + Template Literal Types

  15. None

  16. extends

  17. None

  18. Template Literal Types

  19. None
  20. None

  21. ParsePathParamsSymbol<'/posts/$postId'> から postId を取り出す

  22. None

  23. Conditional Types + Infer

  24. None

  25. パス文字列からパラメータ名を取り出す ことに成功

  26. {‘postId’: string} [K in ‘postId’]: T

  27. None