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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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.3k
Other Decks in Programming
See All in Programming
AIとペアプロして処理時間を97%削減した話 #pyconshizu
kashewnuts
1
220
Takumiから考えるSecurity_Maturity_Model.pdf
gessy0129
1
140
AI時代でも変わらない技術コミュニティの力~10年続く“ゆるい”つながりが生み出す価値
n_takehata
2
720
Agent Skills Workshop - AIへの頼み方を仕組み化する
gotalab555
15
8.5k
DSPy入門 Pythonで実現する自動プロンプト最適化 〜人手によるプロンプト調整からの卒業〜
seaturt1e
1
690
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
yamatoya
0
560
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
seitarof
3
1k
nuget-server - あなたが必要だったNuGetサーバー
kekyo
PRO
0
230
猫の手も借りたい!ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
naramomi7
0
260
AI Assistants for Your Angular Solutions
manfredsteyer
PRO
0
130
SourceGeneratorのマーカー属性問題について
htkym
0
190
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
ttskch
1
130
Featured
See All Featured
[SF Ruby Conf 2025] Rails X
palkan
2
820
Leo the Paperboy
mayatellez
4
1.5k
Claude Code のすすめ
schroneko
67
220k
The Limits of Empathy - UXLibs8
cassininazir
1
260
Paper Plane
katiecoart
PRO
0
48k
AI: The stuff that nobody shows you
jnunemaker
PRO
3
370
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
150
Amusing Abliteration
ianozsvald
0
130
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Abbi's Birthday
coloredviolet
2
5.3k
From π to Pie charts
rasagy
0
150
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