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
APIとはなにか
Search
mikan
December 19, 2024
Technology
0
92
APIとはなにか
非エンジニア向けにAPIとかWeb APIについて解説した資料
mikan
December 19, 2024
Tweet
Share
More Decks by mikan
See All by mikan
イベントをどう管理するか
mikanichinose
2
130
ライブラリでしかお目にかかれない珍しい実装
mikanichinose
2
370
Strong Skipping Mode によってrecompositionはどう変わったのか
mikanichinose
0
200
Modeling UiEvent
mikanichinose
0
41
UIの構成要素に関する考察
mikanichinose
0
39
再考: 監視可能オブジェクト
mikanichinose
0
55
マルチモジュール懐疑派だったかつての自分に送る マルチモジュールの効能
mikanichinose
0
200
書評: 単体テストの考え方/使い方
mikanichinose
0
230
ComposeでリストUIをDraggableにする方法
mikanichinose
0
1.2k
Other Decks in Technology
See All in Technology
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
260
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
170
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
20241220_S3 tablesの使い方を検証してみた
handy
3
370
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
260
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
310
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
530
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
180
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Fireside Chat
paigeccino
34
3.1k
Documentation Writing (for coders)
carmenintech
66
4.5k
4 Signs Your Business is Dying
shpigford
181
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
We Have a Design System, Now What?
morganepeng
51
7.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Transcript
APIとはなにか
API = Application Programming Interface ソフトウェアやライブラリ、サービスなどがそれを操作するためにユーザーに公開している関数や らクラスやらエンドポイントやら
fetch API (JS) 8 リソース取得のためのAP( 8 HTTP通信に使" 8 fetchという名前の関数
Notion API (Web API) Notionのページのあるブロックの 下に子ブロックを追加す HTTPリクエスR
PATCHリクエスR ヘッダー:通信を行うために必要 な情報を格納する場5 Authorizatio 認証情r Content-Typ$ レスポンスがjsonであるこ とを表W Notion-Versio Notion APIのバージョン
インターフェースとは?
インターフェース ↔ 実装 t インターフェースとはユーザーに公開している部' t 関数であれば関数名・引数・返りR t Web APIであればエンドポイント名、必要なヘッダー情報、
レスポンスの形 t インターフェースの反対は実i t インターフェースは実装をユーザーから隠すためにある
インターフェース ↔ 実装 インターフェース 実装 Input Output
なぜ実装をユーザーから隠す必要が あるのか
安定な挙動だけをユーザーに届ける ため
なぜ実装をユーザーから隠す必要があるのか 1度ユーザーに公開した部分は滅多なことでは変更できなくな なぜならユーザーからしたら、今日利用できている機能が明日にはパラメータが変わって使 えなくなるなんて状況は許容できなd しかし開発は継続的に行われているので実装は常に変化してい そうした安定な部分と不安定な部分を分けるための仕組みがインターフェースです
インターフェース 実装 安定 不安定
インターフェース = 抽象化
例えばNotion APIがGo言語で作られていたとして、Go言語向けにしかAPI を公開していないとすると... PHPやJSなど他の言語で作っているアプリからは操作ができない。。 しかし、HTTPをインターフェースとしたRESTfulなWeb APIとして作られ ている場合... PHPやJSなどどのようなプログラミング言語であってもHTTP通信するた めの基本的な機能は言語機能として、またはライブラリとして用意されて いるので、言語によらず操作可能になる
インターフェースによって抽象化することの恩恵 インターフェース:呼び出し側の都合を柔軟に受け入れてくれる 実装:実装者の好きにできる
Web APIについて
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の設計思想
Web APIとは HTTPという方式を使ってネットワーク越しに呼び出せるようになったAPI Webアプリケーションとは誤解を恐れずに言うな! バックエンドをJSON生成 フロントエンドをJSON色付け係 として作ったアプリ
リクエスト データアクセス データ レスポンス(JSON) Webアプリケーションのクソ雑概略図
Web APIの中ではなにが起こって いるのか
Web API 典型的なWeb APIの動きを説明します Domain Domain Domain Domain Domain Dat@
7 D6 7 File request handler request handler request handler router リクエスト レスポンス
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
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 を担当するリクエストハンドラー
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 を担当するリクエストハンドラー
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 を担当するリクエストハンドラー
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 を担当するリクエストハンドラー
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 を担当するリクエストハンドラー
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 を担当するリクエストハンドラー
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がどうにかこうにか描画する