APIとはなにか

非エンジニア向けにAPIとかWeb APIについて解説した資料

Transcript

1. APIとはなにか
2. API = Application Programming Interface ソフトウェアやライブラリ、サービスなどがそれを操作するためにユーザーに公開している関数や らクラスやらエンドポイントやら
3. fetch API (JS) 8 リソース取得のためのAP( 8 HTTP通信に使" 8 fetchという名前の関数
4. Notion API (Web API) ” Notionのページのあるブロックの 下に子ブロックを追加す„ ” HTTPリクエスR ” PATCHリクエスR ” ヘッダー：通信を行うために必要 な情報を格納する場5 ” Authorizatio ” 認証情r ” Content-Typ$ ” レスポンスがjsonであるこ とを表W ” Notion-Versio ” Notion APIのバージョン
5. インターフェースとは？
6. インターフェース ↔ 実装 t インターフェースとはユーザーに公開している部' t 関数であれば関数名・引数・返りR t Web APIであればエンドポイント名、必要なヘッダー情報、 レスポンスの形 t インターフェースの反対は実i t インターフェースは実装をユーザーから隠すためにある
7. インターフェース ↔ 実装 インターフェース 実装 Input Output
8. なぜ実装をユーザーから隠す必要が あるのか
9. 安定な挙動だけをユーザーに届ける ため
10. なぜ実装をユーザーから隠す必要があるのか ” 1度ユーザーに公開した部分は滅多なことでは変更できなくな ” なぜならユーザーからしたら、今日利用できている機能が明日にはパラメータが変わって使 えなくなるなんて状況は許容できなd ” しかし開発は継続的に行われているので実装は常に変化してい ” そうした安定な部分と不安定な部分を分けるための仕組みがインターフェースです インターフェース 実装 安定 不安定
11. インターフェース = 抽象化
12. 例えばNotion APIがGo言語で作られていたとして、Go言語向けにしかAPI を公開していないとすると... PHPやJSなど他の言語で作っているアプリからは操作ができない。。 しかし、HTTPをインターフェースとしたRESTfulなWeb APIとして作られ ている場合... PHPやJSなどどのようなプログラミング言語であってもHTTP通信するた めの基本的な機能は言語機能として、またはライブラリとして用意されて いるので、言語によらず操作可能になる インターフェースによって抽象化することの恩恵 インターフェース：呼び出し側の都合を柔軟に受け入れてくれる 実装：実装者の好きにできる
13. Web APIについて
14. Web APIとは Web APIのなかでもとくにREST APIについて説明する REST AP’ „ HTTPをインターフェースとしたAP’ „ HTTPリクエスk „ urp „ ヘッダ— „ メソッ „ GET、POST、PATCH、DELET „ ボデg „ json、form-datG „ HTTPレスポンa „ ステータスコー „ 200、404、503..7 „ ヘッダ— „ ボデg „ text、json、video、image ※REST以外のWeb APIの¾ „ RP­ „ SOA¥ „ XM§ „ 超複œ „ GraphQ§ „ BFF(Backend For Frontend)でよく使われ „ オーバーフェッチング・アンダーフェッチング・ N+1問題を解決するために登場しv „ gRP­ „ Protocol BuffeŸ „ マイクロサービス間の通信に用いられる REST: Web APIの設計思想
15. Web APIとは HTTPという方式を使ってネットワーク越しに呼び出せるようになったAPI Webアプリケーションとは誤解を恐れずに言うな! バックエンドをJSON生成 フロントエンドをJSON色付け係 として作ったアプリ
16. リクエスト データアクセス データ レスポンス（JSON） Webアプリケーションのクソ雑概略図
17. Web APIの中ではなにが起こって いるのか
18. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト レスポンス
19. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET
20. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET GET, /api/todos を担当するリクエストハンドラー
21. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET GET, /api/todos を担当するリクエストハンドラー
22. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET GET, /api/todos を担当するリクエストハンドラー
23. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET GET, /api/todos を担当するリクエストハンドラー
24. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET GET, /api/todos を担当するリクエストハンドラー
25. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET GET, /api/todos を担当するリクエストハンドラー
26. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@ 7 D6 7 File request handler request handler request handler router リクエスト http://localhost:3000/api/todos GET GET, /api/todos を担当するリクエストハンドラー レスポンス [ {“id”: 1, “title”: “TODO1”, “createdAt”: “2024-01-01 12:00:00”}, {“id”: 2, “title”: “TODO2”, “createdAt”: “2024-01-01 13:15:00”} ] → 受け取ったJSONをもとにReactがどうにかこうにか描画する