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
【ディップ|26年新卒研修資料】OpenAPI/Swagger REST API研修
Search
ディップ株式会社
PRO
May 01, 2026
Programming
460
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
【ディップ|26年新卒研修資料】OpenAPI/Swagger REST API研修
ディップ株式会社
PRO
May 01, 2026
More Decks by ディップ株式会社
See All by ディップ株式会社
_型ガードしたのにnullable_から卒業する.pdf
dip_tech
PRO
0
47
はじめての環境構築!デプロイ〜Docker基礎を学べるワークショップ!
dip_tech
PRO
0
44
【TSKaigi2026登壇資料】決定論的な型チェックへ Go 製コンパイラによる10倍速の裏側で stableTypeOrdering から見える並列化への挑戦
dip_tech
PRO
2
440
【TSKaigi2026登壇資料】バイトル」のTypeScriptリニューアル — 積み上がったレガシーとパフォーマンスに挑む現在地
dip_tech
PRO
1
770
【新卒研修】ライブデモ + compose.yaml読解_講義資料
dip_tech
PRO
0
310
【ディップ|26年新卒研修資料】Docker_ハンズオン研修
dip_tech
PRO
0
430
【ディップ|26年新卒研修資料】TDD実装演習
dip_tech
PRO
0
480
ハッカソンや個人開発で何作る? テーマ発見〜アイデア発想ハンズオン! 技育CAMPアカデミア
dip_tech
PRO
0
100
技育祭登壇|「AIを使える」は、勘違いだった。 コードが書けてもプロになれなかった僕の1年戦記
dip_tech
PRO
0
160
Other Decks in Programming
See All in Programming
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
12
4.7k
継続モナドとリアクティブプログラミング
yukikurage
3
460
コーディングルールの鮮度を保ちたい for SRE NEXT 2026 / keep-fresh-go-internal-conventions-sre-next-2026
handlename
0
130
The Bowling Game- From Imperative to Functional Programming - Part 1
philipschwarz
PRO
0
300
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
panda728
PRO
2
240
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
4
1.6k
才能?センス?知らん、 続けたもん勝ちだ。-- 結婚・出産・癌を越えてなお、私がプロダクトを創り続ける理由
16bitidol
2
810
act1-costs.pdf
sumedhbala
0
200
エージェンティックRAGにAWSで入門しよう!
har1101
9
1.9k
Language Server 使ってる? 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
handlename
0
840
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
kotetuco
0
170
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
manfredsteyer
PRO
0
150
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
340
58k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Building the Perfect Custom Keyboard
takai
2
810
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
We Have a Design System, Now What?
morganepeng
55
8.2k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
290
Designing Powerful Visuals for Engaging Learning
tmiket
1
440
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
340
Skip the Path - Find Your Career Trail
mkilby
1
160
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6k
Transcript
OpenAPI / Swagger REST API 研修 窓⼝から「絶対に破れない契約」へ dip Engineering Training
2026
研修の⽬的 配属後、チームのAPI仕様を⾃⼒で読み解き、実装に落とし込めるようになる 1 読める 既存のOpenAPI定義を⾒て、 エンドポイントの役割‧ リクエスト/レスポンスの構造‧ 制約を正確に把握できる 2 書ける
新しいAPIや既存APIの変更を OpenAPIで記述でき、 Swagger UIで動作確認できる
RESTやOpenAPIの 歴史を知ろう
① そもそもAPIとは? APIの本質を、レストランの「メニュー表」に例えて考えてみましょう。 客(フロントエンド) 料理を注⽂する⼈ API(メニュー表) 両者を繋ぐ 「唯⼀の⼿段」 シェフ(バックエンド) 裏で料理を作る⼈
キーワード:「疎結合(そけつごう)」 客はシェフの調理法を知らなくても、メニューさえあれば料理を受け取れます。 メニューという「境界線」が、お互いの⾃由と安全を守ります。
「密結合」vs「疎結合」 密結合(地獄) メニューがない状態 客が厨房に⼊り込んで 「あのフライパンで焼いて」 と直接指⽰する状態。 シェフが道具を変えただけで 客の指⽰はエラーになる 疎結合(正義) メニューがある状態
「ハンバーグ」と頼むだけ。 シェフは隠し味を変えても、 DBのテーブル名を変えても問題なし。 メニューという「境界線」が お互いの⾃由と安全を守る
「密結合」vs「疎結合」 密結合(地獄) メニューがない状態 客が厨房に⼊り込んで 「あのフライパンで焼いて」 と直接指⽰する状態。 シェフが道具を変えただけで 客の指⽰はエラーになる 疎結合(正義) メニューがある状態
「ハンバーグ」と頼むだけ。 シェフは隠し味を変えても、 DBのテーブル名を変えても問題なし。 メニューという「境界線」が お互いの⾃由と安全を守る APIは疎結合が嬉しい
② APIの歴史:カオスから契約へ 1 創世記(1990年代):密結合の時代 CORBA, DCOM, (SOAP)… OSやバイナリレベルでの深い互換性が求められ、特定の複雑な設定を双⽅に合わせないと 通信すらできない、極めて「密結合」な時代でした。 2
RESTの普及(2000年代〜):疎結合を現実にした⾰命 REST 「Webブラウザと同じ仕組み(HTTP)を使えば、もっと楽に繋がる」という設計思想が主流に。
RESTの普及:URLとメソッドだけで繋がる 疎結合の理想をWebに応⽤。URLとHTTPメソッドだけでやり取りできる世界へ。 REST API エンドポイント例 GET /jobs 求⼈取得 POST /entries
応募送信 成功の理由 疎結合の理想をWebに応⽤し、URLとメソッド(GET/POSTなど)だけでやり取りできる 環境を整えた。シンプルさが爆発的な普及を⽣んだ。
仕様書迷⼦時代:ドキュメントと実装が乖離する 通信は楽になった。しかし使い⽅はWiki等の「⼈間向けのメモ」で管理されていた。 悲劇:ドキュメントが「嘘」になる 実装(コード)は進化するのに、Wikiの更新が忘れられ、ドキュメントと実態が乖離してしまう。 必須のはずの項⽬が⼊っていない キー名がドキュメントと違う 仕様書がどこにあるか分からない
仕様書迷⼦時代:ドキュメントと実装が乖離する 通信は楽になった。しかし使い⽅はWiki等の「⼈間向けのメモ」で管理されていた。 悲劇:ドキュメントが「嘘」になる 実装(コード)は進化するのに、Wikiの更新が忘れられ、ドキュメントと実態が乖離してしまう。 必須のはずの項⽬が⼊っていない キー名がドキュメントと違う 仕様書がどこにあるか分からない 「厳格な契約」「⾃動化」 が求められた
誕⽣ Swagger/OpenAPI
Swagger → OpenAPI:契約のプログラム化 「⼈間向けのメモ」を「マシンが読める設計図」に変えよう、という発想。 Swagger(2011年〜) もともとは特定のツール名。 開発現場の苦労から「コードとドキュメントを⼀ 体化したい」 という動機で誕⽣。 OpenAPIの「⽣みの親」であり前哨戦
OpenAPI(2015年〜) Swaggerの「書き⽅のルール」が業界標準として独⽴。 世界中のエンジニアが同じルールで APIを定義できるように。 YAML/JSONで記述する「設計図」 単なるメモから「設計図」に変わったことで、1つのYAMLファイルから複数の恩恵を同時に得られるように
OpenAPI(YAML)のコード例 openapi-spec.yaml paths: /users/{id}: get: summary: ユーザー情報取得 responses: '200': content:
application/json: schema: $ref: '#/.../User' components: schemas: User: type: object required: [name] properties: name: { type: string } age: { type: integer } ← これが「絶対の契約」
Swagger UI の表⽰例
OpenAPIがもたらす「3つの魔法」 1つのYAMLファイルから、以下の恩恵を同時に得られます。 視覚化 嘘をつかないドキュメント Swagger UI YAMLを読み込むだけで、ブラウザ上 でAPIを試せる画⾯が⾃動⽣成され る。 堅牢化
型の⾃動⽣成 TypeScript YAMLから型定義を⾃動⽣成。スペル ミスや認識齟齬がゼロに。 並⾏化 モックサーバーの即時起動 Mock Server バックエンド未完成でも「偽物のサー バー」を⽴てられる。フロントとバッ クが同時に⾛り出せる。
【図解】1つのYAMLから広がるエコシステム openapi.yaml 1つの設計図 Swagger UI ブラウザで⾒れる APIドキュメント 型定義 型安全なコードを⾃動⽣成 Mock
Server 偽サーバーで 並⾏開発
【図解】APIの進化タイムライン 1990s CORBA DCOM 密結合 バイナリ依存 2000s SOAP XMLベース まだ複雑
2000〜 REST HTTP + URL シンプル⾰命 2011〜 Swagger ドキュメント ⾃動⽣成 2015〜 OpenAPI 業界標準 絶対の契約 まだ複雑… シンプルに! ⾃動化! 標準化! 密結合 → 疎結合 → ⾃動化 → 標準化 歴史の流れは「より楽に、より安全に繋がる」⽅向へ⼀貫して進んできた
【整理】REST‧OpenAPI‧Swagger の違い この3つは混同しやすいが、それぞれ「レイヤー」が違います。 REST 通信スタイル APIの「設計思想」 URLとHTTPメソッド (GET/POST等)で リソースを操作する という考え⽅そのもの。
たとえると… 「注⽂は⼝頭で 1品ずつ」というルール OpenAPI 仕様(規格) APIの「設計図のフォーマット」 RESTで作ったAPIを YAML/JSONで 正確に記述するための 業界標準ルール。 たとえると… 「メニュー表の書式」 = 全店舗共通テンプレ Swagger ツール群 OpenAPIを「使う」ための道具箱 Swagger UI(閲覧) Swagger Editor(編集) Swagger Codegen(⽣成) などのツール集。 たとえると… 「メニュー表を 印刷する印刷機」
③ なぜ「REST + OpenAPI」なのか GraphQLの⽐較(CTO戦略) GraphQLは柔軟だが、設計や更新処理が複雑。 「全員が迷わず、堅実に作れること」を優先し、世界中で最も普及しているRESTを OpenAPIでガチガチに固める戦略をとっている。 結論 最もエコシステム(便利なツール)が充実しており、
学習コストを抑えつつ最⼤の堅牢性を得られるのが、この組み合わせ。
④ フロントを守り抜く「絶対のルール」 【図解】SoE / SoR 分離アーキテクチャ SoE(System of Engagement) ユーザーに触れる層
Web フロントエンド モバイルアプリ BFF(中間サーバー) O p e n A P I 絶対の 契約 SoR(System of Record) データを守る層 マイクロサービスA マイクロサービスB データベース群 裏側を丸ごと⼊れ替えても、「契約(OpenAPI)」さえ守ればフロントは壊れない
④ フロントを守り抜く「絶対のルール」 「絶対の契約(スキーマ)」 裏側のシステムを丸ごと⼊れ替えても、フロントが壊れないのは、 双⽅が「OpenAPIという共通ルール」を守っているから。 ビジネスを⽌めない武器 裏側の完成を待たずに、先に「契約(OpenAPI)」だけを決めてしまえば、 フロントとバックエンドは同時に開発をスタートできる。
⑤ ⾃⾛するエンジニアになるために 「⾃⾛」= 誰かに聞く前に⾃⼒で仕様を読み解き、実装に落とし込める⼒ この後のハンズオンの⽬標 読解⼒ YAMLを⾒てTypeScriptの型を イメージできる 設計⼒ 新しい機能を「契約」から
定義できる スピード感 仕様ファーストで並⾏開発を 体感する
OpenAPIを 使いこなそう💪
取り組んでいただく 課題
スポバのお仕事コンテキストのOpenAPI仕様書 https://github.com/dip-inc/training-for-new-grads-2026/blob/main/day1/API%E8%A8%AD%E8%A8% 88/api-handson/api/job.yaml
このエンドポイントを実⾏して求⼈を作ってみよう!
そして、
新しいAPIを定義して、 スポットバイトルに貢献してもらいます!
セットアップ