$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
openapi-typescriptで生成されたスキーマを自動でexportしている話
Search
Takatoku
June 21, 2024
Programming
1
110
openapi-typescriptで生成されたスキーマを自動でexportしている話
openapi typescriptで生成された肩を自動でexportするスクリプトを作成しました。
コピペして使ってください!
Takatoku
June 21, 2024
Tweet
Share
More Decks by Takatoku
See All by Takatoku
LaravelのフロントエンドをNext.jsに段階的に移行している話
takatoku
3
3.2k
Other Decks in Programming
See All in Programming
エディターってAIで操作できるんだぜ
kis9a
0
730
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
410
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
mouson
0
160
dotfiles 式年遷宮 令和最新版
masawada
1
770
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
110
Cap'n Webについて
yusukebe
0
130
AIコーディングエージェント(Manus)
kondai24
0
180
Integrating WordPress and Symfony
alexandresalome
0
150
Cell-Based Architecture
larchanjo
0
120
まだ間に合う!Claude Code元年をふりかえる
nogu66
5
830
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
240
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
730
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
How STYLIGHT went responsive
nonsquared
100
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
710
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Thoughts on Productivity
jonyablonski
73
5k
It's Worth the Effort
3n
187
29k
Building Applications with DynamoDB
mza
96
6.8k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
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