Upgrade to Pro — share decks privately, control downloads, hide ads and more …

APIとはなにか

mikan
December 19, 2024

 APIとはなにか

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

mikan

December 19, 2024
Tweet

More Decks by mikan

Other Decks in Technology

Transcript

  1. Notion API (Web API) ” Notionのページのあるブロックの 下に子ブロックを追加す„ ” HTTPリクエスR ”

    PATCHリクエスR ” ヘッダー:通信を行うために必要 な情報を格納する場5 ” Authorizatio ” 認証情r ” Content-Typ$ ” レスポンスがjsonであるこ とを表W ” Notion-Versio ” Notion APIのバージョン
  2. 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の設計思想
  3. Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@

    7 D6 7 File request handler request handler request handler router リクエスト レスポンス
  4. 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
  5. 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 を担当するリクエストハンドラー
  6. 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 を担当するリクエストハンドラー
  7. 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 を担当するリクエストハンドラー
  8. 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 を担当するリクエストハンドラー
  9. 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 を担当するリクエストハンドラー
  10. 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 を担当するリクエストハンドラー
  11. 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がどうにかこうにか描画する