Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
3
1.8k
Functional Calisthenics in Kotlin: Kotlinで「関数型エクササイズ」を実践しよう
lagenorhynque
0
110
Kotlin + Power-Assert 言語組み込みならではのAssertion Library採用と運用ベストプラクティス by Kazuki Matsuda/Gen-AX
kazukima
0
110
r2-image-worker
yusukebe
1
160
Flutterアプリ運用の現場で役立った監視Tips 5選
ostk0069
1
250
なぜ強調表示できず ** が表示されるのか — Perlで始まったMarkdownの歴史と日本語文書における課題
kwahiro
4
1.2k
ノーコードからの脱出 -地獄のデスロード- / Escape from Base44
keisuke69
0
660
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
220
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
2.1k
AIを駆使して新しい技術を効率的に理解する方法
nogu66
0
500
AI駆動開発カンファレンスAutumn2025 _AI駆動開発にはAI駆動品質保証
autifyhq
0
140
FlutterKaigi 2025 システム裏側
yumnumm
0
540
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
920
The Art of Programming - Codeland 2020
erikaheidi
56
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Statistics for Hackers
jakevdp
799
220k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Six Lessons from altMBA
skipperchong
29
4.1k
For a Future-Friendly Web
brad_frost
180
10k
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