id: F-18(誌面表示: F-18) · 物理ページ: 340–341(pages=2) · category: term_tool · figure_type: comparison · status: ready · evaluation_date: 2026-08-10
tagline 45/25-45何を 100/60-200どこで 84/60-200会話例 37/25-50見1 34/15-40見2 30/15-40見3 25/15-40見4 24/15-40見5 35/15-40見6 31/15-50
← F-17 Astro 目次 F-20 ESLint →
技術用語
340

フレームワーク/ライブラリ

自分から呼ぶ部品箱がライブラリ、土台が主役で自分のコードが呼ばれるのがフレームワークです。
体験区分:少しだけ触った 推奨読者レベル:Level 2-3

何をしてくれるか

ライブラリは必要なときに自分のコードから呼び出す部品の集まりです。フレームワークは逆に、土台側が全体の流れを握り、自分の書いたコードが呼ばれる側になります。この向きの違いは「制御の逆転」と呼ばれます。

どこで出会うか

React はライブラリ寄り、Next.js はフレームワークとよく説明されます。AI に「どの構成で作りますか」と聞かれたときに、この区別を知っていると答えやすくなります。

比較図
図(figure_type: comparison)は本番生成器(Astro + React primitive)で描画。
iter 22 時点ではプレースホルダ。
フレームワーク/ライブラリ を使う人

左右 2 コマの比較図。左「ライブラリ」は担当者が道具箱から部品を選んで自分のコードに矢印で組み込む様子。右「フレームワーク」は大きな枠(土台)から担当者の書いたコードへ矢印が伸び、枠側が呼び出している様子。矢印の向きが左右で逆転しているのが要点。

擬人化ポンチ絵 · 後日差し込み
開発フローでの位置
要件整理
ツール選定
実装
保守
2026.08·ready
「フレームワークは土台側、ライブラリは部品側と覚えると整理しやすいです。」
フレームワーク/ライブラリの見方
341
この用語の見どころ
1
役割

「自分から呼ぶ」か「呼ばれる」かでコードの主導権を分ける対概念です。

2
うれしさ

違いが分かれば、AI が使う構成の理由を理解しやすくなります。

3
注意点

呼び方が違うだけで、優劣を表す言葉ではありません。

4
どこで役立つか

AI に構成方針を聞かれたときの会話で役立ちます。

5
はじめに

React はライブラリ、Next.js はフレームワークの例が定番です。

6
深掘り先

React(F-10)、Next.js(F-11)、制御の逆転

非エンジニアのつまずき
  • 「自分から呼ぶのがライブラリ、呼ばれるのがフレームワーク」と言われても、正直そこが分からない。
  • React と Next.js が、どっちも同じ「仕組みの中のもの」に見える。
  • 並べられると余計に混乱する。
私のコメント
  • 第一印象:呼ぶ・呼ばれるという説明が、そもそもピンとこなかった。
  • 良い点:良し悪しを書くようなものではない、という気がしています。仕組みの呼び方の話なので。
  • ダメな点:同じく、ここで悪いところを挙げるようなものでもないと思っています。
  • 誰向けか:自分でアプリを作っていく人です。バイブコーディングの表層的なところから一歩進んで、バックエンド寄りのライブラリまで見にいける人。どういうアーキテクチャで動いているのか、どこがよくてどこが悪いのかを自分で話せるようになるには、ここは必要だと思います。
関連用語
備考

「フレームワークの方が優れている」という優劣の話ではなく、あくまで制御の向きの違いであることを本文・図の両方で強調します。

F-18·term_tool
バイブコーディング図鑑