フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec
import "@typespec/http"; using TypeSpec.Http; model User { id: string; name: string; birthday?: utcDateTime; address: Address; } model Address { street: string; city: string; state: string; zip: string; } @route("/users") interface Users { list(@query limit: int32, @query skip: int32): User[]; create(@body user: User): User; get(@path id: string): User; } openapi: 3.0.0 info: title: (title) versio
今日から始めるswagger入門（最低限書けるようになる） - Qiita
swaggerとは 古の時代、API仕様書はwordやexcelで表現され、各所に共有されるというのが一般的でした。 ですが近年、API仕様を表現する際にはswaggerを利用するのが最も効率的で、保守性が高く、世間一般で仕様化され、見やすいというのもあり、一般化されてきたのではないのでしょうか 今回はそんなswaggerの書き方について、まずは書くために覚えておきたいポイントを解説していこうかと思います！ どう書いてくか swagger editorで書く 公式がWeb上に提供しているツールを利用し、すぐにでもswaggerの執筆が可能となっています！ なにをインストールする必要もなく開始1秒で利用できるので、私も重宝してます なお、ページを開くとサンプルAPI仕様がすでにある状態でのスタートとなり、記法の参考などにもなります vscodeで書く 必要なプラグインをインストールし、vsc
現場で必要になるswaggerの知識 - Qiita
前回は「今日から始めるswagger入門」という最低限書けるようになっておいた方が良い物をこちらの記事で解説させてもらいました 今回は、筆者が4〜5年ほど現場で見てきたswaggerを元に、現場で必要になるswaggerの知識をまとめましたので、ぜひご覧になっていただけると嬉しいです！ タグ付け pathsに書かれている各APIendpointをタグ付けしてグルーピングする目的で使用されます 現場では大量のAPIendpointを設計していくこととなるので、多くなってくると大変見辛くなってきます それをグルーピングすることにより見やすくしようということです openapi: 3.0.3 info: title: test-api version: 0.0.1 # ここから tags: - name: user description: ユーザー情報 # ここまで paths: /users
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. スキーマ駆動開発とは 詳しい解説は他の記事に譲り、一言
OpenAPIからコードを自動生成！『Orval』のメリットと選定理由
はじめに 本記事ではOpenAPIからclientコードを自動生成するライブラリ『Orval』を紹介します。そしてOrvalの強みを明らかにし、どのような場合に選定するべきかを提案できたらと考えます。 いきなりですが簡潔に結論を述べます。 これはOrvalの作者自身がswagger codegenといった他の自動生成ライブラリに物足りなさを感じ、特定の技術の上で最適なコード生成をしたいというモチベーションが根底にあります。 Orvalとは？ 改めてOrvalはOpenAPIからclientコードを自動生成するライブラリです。（公式によると）その特徴は、大きく3つ挙げられます。 Productivity Save time to drink a 🍺, get your api ready out of the box in a few seconds. Prevent human erro
OpenAPI (Swagger) まとめ - Qiita
はじめに 自分は実務でReact×TypeScriptを利用したフロント周りとNode.js(Nest)やRailsを用いたバックエンド(API)の開発をしています。 本記事では、OpenAPIを用いたAPI設計の書き方及び、Swaggerの説明と使い方についてまとめていきます。 この記事の対象者 プログラミング初心者から中級者 APIの基礎を理解している人 OpenAPIを用いてサクッとモックサーバーを試したい人 この記事の目標 モックサーバーの環境構築を学ぶ Swaggerの使い方を理解する OpenAPIを用いてAPI設計の具体的な書き方を学ぶ この記事でやらないこと 本記事ではOpenAPIの「書き方」をメインで解説するため、API設計についての細かい解説は省きます。 なおAPI設計については下記の記事でまとめているので、ぜひ参考にしてみてください。 用語解説 OpenAPI 公式
OpenAPI からなるべく生成するフロントエンド開発
こんにちは。 スキーマから何かを生成するのが大好きな seya と申します。 追記 今後は基本お手製スクリプトは書かないで ChatGPT にお願いした方がいいと思います。 ------------- 追記 終わり ------------ 今の会社では REST API のスキーマを OpenAPI で記述しているのですが、それを活用して何かしらを生成するスクリプトをよく書いています。 そんなネタがそれなりに溜まってきたので一挙大放出しようというのがこの記事です。 具体的には次のようなものを作りました。 TypeScript の型と API の生成 by aspida テストのための Factory 関数の生成 msw handlers の生成 API スキーマから生成のデメリット まず初めに、"生成"というのはとても生産的に感じますが、デメリットも存在するので触れておきます。 一番大き
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
OpenAPI のスキーマが変わった時に通知して型など諸々を自動で生成する GitHub Actions
昨今では API のスキーマから型を生成することはフロントエンド界での基本的エンジニア権とされていますが、これはバックエンドとフロントエンドでレポジトリが分かれている場合にややワークフローが煩雑になります。 これを楽にするための GitHub Actions の設定を書いてみたのでご紹介します。 何もない時のワークフロー OpenAPI スキーマを生成する 中身をコピって別レポジトリにはっつける npm run generate:all を実行して諸々を生成する PR 作ってマージ というのをアップデートする度にやる必要があり地味に面倒です。 ので GitHub Actions で 2〜4 を自動化しちゃいましょう。 スキーマから生成して PR を作る Actions を作成 まずはフロント側のレポジトリで実行する Action を作ります。 やっていることは npm run genera
TypeScript の型生成における OpenAPI Generator のハマりどころ - READYFOR Tech Blog
こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 嬉しいことに、READYFOR のプロダクト開発組織は急拡大中で、正社員の人数は 2019年7月時点では8名でしたが2021年4月現在は29名になりました 🎉 その反面、組織が大きくなってくると「我々はどこに向かってるんだっけ？」「あの人、最近はどんなことに取り組んでいるんだろう？」といった「見えないこと」が増えてきます🤔 この「見えないこと」を減らすために、READYFOR では毎月「プロダクト開発本部会」を開催しています。 プロダクト開発本部会では、必要な全体周知（組織やプロダクトの方針等）や月替わりプレゼンテーションを行っています。 本記事はこのプロダクト開発本部会の月替わりプレゼンテーションで発表した内容になります。 はじめに 以前 READYFOR で初主催とな
openapi-generator-cli による TypeScript 型定義
openapi-generator-cli を利用すると、OpenAPI 定義から TypeScript で利用可能なアセットを生成することができます。しかし最適な成果物を得るためには、OpenAPI 定義自体に少し工夫が必要で、一筋縄にはいかないことがあります。 本稿及びサンプルリポジトリでは、openapi-generator-cli と TypeScript 4.2 の新機能を活用したアプローチを紹介します。 課題点の確認 OpenAPI 定義にあたりresponsesフィールドのschemaに対し、インラインで定義を追加することが多いのではないでしょうか？OpenAPI を定義する GUI 「Stoplight Studio」 などでは、このインラインスキーマ定義が直感的で使いやすく、yaml を直接編集しなくても良いなど、開発に重宝します。 responses: "200": d
スキーマ定義言語 Protocol Buffers と protoc-gen-swagger を使って Web API のスキマを埋めよう - VOYAGE GROUP techlog
VOYAGE Lighthouse Studio の海老原 (@co3k) です。先日 30 歳になった記念としてタイトルはオヤジギャグです。 さて、普段は 神ゲー攻略 というゲーム攻略サイトを運営しているのですが、とある派生サービスを立ち上げるにあたり、 Web API スキーマ定義を gRPC に基づく形式の Protocol Buffers で書き、 protoc-gen-swagger プラグインを介して OpenAPI 定義ファイルとして生成する、というアプローチを採りました。 yugui さんの素晴らしい記事、「今さらProtocol Buffersと、手に馴染む道具の話」によってスキーマ定義言語としての Protocol Buffers がにわかに注目を浴びて以降、似たようなことをやりたいという方もいらっしゃるのではないでしょうか。 ところが、おそらく単体で protoc-g
Swaggerを使ったAPIドキュメントの作成と、バックエンドとフロントエンド間の連携
こんにちは。LINE Growth Technology福岡開発室でサーバーサイドエンジニアをしている中村です。 この記事では担当していたプロジェクトで実施した、Swaggerを使ったAPIドキュメントの作成と、BE（バックエンド）とFE（フロントエンド）間の連携について紹介します。 プロジェクトの説明 はじめに、今回LINE Growth Technology福岡開発室（以下「GT」）がシステムの設計開発を担当した、LINE公式アカウント審査ツールのプロジェクトについて説明します。 LINE公式アカウント審査ツールとは、LINE公式アカウントで認証済アカウントが申請された際に、申請内容が適切であるか審査するシステムです。 このシステムは、LINE公式アカウントが利用されている各国に存在する審査パートというチーム（以下「審査チーム」）によって利用され、日本以外の国家も含め、一日あたり平均約
Go の Open API 3.0 のジェネレータ oapi-codegen を試してみた | フューチャー技術ブログ
The Gopher character is based on the Go mascot designed by Renée French. 概要TIG DXチーム所属の多賀です。最近はフロントのコードを書いたりすることも増えましたが、引き続き Go も触っています。 Go で OpenAPI(Swagger) からコード生成する際には、 go-swagger をよく利用しています。 go-swagger については他記事でもまとめられています。 go-swaggerを用いたWebアプリケーション開発Tips19選 WAFとして go-swagger を選択してみた ただ、 go-swagger は Swagger 2.0 にのみ対応しており、OpenAPI 3.0 系が使えない問題がありました。最新に追従していく上でも Open API 3.0 系に寄せていきたいと考えていたので、な
[Golang]Echoで簡単にSwaggerを利用する
Tweet はじめに golangとechoを使ってJSON APIのswaggerを生成する方法について書きます。 swag というツールが提供されているので、基本的にはこのツールを使っていきます。 今回作ったサンプル置き場 使い方だけ見たい方はgithubのコードを見るのがいいと思います。 https://github.com/ken-aio/go-echo-sample/tree/v2 流れ swagを使ったswaggerドキュメントの生成は↓の流れで行います。 コメントを書く 自動生成する swagger uiのhandlerを設定する swaggerを開く 実際にサンプルプロジェクトを使ってswaggerを作ってみます。 1. コメントを書く API全体の設定 まずは全体の設定を main の中に書いていきます。 中身は利用に関する規約のURL、ライセンス情報、認証用のhttp
OpenAPI3を使ってみよう！Go言語でクライアントとスタブの自動生成まで！ - ZOZO TECH BLOG
はじめに こんにちは！ 2019年2月にZOZOテクノロジーズへサーバーサイドエンジニアとして入社した籏野（@gold_kou）と申します。 Qiitaでも少し記事書いてます。 いきなりですが、皆さんはAPI仕様書をどのように管理されていらっしゃいますか？ Confluence、Wiki、Markdown、Spreadsheet、Excelなど色々手段やツールはあると思います。私が担当しているプロジェクトではOpenAPIを導入しています。 この記事ではOpenAPIの基本と実際に導入して得られたノウハウをご紹介いたします。 OpneAPIの恩恵はただの管理の仕方にとどまらないので、ぜひこの記事を読んで開発効率化のお役に立てばと思います。 また、弊社のテックブログで以前、OpenAPI(Swagger)のバージョン2系に関する開発効率を上げる！Swaggerの記法まとめ や 開発効率を上げ
Swagger (OpenAPI 2.x) generates go-server codeの何が辛いのか
注意 まだ書くべきことはたくさんある go-swaggerは駄目だ、と見切りをつけて数年が経つので、情報が古い可能性がある OpenAPI 3.x を否定するものではない（むしろそちらには若干の希望を感じている） 解決策は書いてない 結論 Swagger generates go-server codeを採用するには、相当な覚悟が必要 どうせやるならOpenAPI 3.xに賭けたほうがいい 背景 この記事を書こうと思った動機 とつぶやいたものの、そのデメリットについて明確な言語化したことがなく、 単なる言いがかりじゃない というところをきちんとしておくため。 Swaggerはつらいよ 実際にプロジェクトで採用してみた結果、一体何が辛かったのかについて、3つの点から解説する。 問題点1: Swaggerの表現力と戦わねばならない そもそも$refがキツイ 説明まで含めて完全に同一な定義なんて
チームのWeb API開発を最適化するSchema Driven Developmentの解説＆実装例 - Qiita
チームでのWeb API開発において、進行を妨げる要因は様々な形で噴出します。 「フロントはバックエンドのAPI実装待ちなので動けません...」「ドキュメンテーションのコストが重い...」「ドキュメントと実装が全然違うので参考にならない...」 また、APIスキーマ設定が不十分だと、ビジネスドメインの最低原則やクライアント側のニーズを理解せずに、バックエンド都合のAPIがそのまま実装される危険性もあります。 そうした問題を解決すべくSchema Driven Developmentと呼ばれる開発手法が生まれました。 Schema Driven Developmentとは？ Schema Driven Development(以下SDD)とはチームにおけるWeb API開発フローを改善する開発手法の一つです。スキーマ駆動開発やSchema First Developmentとも呼ばれています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OpenAPI? What Is That? Is That Tasty?
