こんにちは、シンヤです！
先日、以下のツイートをしました。

そういえばブログを書いていて気付いたのですが、「ライブラリ」と「フレームワーク」の違いってわかりづらいですよね
話の流れで上記を整理していたのですが、改めてブログとして別記事を書いて、上記の違いを説明した記事を書いてみようと思います😀

— シンヤ@ITブログ執筆🌟 (@shinyasato_ss) October 21, 2020

そういえばブログを書いていて気付いたのですが、「ライブラリ」と「フレームワーク」の違いってわかりづらいですよね
話の流れで上記を整理していたのですが、改めてブログとして別記事を書いて、上記の違いを説明した記事を書いてみようと思います😀

こちらのツイートについて、深掘りして解説していこうと思います。

---

「道具」と「道具箱」みたいな関係

プログラミングの概念を理解するために、「ライブラリ」と「フレームワーク」の違いをまず解説いたします。

• ライブラリ
• Webの画面を作るための道具の一つ
• フレームワーク
• ライブラリを使い、すぐにWebアプリが作れるように整理された道具箱

というのが、イメージしやすいかと思います😊
このブログに使われている、「React.js」と「Gatsby.js」の関係性を整理すると・・・

• React.js：ライブラリ
• Gatsby.js：フレームワーク

つまり「Gatsby.js」は、「React.js」というライブラリを使い、Webアプリ作りがすぐ行えるように作られた、フレームワークということになります😀

このライブラリとフレームワークの違いにも、明確なメリットデメリットがあります。

ライブラリ
メリット	デメリット
別の言語で動いている、既存のシステムにも組み込むことができる（例えば、Rails + React.js など）。	Webの画面を作るだけなので、SSRやその他必要な機能は、自分で作らないといけない。

フレームワーク
メリット	デメリット
予め必要な機能が揃っているので、すぐにWebアプリ作りを行うことができる。	決められた通りにしか動かないので、既存のシステムに組み込むことはできない。

上記を加味して、それぞれのメリットを一言で表すと・・・

• ライブラリ
• どのシステムにも組み込めるので、柔軟な使い方ができる
• フレームワーク
• 必要最小限な設定を変えるだけで、すぐにWebアプリを作ることができる

という感じになります。
Gatsby.jsのようなフレームワークの場合、SSRやその他Webアプリを作るために必要な機能が、予め組み込まれています。

ライブラリを使ってWebアプリを作る場合、Webアプリ作りに必要な機能は、別途実装しないといけません😅

---

ライブラリとフレームワークの紹介

ここからは小話として、代表的な「ライブラリ」と「フレームワーク」をご紹介いたします。

ライブラリ

React.js	Vue.js
Facebook製。 「JSX」という特殊な記法でコードを書いていく。 コードの書き方が生のJavaScriptに近いので、他の技術に転用がしやすい。	個人開発。 HTMLに近い書き方でコードを書いていく。 学習コストが低いので、初学者の方でもすぐWebアプリ作りができる。

フレームワーク

React.js製

Next.js	Gatsby.js
リリース当初からSSRをサポートしており、ページ毎のmetaタグを簡単に変えられたり、カスタマイズをすればブログを作ることも可能。	SPAでブログが作れることが特徴で、WordPressのようにプラグインによるカスタマイズや、テーマ機能でデザインを変えることも可能。

Vue.js製

Nuxt.js	VuePress
Webアプリ作りに特化。 Vue.jsの簡単さはそのままに、SSRやmetaタグの簡単な変更もサポートしている。	ブログ作りに特化。 複雑な設定の変更をしなくても、Markdownを書くだけでブログ記事を作ることができる。

---

まとめ

• ライブラリは「道具」フレームワークは「道具箱」
• ライブラリやフレームワークには、それぞれ特徴がある

以上になります。
ではでは、またね〜🤗