JavaScript を勉強し始めてしばらく経つのですが、フレームワークとライブラリの違いがいつも分からなくなります。
いつまでも分からないとも言ってられないし（恥ずかしいので）本気を出して調べようと思います。
フレームワーク
フレームワークは日本語で「枠組み」という意味を持ちます。
ユーザー（エンジニア）に枠組みとして様々な機能を一度に全て提供し、「じゃああなたはこの枠組みの中で自由にコードを書いてね」とするプログラムがフレームワークと言われます。
イメージしてみましょう。家の枠組みはもう完成していて組み直すことはできません。ただし塗装や内装はあなた次第です。
外部フレームワークを利用するということは、既に骨組み完成済みの家を買ってくるようなものです。自由度が低いように思うかもしれませんが、1から家を組むのってたぶん大変ですよね？
フレームワーク = 枠組みが既に用意されているため家の基礎は品質がある程度保証されています。その上に自分のアレンジを積んでいくことで、思い通りの制作物をかなり簡単に作ることができます。
代表的なフレームワークには以下のようなものがあります。
- Angular
- Vue.js
- Next.js
- Mocha
- Jasmine
- Express
ライブラリ
日本語で言うと「図書館」ですね。
ライブラリもいろいろな機能を持ったプログラムですが、ユーザーは好きな本を借りるかのように何の機能を使うか選択することができます。
またライブラリは「部品」であるとも言われます。フレームワークでは枠組みが用意されているのに対して、ライブラリは「こういった枠組みの中で、この役割をこのライブラリに担ってほしい」というふうに部品として意図的・主体的に選んでいく必要があります。
フレームワークで枠組みを用意し、ライブラリで特定の機能を補完する、という仕組みも多くの場面で使われています。
代表的なライブラリには以下のようなものがあります。
- React
- Chai
- jQuery
React がライブラリなのは意外ですね。でも書いてあるんだな、公式サイトに。
よく「どっち使うの？」と言われている Vue については残念ながら僕は触った事がないのですが、色々調べてみた結果 React がライブラリである理由として「React は柔軟である」ということが挙げられていました。
React はルーティングや API 使用の場面で何を使うか考えなければならず、多くの問題に対処するためにサードパーティのライブラリを使用する必要があるため、全ての環境が整っているフレームワークだとは言えません。
フレームワークである Angular や Vue には、より多くのツールが含まれています（そうなんですね）。
つまりライブラリである React を利用するためには他のライブラリの知識も必要になってくる、というわけですね。
話がそれましたがライブラリは React のように一部の特定機能を持ち、他のライブラリ、フレームワークと共に自分のプログラムに組み込んで使えます。
まとめ
- フレームワーク: その名の通り枠組みであり、機能が整っている。ユーザーは枠組みの中でコードを書く
- ライブラリ: 図書館の本のように何の機能を使うか選択できる。枠組みの中で自由に取捨選択できるが、自由度が高いがゆえに組み合わせるツールの選定が大変な場面も
参考資料
- Why React JS is a Library not Framework - TJ WEBDEV
- Is React a Library or a Framework? Here's Why it Matters
React をフレームワークとして紹介しているサイトも多かったです。区別しなくても別にいいのかな？ と思ったのですが、React をフレームワークだと思っていると「開発大変すぎ」ってなりそうなのでライブラリだと知っておくといいのかもしれません。