OpenAPI を守るのは難しい

by uutan1108

Slide 1

Slide 1 text

OpenAPI を守るのは難しい Object-Oriented Conference 2024 LT うーたん

Slide 2

Slide 2 text

自己紹介 ● うーたん ● 新卒サーバーサイドエンジニア ○ 株式会社ゆめみ ● 趣味 ○ アニメを見ること ● X ○ @uutan1108 2 月刊I/O 3月号、4月号に「プログラミング& 実行できるWEBアプリを手作り」掲載されたので読んでね

Slide 3

Slide 3 text

詳細はこちらのスライドを読んでください https://speakerdeck.com/kentaroutakeda/laravel-openapiniyoru-xin-kunai-sukimaqu-dong-kai-f 武田憲太郎さんのスライドです

Slide 4

Slide 4 text

目次 - OpenAPI とは - OpenAPI の自動生成を使わず開発 - 自動化、コードに取り込ませて守らせる - 終わりに

Slide 5

Slide 5 text

OpenAPI とは

Slide 6

Slide 6 text

OpenAPI とは - API(application programming interface)の仕様をJSONやYAMLファイルで記述できる - APIのエンドポイント、パラメータ、レスポンスなどの定義ができる - インタラクティブなドキュメントを生成できる - さまざまなプログラミング言語でAPIクライアントのコードを自動生成できる OpenAPI仕様とは、使いやすい記述ツールをご紹介！ https://apidog.com/jp/blog/what-is-openapi/

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

OpenAPI から interface を自動生成できる

Slide 10

Slide 10 text

APIクライアントのコードを自動生成できる - 自動生成するツールに OpenAPI Generator がある - TypeScript のコードを OpenAPI Generator を使って生成すると interface が生成される - API を利用するときに生成された interface を使う

Slide 11

Slide 11 text

OpenAPI (YAML) https://zenn.dev/overflow_offers/articles/20220620-openapi-generator

Slide 12

Slide 12 text

自動生成

Slide 13

Slide 13 text

https://zenn.dev/overflow_offers/articles/20220620-openapi-generator TypeScript (interface)

Slide 14

Slide 14 text

OpenAPI (YAML) に従ってそれぞれ実装する A P I バックエンドフロントエンド OpenAPI を変更して実装も変更する

Slide 15

Slide 15 text

OpenAPI (YAML) に従ってそれぞれ実装する A P I バックエンドフロントエンド自動生成されたコードを使う自動生成されたコードを使う

Slide 16

Slide 16 text

OpenAPI (YAML) に従ってそれぞれ実装する A P I バックエンドフロントエンド自動生成されたコードを使う自動生成されたコードを使う OpenAPI を信じてもらえる

Slide 17

Slide 17 text

フロントエンドもバックエンドも自動生成したコードを使えば... OpenAPI と実装に乖離がなくなるはず

Slide 18

Slide 18 text

OpenAPI の自動生成を使わず開発

Slide 19

Slide 19 text

OpenAPI で定義した仕様を信じている A P I バックエンドフロントエンド API の定義を実装するぞ API からのレスポンスを受け取って処理するぞ

Slide 20

Slide 20 text

OpenAPI で定義した仕様を信じている A P I バックエンドフロントエンドスキーマは人間が書く！

Slide 21

Slide 21 text

OpenAPI で定義した仕様を信じている A P I バックエンドフロントエンド OpenAPI から自動生成はしない！

Slide 22

Slide 22 text

OpenAPI の自動生成を使わず開発を続ける

Slide 23

Slide 23 text

OpenAPI を変更しなくても、実装に影響ないし... 実装を変更してから OpenAPI も変更してもらお

Slide 24

Slide 24 text

OpenAPI からコードを生成しないので、仕様書のように変更されなくなる...

Slide 25

Slide 25 text

OpenAPI (YAML) に従ってそれぞれ実装する A P I バックエンドフロントエンド OpenAPI のメンテ追いつかん

Slide 26

Slide 26 text

OpenAPI で定義した仕様を守らなくなる A P I バックエンドフロントエンドレスポンスを知りたかったら俺のコードを見ろ！

Slide 27

Slide 27 text

OpenAPI で定義した仕様を守らなくなる A P I バックエンドフロントエンドレスポンスを知りたかったら俺のコードを見ろ！ OpenAPI の仕様は信じない...

Slide 28

Slide 28 text

悲しい A P I バックエンドフロントエンドレスポンス知りたかったら俺のコードを見ろ！ OpenAPI の仕様は信じない... 人力でメンテは無理だよ...

Slide 29

Slide 29 text

バックエンドの実装にフロントエンドが依存 A P I バックエンドフロントエンドレスポンスを知りたかったら俺のコードを見ろ！バックエンドのレスポンスを確認するか...

Slide 30

Slide 30 text

インターフェース(API)ではなくバックエンドの実装にフロントエンドが依存するようになる

Slide 31

Slide 31 text

なんでOpenAPI を守らなくなるのか...

Slide 32

Slide 32 text

自動化、コードに取り込ませて守らせる

Slide 33

Slide 33 text

OpenAPI から自動生成させる A P I バックエンドフロントエンド OpenAPI から生成した interface に合わせて実装しろ！

Slide 34

Slide 34 text

生成したインターフェースを守らせる A P I バックエンドフロントエンド OpenAPI を変更しないで実装のレスポンスを変更させない！

Slide 35

Slide 35 text

バックエンドの実装を見なくても OpenAPI を見れば分かる A P I バックエンドフロントエンド OpenAPI をメンテするねメンテしないと実装できないからね

Slide 36

Slide 36 text

まとめ

Slide 37

Slide 37 text

実装に合わせて OpenAPI を書くのではなく OpenAPI を変更してから実装に反映したい

Slide 38

Slide 38 text

宣伝

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

2024. 5.12 Sun 11:00 - 16:00

Slide 41

Slide 41 text

OOC 2024 のアフターイベントします

Slide 42

Slide 42 text

ご清聴ありがとうございました🙇 42