Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
openapi-typescriptで生成されたスキーマを自動でexportしている話
Search
Takatoku
June 21, 2024
Programming
130
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
openapi-typescriptで生成されたスキーマを自動でexportしている話
openapi typescriptで生成された肩を自動でexportするスクリプトを作成しました。
コピペして使ってください!
Takatoku
June 21, 2024
More Decks by Takatoku
See All by Takatoku
LaravelのフロントエンドをNext.jsに段階的に移行している話
takatoku
3
3.5k
Other Decks in Programming
See All in Programming
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
5
5.8k
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
rkaga
8
2.4k
GraphQL の onError と Nullability のこれから
quramy
0
190
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる~既存の運用と新しい可能性をつなぎ合わせてきたCREの話~
tosite
0
110
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
naruogram
0
170
AI時代のTerminal環境を UNIX哲学で設計・運用する
yasunori0418
1
280
sbt 2.0: takeoff
eed3si9n
0
170
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
ochtum
0
150
AIで開発が速くなった先で、開発チームは何を目指すか
shihochan
1
1.8k
AI時代のIaC入門 〜なぜインフラをコードで管理したいのか?〜 / Introduction to IaC in the AI Era
akihisaikeda
5
1k
Performance Optimization With LLMs
xleitix
0
210
ChromeでローカルLLM
ryu1013
0
170
Featured
See All Featured
Building the Perfect Custom Keyboard
takai
2
920
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
280
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
380
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
540
Statistics for Hackers
jakevdp
799
230k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1.1k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
330
Optimising Largest Contentful Paint
csswizardry
37
4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
ラッコキーワード サービス紹介資料
rakko
5
5.5M
Transcript
openapi typescriptで生成されたスキーマを 自動でexportしている話
たかとく(松本拓人) 所属 出身 趣味 最近の関心ごと 技術スタック 株式会社じげん エンジニア 栃木 マンガ、アニメ、サウナ、ジム
webアクセシビリティ、React19 PHP(Laravel)、TypeScript、 React/Next.js、 @takatoku_learn 年齢 25(エンジニア歴3年) 自己紹介
国内日本最大級のリフォーム会社マッチングサービス 月間平均ユーザー数120万人を誇る 厳選した全国4,000社以上のリフォーム会社からニーズに即した業者をオ ンラインで簡単に検索でき、一括見積もり・比較が可能 普段開発しているサービス
OPENAPI TYPESCRIPTとは何か? https://openapi-ts.pages.dev/openapi-fetch/ openapi-fetch は、OpenAPI スキ ーマを取得するタイプセーフな client fetchです。サイズは5 KB
で、ランタイムは実質的にゼロで す。React、Vue、Svelte、または vanilla JS で動作します。 openapi-typescript は、 Node.js を使用 してOpenAPI 3.0 および 3.1スキーマを TypeScript に素早く変換します。 Java/node-gyp/実行中の OpenAPI サー バーは必要ありません。 https://openapi-ts.pages.dev/introduction openAPI fetchと一緒に使うと便利
OpenAPI 3.0および3.1をサポート(識別子などの高 度な機能を含む) 従来のコード生成よりも優れたランタイムフリーの型 を生成する ローカルまたはリモートで YAML または JSON からス
キーマをロードする 巨大なスキーマでも数ミリ秒以内に型を生成します OPENAPI TYPESCRIPTの特徴 open-apiの新しい書き方がサポー トされていて嬉しい openapi fetchと同時に使うこと で、薄く依存したコードジェネレー ターとして利用できる おすすめポイント 特徴
OPENAPI TYPESCRIPTの残念ポイント 生成されたスキーマが使いにくい!! 長すぎ
型エイリアス自動生成スクリプト ライブラリとしては以 下の2つを使用 FN PATH
型エイリアス自動生成スクリプト
自動生成されるTSファイル
スクリプト詳細 実態としては、愚直に正 規表現でマッチしたもの をtsファイルに書き出し ているだけ あとは利用するファイル からimportするだけ!! スクリプト詳細はgithubにて公開中
型エイリアスを自動生成するメリット 普段の開発が楽になる 記述量が減る 複数のopen-apiファイルが存在するときに変数 名にprefexを付与できるため分かりやすい 変化の激しいフロントエンド界隈に追従してい くためにライブラリとの依存度を小さく保てる
THANK YOU