背景
実務にはいって思うのが当たり前のようにWeb開発の用語でやり取りをします。当たり前だろw
自分がわからない単語についてざっくりとアウトプットしたかったのでブログを書く次第となりました。
ブログは自分のアウトプットになるので楽しいですし実務は常に勉強なので最高です！😄
週に3回は投稿できるよう目指していきます。
今回の用語のアジェンダ
- API
- エンドポイント
- JSON
Web開発を始めると必ず出会う「API」「エンドポイント」「JSON」という言葉。
なんとなく使っているけど、実はよくわかっていない...という方向けに
できるだけシンプルに解説します。
3つの関係性
このブログではレストランを例えに説明していきます。
先に全体像を見せるとこうなります。
| 項目 | 役割 | レストランの例え | 実務でのイメージ |
|---|---|---|---|
| あなたのアプリ | データを使う側 | お客さん | フロントエンド（React / Vueなど） |
| API | 窓口・ルール | 注文カウンター | fetch() や axios |
| エンドポイント | 具体的な受付先 | メニューの各料理 |
/users /articles/1
|
| JSON | データの形式 | 料理の盛り付け | { "name": "ビーフカレー" } |
ふーんて感じですよね笑 初心者だとよくわかりません！
大丈夫です僕もブログでアウトプットしながら勉強してるんでそんなもんです。
1つずつ分解してやっていくので1つずつやっていきましょう✨
API（Application Programming Interface）
APIは「決められたルールでデータをやり取りする仕組み」で
ソフトウェア同士が会話するための「窓口」 です。
あなた（アプリ） → メニューを見て「カレーください」と注文する
カウンター（API） → 注文を受け付けて、厨房に伝える
厨房（サーバー） → 料理を作って、カウンター経由で渡す
ポイントは、あなたは厨房で何が起きているか知らなくていいということです。
材料がどこにあるか、シェフが何人いるか、どんな調理器具を使っているか、
全部知らなくても「カレーください」と言えば、ちゃんとカレーが届きます。🍛
最高ですねー注文して料理を頼んでる感じになります✨
エンドポイント
APIの中の「具体的なURL」 です。
APIが「注文カウンター」だとすると、エンドポイントは「メニューの各料理」になります！
何を注文するかによって、叩くURLが変わります。
カレーでも普通のカレーを頼んでるのか、カツカレーを頼むのか
はたまたほうれん草カレーを頼むのか
そこの具体的なカレーの種類のことですね
やっぱり例えがあるとわかりやすい！自分が理解できる！
実務では /users/1 や /articles のようなURLが
エンドポイントになります。
JSON（JavaScript Object Notation）
APIでやり取りするデータの「形式」 です。
注文カウンター（API）で特定のメニュー（エンドポイント）を頼むと、料理が届きます。
その「料理の盛り付け方」がJSONだと思っていただけるとわかりやすいですね！
JSONファイルをカレーを例に例えて作成してみました！✨
{
"name": "ビーフカレー",
"price": 850,
"spicy": "中辛",
"toppings": ["チーズ", "ゆで卵"]
}
なぜJSONが使われる？
- 人間が読みやすい（見れば何となくわかる）
- プログラムで扱いやすい（多くの言語で簡単にパースできる）
- 軽量（余計な情報が少ない）
実際の流れ
// エンドポイントを叩く
const response = await fetch('https://api.example.com/curry/1');
// JSON形式でデータを受け取る
const curry = await response.json();
console.log(curry.name); // "ビーフカレー"
まとめ
API:ソフトウェア間の窓口(カレー屋のカウンター）
エンドポイント:APIの中の具体的なURL（メニューの各料理）
JSON:やり取りするデータの形式（料理の盛り付け方）
感想
初心者がつまずきそうなポイントを具体的な例えを使いわかりやすく伝えることを意識して
ブログを書きました。
日頃、頻出する単語ですししっかり土台を作ることで
より深く理解できることと思います。
これからもアウトプットを習慣にし自分に力をつけようと思いました！！