「実践！フロントエンド分離戦略」はREADYFOR 株式会社主催のエンジニア向けLT勉強会です。ここで、菅原氏が「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」のタイトルで登壇。スキーマ駆動開発とそのメリット、活用しているツールについて話します。 READYFORのフロントエンジニア 菅原弘太郎氏（以下、菅原）：それでは「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」と題して、発表します。自己紹介します。2020年11月に、フロントエンドエンジニアとしてREADYFORに入社しました。岩手県在住で、フルリモートで勤務しています。ReactとTypeScriptが好きで、React Hook Formのメンバーなので、もしフォローしてくれる方がいれば、フォローしてください。 フロントエンドとバックエンドの分離
TypeScriptプロジェクトにスキーマ駆動開発を持ち込み、より型安全な世界へ - Sansan Tech Blog
Bill One Entry*1グループの秋山です。 本題に入る前にお知らせです。9/12 (火) にTypeScriptを活用した型安全なチーム開発をテーマとしたイベントを開催します。 ぜひ、お気軽にご参加ください！ sansan.connpass.com 1. はじめに 1-1. スキーマ駆動開発とは 1-2. Testing Trophyとの関係性 2. 構成 2-1. 最初の構成と課題 2-2. 最終的な構成 3. バックエンド 3-1. スキーマから型ファイルを作る 3-2. APIハンドラに型を与える 3-3. バリデーターを追加する 3-4. huskyでスキーマ変更を検知する 4. フロントエンド 4-1. スキーマからAPIクライアントを作る 5. パターンマッチングを持ち込む 6. まとめ 1. はじめに 1-1. スキーマ駆動開発とは 詳しい解説は他の記事に譲り、一言
GithHubは、今後はAPI仕様を記述する業界標準であるOpenAPIに対応した生成ツールで生成したAPIクライアントをSDKとして提供することを明らかにしました。 現在まで同社は「Octokit」と呼ばれるSDKを提供しています。これはGitHubの開発者が、外部のアプリケーション開発者のために、さまざまな言語でGitHub APIを呼び出しやすいように開発したライブラリと言えます。 それに対して今後は、GitHubのAPIがどのような仕様であるかを業界標準であるOpenAPIに従って記述したドキュメントを基に、そこからAPIクライアントを生成するツール「Microsoft Kiota」によって生成したAPIクライアントをSDKとして提供することになると説明されています。 GitHubはこれを同社にとって大きな転換点だと、ブログ「Our move to generated SDKs」（
Web API設計時に使われ方の想定を添えると良い。けどより良いやり方を知りたい - valid,invalid
先日登壇したイベントにて、仕事で協業したモバイルエンジニアから「Web APIのドキュメントに使われ方の想定が添えられていてありがたかった」とフィードバックをもらった。 具体的にはX post (以下、tweet) に添付した画像のような感じで、Web API (以下、API) が呼び出される画面・タイミングの想定、レスポンスの使われ方の想定などをUIのスクショとともに記述する、というもの。 API設計時にこういう使われ方の想定を添えると認識揃えやすくてありがたい、とモバイルエンジニアに喜ばれました#B43_techtalk pic.twitter.com/XLB3g6fCLZ— ohbarye (@ohbarye) 2023年8月3日 他にもこんなのとか。 APIレスポンスの使われ方の想定を書いているようす このことについて思ったよりもイベント内外で反響があったので書く。 ドキュメントの
Tesla API が触りたいけれど、車が高くて買えないので、Tesla API の Mock API Server を作って、擬似的に Tesla を所有している感覚を API で体験する - Morning Girl
Tesla ご存知ですか？ そう、あの Tesla です。最近日本でも Model 3が出始めて、人気沸騰中（だと個人的に思っている）の電気自動車のことです。 https://www.tesla.com/ja_jp この Tesla なんですが、iPhone と Android 向けのアプリを提供していて、このアプリから車の情報を確認したり、温度調整やロックの解除など、色んな Tesla の操作を行えるようになっています。 https://apps.apple.com/jp/app/tesla/id582007913 【機能一覧】 充電状況をリアルタイムで確認し、充電を開始または停止する 運転前に車両の暖房/冷房を入れる (ガレージ内でも可能) 遠隔からロックまたはロック解除する 車の現在地を確認したり、動きを追跡する お気に入りのアプリから目的地を送信し、ナビを開始します 同乗者はすばや
GitHub - microsoft/kiota: OpenAPI based HTTP Client code generator
Kiota is a command line tool for generating an API client to call any OpenAPI described API you are interested in. The goal is to eliminate the need to take a dependency on a different API SDK for every API that you need to call. Kiota API clients provide a strongly typed experience with all the features you expect from a high quality API SDK, but without having to learn a new library for every HT
こんにちは。LINE Growth Technology福岡開発室でサーバーサイドエンジニアをしている中村です。 この記事では担当していたプロジェクトで実施した、Swaggerを使ったAPIドキュメントの作成と、BE（バックエンド）とFE（フロントエンド）間の連携について紹介します。 プロジェクトの説明 はじめに、今回LINE Growth Technology福岡開発室（以下「GT」）がシステムの設計開発を担当した、LINE公式アカウント審査ツールのプロジェクトについて説明します。 LINE公式アカウント審査ツールとは、LINE公式アカウントで認証済アカウントが申請された際に、申請内容が適切であるか審査するシステムです。 このシステムは、LINE公式アカウントが利用されている各国に存在する審査パートというチーム（以下「審査チーム」）によって利用され、日本以外の国家も含め、一日あたり平均約
OpenAPI GeneratorでPython Web API構築 | フューチャー技術ブログ
この記事はPython Advent Calendar 2022 カレンダー2の3日目です。昨日はtttakehさんのじゃんけん画像を分類してみたでした。 はじめにこんにちは。TIG DXユニットの村上です！ さて、私の所属しているプロジェクトではバックエンドシステムに主にGo言語を用いており、Go言語によるWebAPIを構築しています。 例えばLambdaとGoを使ったサーバーレスWebAPI開発実践入門など、Future Tech Blogには多くのノウハウが投稿されていますので是非ご覧になっていただければと思います。 今回はGo言語ではなくPythonでWebAPIを構築しました。その際にOpenAPI Generatorが便利だったのでご共有します。 OpenAPI GeneratorOpenAPI GeneratorはAPIリクエストやレスポンスの内容を定義し、それを元にプログラ
import { asApi, Zodios } from '@zodios/core' import { z } from 'zod' const vR1x0k5qaLk = z.object({ id: z.number(), name: z.string() }).partial() const v8JbFEq2fUl = z.object({ id: z.number().optional(), name: z.string(), category: vR1x0k5qaLk.optional(), photoUrls: z.array(z.string()), tags: z.array(vR1x0k5qaLk).optional(), status: z.enum(['available', 'pending', 'sold']).optional(), }) const vlh
go-swaggerを用いたWebアプリケーション開発Tips19選 | フューチャー技術ブログ
はじめにTIG DXユニット 1の真野です。echo → 生net/http → gorilla/mux → go-swagger, gqlgenの経歴でGoのHTTP APIを実装してきました。本記事では最近業務でヘビーユーズしているgo-swaggerについての開発Tipsをまとめました。 背景フューチャーではGoを採用する案件が増えて来ており、その際にgo-swagger というツールを利用することが多いです。 2 理由はWebAPIのスキーマを駆動に開発することに慣れているという開発文化（DBレイヤのERDやデータフローを駆動に開発することは今も多い）や、リリース後の保守や将来のマイグレーションを考慮しなるべく特定のDSLに依存したくないというポリシーを強く持つこと、開発前にある程度固く機能数を洗い出して工数見積もりや開発スケジュールに活かしたいといった大人な事情など、色々相性が良
はじめに COUNTERWORKSバックエンドエンジニアの伊藤です。 この記事ではAPIドキュメント分割の知見を紹介します。 弊社では OpenAPI を使用したスキーマ駆動開発を採用しています。 1ファイルで管理していたところ、25000行を超える行数となり管理コストが高くなっていました。 そこで分割作業を実施したのですが、どのような方針でどう対応したかを紹介します。 1ファイルで運用するデメリット そもそもどんなデメリットが発生していたのかを記載します。 全体の構造が把握しづらく、新規参画者への認知負荷が高い 行数が多すぎるため、RubyMine など IDE やエディタのパフォーマンスが落ちる 1ファイルの内部で複数の箇所を参照しているが、それぞれCommand fで該当部分を探す必要がある。そのため、見ているコードの箇所が頻繁に飛んで情報が追いづらい 実際にやったこと 方針 チーム
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
JJUG CCC 2019 Fall の発表資料になります。 OpenAPI Generator を使って小規模な Web API サーバーを開発したときの経験やノウハウをまとめたものです。 https://ccc2019fall.java-users.jp/ https://jjug-cfp.cfapps.io/submissions/92e3117f-d911-4674-b97b-581813cfa0dcRead less
Web API に秩序を与える Protocol Buffers / Protocol Buffers for Web API #builderscon
builderscon tokyo 2019 で「Web API に秩序を与える Protocol Buffers」というタイトルで発表した資料です。 Protocol Buffers を利用して Web API の Schema 管理をするという観点で、豊富な実例とともにその手法やメリット・デメリットについて話しました。 cf. https://builderscon.io 追記: 61ページ目で Protocol Buffers を利用する際の注意点として後方互換性が壊れるケースの話をしましたが、自分たちが経験したのは gRPC + grpc-gateway 構成特有のケースだったので記述を修正しました。
googleからタイトルについて書かれた記事が出たので読んでいた cloud.google.com これらについて自分でもなんとなく考えていたことがあったけれど良い機会なのでまとめておく 記事での注目ポイント 冒頭より引用。 私としては、HTTP を使用する API のビルドには、重要かつ特徴のあるアプローチが 3 つあると考えています。次のようなアプローチです。 1. REST 2. gRPC（および Apache Thrift など） 3. OpenAPI（およびその競合製品） なるほど、と思うかもしれないが、読み進めていくとRESTについてはこう書かれていた。 このスタイルの API の特徴的な性質は、クライアントが他の情報から URL を構築せず、サーバーから渡された URL をそのまま使用することです 何の話かと思ったけれど、REST APIにはLv3までありこの記事ではLv3の
一行要約 はじめに Readable OpenAPIとは? 既存ルールの不満点 不満点1: 標準仕様外の分割を行っている 不満点2: ディレクトリ階層が深い 不満点3: 1つのAPI定義を参照する際にたくさんのファイルを参照する必要がある 不満点4: コンポーネントスキーマの同一性が不明瞭 新ルールで工夫した点 工夫1: operationIdと対応したパス定義のファイル名を採用し、フラットなディレクトリ構造を実現した 工夫2: パス定義ファイルに含まれる情報量を増やした 工夫3: 再利用性を重視したcomponent定義 できなかったこと、やらなかったこと、やりたいこと 定義ファイルのhttpメソッドごとの分割ができなかった ルートの定義ファイルにcomponentディレクティブを置かなかった exampleの定義は余力があればやりたい おわりに We are hiring! 脚注 一行
はじめにOpenAPI仕様に則ってREST APIの設計をする際に、値が存在しないという状態をどのように表現するかというお話です。 undefinedとはまずはじめに、ここでundefinedと言っているのは、OpenAPIの仕様において、リクエスト/レスポンスのデータ型を定義するSchema Objectのプロパティの1つであるrequiredが指定されていない状態を指します。 OpenAPIにおけるrequiredの定義を確認してみましょう。 OpenAPIの仕様を参照すると、Schema ObjectはJSON Schemaの仕様に従うと記載されています。 The Schema Object allows the definition of input and output data types. These types can be objects, but also primit
外からやってくる値から TypeScript の型を守るライブラリ・ツールまとめ - Mobile Factory Tech Blog
こんにちは、新卒エンジニアの id:d-kimuson です 先日 type-predicates-generator という型定義からユーザー定義型ガード・アサーション関数を自動生成するツールをリリースして紹介記事を書いたのですが、感想とかを眺めていたら同じく外部から来た値に安全な型付けをするためのライブラリやツールの情報をいくつも観測しました この辺りのランタイムチェックライブラリの情報ってあまりまとまっていない印象で自分が知らないものもいくつかあったので、調べつつ簡単にまとめられたらなと思ってこのエントリを書きました 外部からやってきた値を型安全にするにはざっくりと 型生成によるアプローチ ランタイムチェック用の独自型を書かせるアプローチ 型情報からランタイムチェック関数を自動生成するアプローチ の 3 つのアプローチがあると思うので、それぞれのアプローチごとに紹介します ① 型定義
はじめに こんにちは！ WEARバックエンドブロックの高久です。 WEARではOpenAPI（Swagger）を使って、アプリやWebのクライアントが利用するAPIを定義しています。そして先日、開発効率化のためにOpenAPI GeneratorでOpenAPIからAPIクライアントコードを自動生成、活用できるように整備をしました。その中でOpenAPI Generatorに適したOpenAPIの書き方のポイントがいくつかあったので、内容を紹介していきます。 想定読者 OpenAPIを現在利用している、またはこれから利用する予定の方 OpenAPI Generatorを利用したコード自動生成を検討している方 背景 当初WEARではAPIクライアントコードはOpenAPIでのAPI定義を基に各クライアントが手動で実装していました。しかし手動で実装すると初期の実装コストや変更時の追従コストがか
こんにちは、ティアフォーで認証認可基盤を開発している澤田です。 最近取り入れたProtobufで、素晴らしいREST APIの開発体験をしたのでご紹介します。 なお、ティアフォーではマイクロサービスを支える認証認可基盤を一緒に開発いただけるメンバーを募集しています。ご興味のある方は下記ページからご応募ください。 herp.careers 実現したかったこと マイクロサービス間連携のAPI開発において、以下の条件を満たすやり方を探していました。 スキーマを最初に定義してリクエストとレスポンスの型が自動で生成される ドキュメント（openapi.yaml）が生成される バリデーションが定義できて、その実装が自動で生成される 実現方法 Go言語で開発する場合はgo-swaggerでも実現できますが、本記事では、Protobufで実現できるgRPC Gatewayとprotoc-gen-valid
フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
こんにちは。 メディアサービス開発部バックエンド開発グループのフサギコ(髙﨑)です。 Ruby on Railsによるバックエンドの実装運用と、AWSによるサービスインフラの設計構築を中心とした、いわゆるテックリードのような立ち位置で働いています。 本記事では株式会社一迅社さまの公式漫画連載サイトであり、ブックウォーカーが開発保守運用を担当している一迅プラスのサービスインフラの概要についてご紹介したいと思います。 もしよければ、前記事のニコニコ漫画のインフラ構成についてならびに読書メーターのインフラ構成についてもご覧ください。 一迅プラスについて 一迅プラスは株式会社一迅社さまが運営する公式漫画連載サービスです。 冒頭試し読みから連載まで、2022/06/10現在で150を超える作品が掲載されています。 一迅プラスのトップページ この一迅プラスにおいてブックウォーカーは開発保守運用を担当し
Serverless Framework+mangum+FastAPIで、より快適なPython API開発環境を作る - JX通信社エンジニアブログ
はじめに 最近ハイボールにハマっているSREのたっち(@TatchNicolas)です。 昨日オンライン開催されたJAWS DAYS 2020にて、JX通信社もサーバレスをテーマとして発表をしました。（by 植本さん） 発表でもありましたように、上記プロジェクトにおいて開発当時はスピードを優先してプロジェクトメンバーの手に馴染んでいて分担もしやすいフレームワークとしてFlaskを採用しました。 一方で、JX通信社としてはFlaskよりもFastAPIを使うプロジェクトが増えてきており、今後もその傾向は続く見込みです。 そこで、特設ページ作成やAPI提供など初動としての開発が一段落したのを機に、JAWS DAYSで発表した仕組みを今後のために発展させる検証をしたので紹介します。 TL; DR; JAWSでは Serverless Framework+awsgi+Flaskな構成でスピーディに
GitHub Actionsで「OpenAPI の自動バージョニング」から「API Clientのnpmパッケージ生成」までを完全自動化 〜bypass機能を利用してみました〜 - BASEプロダクトチームブログ
Platformグループでマネージャーをしている松田（ @tadamatu ） です。 この記事に書いてあること GitHub Actions を利用し 「OpenAPI の自動バージョニング」から「API Clientのnpmパッケージ生成」までを完全自動化 したのですが、その際に ハマったこと、工夫したこと が結構あったので、シェアしておきたいと思い書かせていただいた記事になります。 具体的には以下のような内容について書いてあります。 Branch protection rulesを維持した状態で、workflowからだけはcommitをさせたい（bypass機能を利用） → 文中の(3-2) 別ブランチの GitHub packages に npm publish したい（通常は何もしなければGitHub Actionsからは同じリポジトリのGitHub packagesにしか np
他言語からTypeScriptに変換する記事を観測したので、JSONSchemaを経由してTypeScriptのコードに吐き出すライブラリを作りました。本記事のコアロジックの部分を抽出した形です。 OpenAPI TypeScript Code Generatorとの違いとして、ルートの名前空間を廃止しているので、割と自由に書ける様になってます。 https://www.npmjs.com/package/@himenon/jsonschema2ts
こんにちは、ECプラットフォーム部の権守です。普段はZOZOTOWNのリプレイスに関わるID基盤とAPI Gatewayの開発を行っています。 ID基盤やAPI Gatewayの中身についてもいずれ紹介したいと思いますが、本記事では、ID基盤のAPI開発で取り入れているGo言語におけるOpenAPIを使ったレスポンス検証について紹介します。 OpenAPIを使ったレスポンス検証 OpenAPI Specification（以下、OpenAPIと表記します）はREST APIのためのプログラミング言語に依存しない標準的なインタフェース記述言語です。OpenAPIについては以前にこちらの記事でも取り上げましたので、合わせて読んでいただければと思います。 弊社では、新規で開発するAPIについてはOpenAPIを用いて仕様書を作成しており、ID基盤もそうして社内にAPI仕様書を提供しています。 O
ReactJS: Keep Simple. Everything can be a component!
OpenAPI Specification ドリブンな開発事例とそれを支えるツール - NTT Communications Engineers' Blog
これは NTT Communications Advent Calendar 2021 3日目の記事です。 こんにちは、イノベーションセンターの松田 (@take4mats) です。 当社の Smart Data Platform (SDPF) のサービスラインナップの多くは、お客さまがサービスご利用に必要な操作を統一的に行うための Web UI に加え、同等の Web API を提供しています。 API 仕様は Knowledge Center にてサービスごとに一般公開されているのをご存知でしょうか？ (Knowledge Center で各サービス内の APIリファレンス のページをご覧ください。例えば こちらのリンク) この一般公開されている API 仕様はサービス開発初期に作成され、開発期間にも重要な役割を果たしています。 本記事では、その中で私が携わったサービスから、 API
Rails + RSpec + OpenAPI3 + Committeeでスキーマ駆動開発を運用するTips - Timee Product Team Blog
こんにちは、タイミーデリバリー開発チームの宮城です。 今回は弊社のOpenAPI3ベースのスキーマ駆動開発の運用方法を紹介します。 TL;DR 技術スタックは OpenAPI3, Swagger UI, Committee, ActiveModelSerializers Committeeを利用してOpenAPI準拠のRequest Specを行う OpenAPI3のrequiredキーワードに注意する 背景 タイミーデリバリーでは、RailsによるAPIサーバーと、Web管理画面としてVue.jsによるSPA、ユーザー向けiOSアプリとしてSwiftを採用しています。 1つのモノリスなRailsで利用者別にネームスペースを区切り、それぞれエンドポイントを提供しています。 サーバーサイドとクライアントサイドを分離し並行して開発を進めるためにスキーマ駆動開発を導入しました。スキーマ駆動開発の
はじめに サービス構成 レポジトリ一覧 サーバー側Railsアプリ クライアント側Railsアプリ 開発の流れ 利用ツール swagger-cli committee-rails 不具合1: ファイルの分割 不具合2: $refとnullableの同時使用 json-schema openapiの記法に合わせた機能拡張 openapi-generator-cli (Ruby client) 不具合1: 中途半端な型チェック 不具合2: oneOf/anyOfに非対応 factory_bot 終わりに We are hiring! はじめに 前回の記事では、OpenAPIで新しいウェブAPIを定義する際に、yamlのままで読みやすいようにファイル構成等を工夫した話をしました。 今回はそのAPIスキーマを使って、Railsでスキーマ駆動開発を実現するにあたって利用しているツール類についてお話し
あらゆるアプリやウェブサイトのOpenAPI仕様を自動生成してくれるChrome向け拡張機能「OpenAPI DevTools」を使ってみた
ウェブ上の通信で利用されるAPIのうち、OpenAPIを使用して記述されているAPIを検知して自動でOpenAPI形式の仕様を作成してくれるツールが「OpenAPI DevTools」です。Chrome向けの拡張機能としてリリースされており、簡単に使えるとのことなので実際に使って試してみました。 AndrewWalsh/openapi-devtools: Effortlessly discover API behaviour with a Chrome extension that automatically generates OpenAPI specifications in real time for any app or website https://github.com/AndrewWalsh/openapi-devtools GitHubのリポジトリにアクセスし、「Downl
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
ウェブアプリケーションをRustで開発している、株式会社estie。今回開催された「Rust、何もわからない…」では、実サービスで活用されているRustについて、その活用方法の事例を紹介しました。ここで登壇したのは、ソフトウェアエンジニアの松本健太郎氏。アプリケーションのバックエンドをRustに書き換えた事例について発表しました。 バックエンドをRustに書き換えた実例報告 松本健太郎氏：私からは、まさにバックエンドをRustに書き換えるということで、実例報告的なことをやりたいと思っています。よろしくお願いします。 本日は、どういうことをしたかというところと、それをやるにあたっての意思決定。実際にやってみてどういうところが問題になったか。あとは、特にTypeScriptとの連携周り、どういう工夫をしたかをお話しできればと思います。 自己紹介です。松本健太郎と言います。 アプリケーションの概
昨今では API のスキーマから型を生成することはフロントエンド界での基本的エンジニア権とされていますが、これはバックエンドとフロントエンドでレポジトリが分かれている場合にややワークフローが煩雑になります。 これを楽にするための GitHub Actions の設定を書いてみたのでご紹介します。 何もない時のワークフロー OpenAPI スキーマを生成する 中身をコピって別レポジトリにはっつける npm run generate:all を実行して諸々を生成する PR 作ってマージ というのをアップデートする度にやる必要があり地味に面倒です。 ので GitHub Actions で 2〜4 を自動化しちゃいましょう。 スキーマから生成して PR を作る Actions を作成 まずはフロント側のレポジトリで実行する Action を作ります。 やっていることは npm run genera
「Developers Meetup 急成長ベンチャーが向き合う『開発生産性』」は、開発組織や事業フェーズの異なる株式会社Another works・株式会社SmartHR・株式会社スタメンの3社が、開発生産性について語り尽くすイベントです。ここで株式会社スタメンのかみお氏が登壇。フロントエンドのリプレイス前にあった課題と、「生産性が向上した」と感じさせてくれた5つのことについて紹介します。 かみお氏の自己紹介 かみお氏：「レガシーフロントエンドをリプレイスしたら開発生産性が向上しました」というタイトルでお話をします。よろしくお願いします。 まず自己紹介を簡単にさせてください。2021年1月にスタメンに入社して、主にフロントエンドを担当している「かみお」です。現在は、今回お話しするNext.jsへのリプレイスのプロジェクトに参加中です。今回初登壇なのでお手柔らかにお願いします。 今日は、リ
swaggerとは 古の時代、API仕様書はwordやexcelで表現され、各所に共有されるというのが一般的でした。 ですが近年、API仕様を表現する際にはswaggerを利用するのが最も効率的で、保守性が高く、世間一般で仕様化され、見やすいというのもあり、一般化されてきたのではないのでしょうか 今回はそんなswaggerの書き方について、まずは書くために覚えておきたいポイントを解説していこうかと思います！ どう書いてくか swagger editorで書く 公式がWeb上に提供しているツールを利用し、すぐにでもswaggerの執筆が可能となっています！ なにをインストールする必要もなく開始1秒で利用できるので、私も重宝してます なお、ページを開くとサンプルAPI仕様がすでにある状態でのスタートとなり、記法の参考などにもなります vscodeで書く 必要なプラグインをインストールし、vsc
Open API × Rails × TypeScriptでのスキーマ駆動開発｜Offers Tech Blog
プロダクト開発人材の副業転職プラットフォーム Offers を開発している、株式会社 overflow にて EM をやっております磯崎と申します。 日々プロダクトを開発している中で、様々な格闘があるかと思いますが、その中でも大分格闘してきた Open API を用いたスキーマ駆動開発について今回は書いてます。 この構成で運用してよかったと今のところは思ってますが、色々面倒な事や落とし穴にも直面してきました。自分たちの中に溜まっている知識を書き記していくのでどこかでお役に立てればハッピーです ☺️ 最初に API を定義、その後開発を進めていくスキーマ駆動開発 そもそもスキーマ駆動開発とは、はじめに API を定義し、それを元にフロントエンド・バックエンドと開発を同時に進めていく開発フローです。 フロント実装においては通信部分で、「何を送信すべきか」、「何が返ってくるのか」を予め決まった状
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活 | GiFT（ギフト）株式会社
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活2020.02.28 OpenAPIをドキュメントだけでなく、Schema firstな開発に利用しようということで、TypeScript + OpenAPI Generatorでフロントエンドの開発をしました。 Vue, Nuxtで使う際の例と共にその内容を紹介します。 目次OpenAPIでドキュメントを書くメリットなどOpenAPI GeneratorでClient情報を吐き出すVue, Nuxtで利用するAPIの変更に追従しやすく、型もあるし幸せOpenAPIでドキュメントを書くメリットなど弊社では以下のブログでも書いているように、API仕様のドキュメント化にOpenAPIを活用しています。 committee×OpenAPI×RailsでスキーマファーストなAPI開発O
OpenAPI × Orval × MSW × Next.jsでのスキーマ駆動開発実践 #techtekt Advent Calendar 2022 - techtekt
この記事は techtekt アドベントカレンダー2022 の15日目の記事です🔥 その他にも記事が掲載されていますので、興味がある方は#techtekt Advent Calendar 2022で検索してみてください！ はじめに はじめまして。パーソルキャリア株式会社のサービス開発部でエンジニアをしている西澤と申します。 HR forecasterという採用支援サービスのフロントエンドエンジニアを担当しています。今回はそのプロジェクト内で新たに組み上げた開発体制で導入したスキーマ駆動開発の流れについて紹介したいと思います🙋♂️ 目次 開発環境 導入背景 スキーマ駆動開発って何？ OASのディレクトリ構成 OASを利用した型の生成・モックコードの生成 Next.jsでMSWを動かす おわりに 開発環境 Next.js 12.3.4 React 18.2.0 TypeScript 4.
Official Docs | Try TypeSpec Online | Getting Started | Language Overview TypeSpec is a language for defining cloud service APIs and shapes. TypeSpec is a highly extensible language with primitives that can describe API shapes common among REST, OpenAPI, gRPC, and other protocols. TypeSpec is excellent for generating many different API description formats, client and service code, documentation, a
【OpenAPI】APIスキーマから勝手に型がつくaxiosを作って幸せになる【openapi-typescript】
はじめに axiosの型付けはどうやらそれなりに頭を悩ませる課題のようです。 実際にuhyo氏のTwitterでのTypeScriptコミュニティにて以下のような質問がありました。 私もaxiosの型付けに悩まされた一人です。 最近それなりに幸せに型付けできる方法が整理できたので、自身の備忘録も兼ねてまとめます。 前提として、openapiファイルが用意されていることとします。 コード例は下記レポジトリに配置しております。 幸せになるとは何か 結論から言うと次のような型の補完が効き、かつ型安全なaxiosのrequest APIのカスタムAPIを作る事です。 URLパスの補完が効いていて、 実装されているHTTPメソッドの補完も効いており、 パラメータの型も補完され、 レスポンスの型も手に入るrequest APIです。 見た目上は、request APIですので、axiosのドキュメント
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptとOpenAPIスキーマで型安全に READYFORが語る“スキーマファースト”で効率的な開発方法
GitHub、SDKを刷新。今後はOpenAPI仕様の生成ツールで生成したSDKを提供へ
Swaggerを使ったAPIドキュメントの作成と、バックエンドとフロントエンド間の連携
OpenAPI + Zod で型安全な API クライアント出力
25000行超えのAPIドキュメントを分割した話
API設計：REST、gRPC、OpenAPI - 気まぐれ開発日記
ReadableなOpenAPI定義ファイルを書く - ドワンゴ教育サービス開発者ブログ
OpenAPIにおけるundefinedとnullの設計 | フューチャー技術ブログ
OpenAPI Generatorに適したOpenAPIの書き方 - ZOZO TECH BLOG
ProtobufでREST APIを快適に開発する方法のご紹介 - TIER IV Tech Blog
一迅プラスのインフラ構成について - BOOK☆WALKER inside
OpenAPI SchemaからTypeScript Code Generatorを作ったので紹介します
Go言語におけるOpenAPIを使ったレスポンス検証 - ZOZO TECH BLOG
OpenAPI? What Is That? Is That Tasty?
OpenAPIを使ったRailsスキーマ駆動開発 - ドワンゴ教育サービス開発者ブログ
Javaに革命を起こすGraalVM Native Image
Node.jsをRustに書き換えるのはどのくらいかかる？ 実験的導入でわかった、メリット・デメリット
OpenAPI のスキーマが変わった時に通知して型など諸々を自動で生成する GitHub Actions
レガシーフロントエンドをNext.jsにリプレイス 「開発生産性の向上」を感じさせてくれた5つのこと
今日から始めるswagger入門（最低限書けるようになる） - Qiita
GitHub - microsoft/typespec