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
120
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.4k
Other Decks in Programming
See All in Programming
共通化で考えるべきは、実装より公開する型だった
codeegg
0
220
エンジニア向け会社紹介/Findy Company Profile
findyinc
6
360k
act1-costs.pdf
sumedhbala
0
210
自作OSでスライド発表する
uyuki234
1
3.8k
Contextとはなにか
chiroruxx
1
390
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
panda728
PRO
2
260
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
yuriko1211
0
440
OS アップデート対応の取り組み方がもっと共有されてほしい
andpad
0
110
1B+ /day規模のログを管理する技術
broadleaf
0
140
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
pkshadeck
PRO
0
2.4k
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
akihisaikeda
3
4.3k
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
guaca
0
240
Featured
See All Featured
Side Projects
sachag
455
43k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
610
Producing Creativity
orderedlist
PRO
348
40k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Embracing the Ebb and Flow
colly
88
5.1k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
220
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
67
56k
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