発端
手元でフロントエンド開発をしていて、Vue.js(フレームワーク)とNode.js(ライブラリ)の違いがわからなくなってきたので、具体例を上げながらその違いについて考えていく。
用語確認
###言語
普通、何かのコードを書こうとした時に最初に選ぶのは言語ですよね。
機械学習をしたいならpython、フロント開発ならHTML・CSS・JS、バックエンドならPHPとか。
###フレームワーク
でも、こんなサービスを作りたい！と思って検索をすると、Ruby on Rails (Rubyと何が違うんだ！)とか、Webページ作ろうと思ったらReactとか、PHPのLaravelだとか…
便利だ便利だと皆は言うが、一体こいつらは何者なんだ？
###ライブラリ
そうかと思えばNode.jsだのNumpyだのこいつらはライブラリときた。
要するになんか便利なことをしてくれるんだろ？じゃあ一体フレームワークと何が違うんだよ！！
##料理の例で考える
キレ散らかしても仕方ないのでもう一度言葉の意味から捉え直してみる。
###枠組み(フレームワーク)
フレームワークを直訳すると「枠組み」である。
つまりある目的を達成するための枠組みがフレームワークの指すものである。
これを料理を作ることに例えてみる。
料理を作るフレームワークロボット「グルメくん」が存在する。
グルメくんはレシピを与えると料理を一人で作ることができる。
しかし、料理に特化していてキッチンから出ることはできないので、買い物などは行うことができない。
また、美的センスはないので、どんな料理も白い皿に盛り付けてしまうが、ユーザがいい感じの皿を渡すとその皿に盛り付けてくれる。
この時ユーザがしなければならないことはグルメくんにレシピ・材料・皿を与えることだ。
グルメくんが料理という一つの流れの全てを管理していて、その場面場面で必要なものをユーザが与えることで料理が完成する。
###図書館(ライブラリ)
一方でライブラリを直訳すると「図書館」である。
つまり、便利な諸々の機能(クラスやメソッド)がまとまっておいてある物がライブラリである。
こちらも料理を作ることで例えてみる。
料理を作る時に役立つライブラリロボット「Kaji」が存在する。
Kajiはとても頭が良くて、お使いを頼めば希望のものを買いに行ってくれるし、指示した通りにカットして炒めてくれる。当然盛り付けも行える。
それだけではなく、キッチンのお掃除もできるし、冷蔵庫の中の傷んだ食材を捨てることもできるし、etc...
ではKajiを使って料理が作りたい時にユーザは何をする必要があるのだろうか。
ユーザはレシピを確認してKajiに材料を買ってきてもらい、適切な指示で調理をさせて、盛り付けの最後まで監督する必要がある。
ユーザが料理を作る全体の流れを管理しながら、Kajiはその実際の作業を行ってくれる。
##具体例
以上がフレームワークとライブラリの違いの直感的な説明である。
これをNode.jsとVue.jsを具体例に使って説明すると、
###Node.js(ライブラリ)
Node.jsはJSのライブラリである。
つまり、JSでできるあんなことやこんなこと(いろんな機能)をコマンド一つで扱うことができる。
###Vue.js(フレームワーク)
Vue.jsはJSのフレームワークである。
つまり、JSを使って作るwebページの雛形であり、細部の調整をすることでwebページを簡単に作ることができる。
##まとめ
プロダクトの雛形として大枠ができている物がフレームワーク。
便利機能をまとめた物がライブラリ。
完成品を先に簡単に作っておいてくれるのがフレームワーク。
完成品を簡単に作るための機能を呼び出せるのがライブラリ。
##感想
正直フレームワークとライブラリの違いなんてそんなにないだろうし、わかんなくて良くね？
と、長らく思っていましたが、実際に記事を書いてみると自分の中ですっきりと理解できたような気がします。
##参考
こちらの記事を参考にさせていただきました。