React, Vue.js はフレームワーク？ライブラリ？

この記事は[Code Chrysalis Advent Calendar 2019](https://qiita.com/advent-calendar/2019/codechrysalis)の記事です。

# はじめに
こんにちは！
[CodeChrysalis](https://www.codechrysalis.io/)のイマーシブブートキャンプに参加中のえりこです:coffee:

私はCode Chrysalisに入って初めてReact＆Vue.jsを触ったのですが、
初学者の私には混乱の連続でした。。

今日は私の混乱の１つである
「React, Vue.js はフレームワーク？ライブラリ？」問題について
私なりの見解を書こうと思います。


# React, Vue.js はフレームワーク？ライブラリ？
まず、それぞれのホームページを見てみましょう！
[![Screen Shot 2019-12-23 at 23.59.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/41ea2c05-6bff-deee-4b97-225543bcd390.png)](https://reactjs.org/)
[![Screen Shot 2019-12-23 at 23.59.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/43230d18-2fc1-196e-67f2-8f6ce5fd2e25.png)
](https://vuejs.org/index.html)

Reactは、JavaScriptライブラリー。
Vue.jsは、JavaScriptフレームワーク。

 ... :frowning: :neutral_face: :no_mouth:

- ライブラリとフレームワークって何が違うんだろう？
- ReactもVue.jsも似てるけど、なんでReactはライブラリーでVue.jsはフレームワークなんだろう？

そんな疑問が頭の中をぐるぐると巡らせました:thinking:


# ライブラリーとフレームワークの違い
現時点での私の理解をまとめてみます。
(ご意見などあればコメントいただけると嬉しいです！)

### フレームワーク :gear:
アプリケーションを動かすために必要な処理・機能が一通り実装されている。
その他に必要な処理などがあれば自分で実装して、フレームワークに組み込んで利用することができる。
開発者が一からフルスクラッチで作るのは大変だけど、フレームワークを利用することで、楽するとこは楽してコアな部分にフォーカスすることができる、というイメージ。

**JavaScriptフレームワークの例**
Vue.js、AngularJS、Bootstrap

### ライブラリ :books:
いろいろな便利な機能が準備されていて、必要に応じて必要な機能のみをピックアップして利用する。
主体はライブラリではなく、主体のプログラムから呼ばれて使われる。

**JavaScriptライブラリの例**
React、jQuery、Node.js、D3


### 例えて言うと...
料理を作る時を想像してみましょう:cooking:

必要な基本的な具材が最初から揃っているような、「[パルシステムのお料理セット](https://www.pal-system.co.jp/setservice/)」のようなものが**フレームワーク**。

煮干しや昆布から出汁を取る手間を省いてくれる「だしの素」とか、料理を楽にしてくれる「簡単に調理できる鍋」とか、ヘルシオみたいな「ハイテク家電」が**ライブラリー**。


...うまく想像できましたか？？:sweat_smile:


### 参考にさせていただいたサイト :clap_tone2:
- [ソフトウェアフレームワーク(Wikipedia)](https://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF)
- [ライブラリ(Wikipedia)](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA)
- [フレームワークとライブラリの違い(Qiita @azuki8)](https://qiita.com/azuki8/items/ad7710fdefaedc63e3f7)
- [「ライブラリ」と「フレームワーク」は何が違うのか(Qiita @baby-degu)](https://qiita.com/baby-degu/items/7dc4548bf7befc2671f4)


# Reactはライブラリーで、Vue.jsはフレームワーク？
ライブラリーとフレームワークの違いがわかったところで、
次はReactとVue.jsについて考えてみます。

感覚的にjQueryがライブラリーって言うのはわかるけど、
Reactってフレームワークじゃないの？という疑問を抱きました。
だって、ライブラリーと言うにはあまりにも機能が充実し過ぎているし、React単体でも十分いろいろ作れるし:thinking:

同じ疑問を持つ人は私だけでなく世界中にいるようです :earth_asia:
Googleで`Is React library or a framework?` と検索してみると
似たような質問をしている人がたくさんいます。

- [Is React a library or a framework and why?@Quora](https://www.quora.com/Is-React-a-library-or-a-framework-and-why)
- [Is React library or a framework?](https://develoger.com/is-reactjs-library-or-a-framework-a14786f681a0)


私が通うCode Chrysalisでも同様の疑問を持つ人はいましたが、
みんなと話したり、調べたりした結果の私の理解を下記に記載します。


### Reactはライブラリー :rolling_eyes::rolling_eyes::rolling_eyes:

ReactはFacebookが提供しているが、多くの有名なReactライブラリーは
3rd partyライブラリーとして提供されている。

例えば、

- 状態管理：`redux` （Dan Abramov氏, Andrew Clark氏）
- デザイン：`MaterialUI` （Google）
- テスト：`Enzyme` （Airbnb）

アプリケーション全体をオーガナイズするものを一般的に"フレームワーク"と呼ぶが、
上記で説明したように、Reactはアプリケーションに必要な機能がReact本体(Facebook)以外からたくさん提供されており、もはやReact単体では利用するのは難しい。

だからReactはフレームワークではなくライブラリーだ！
という主張でしょうか。 


### Vue.jsはフレームワーク :slight_smile:

一方で、Vue.jsは ReactのようにVue.js単体で使うには物足りないかもしれないが、
Vue.jsが公式ライブラリーとしてたくさんの機能を提供している。

例えば・・・


- 状態管理：`vuex`
- デザイン：`vueify`
- ルータ機能：`Vue Router`
- ブラウザ拡張機能(Chrome/Firefox)：`vue-devtools`
- ESLintプラグイン：`eslint-plugin-vue`

※他にもいろいろあるので、興味がある方はこちらをご覧ください。
https://github.com/vuejs

Reactと比べて、Vue.jsは公式ライブラリーだけでアプリケーションを動かす最低限の機能が整っていそうです。
Vue.js単体でということではなく、公式Vueチーム全体として、Vue.jsはフレームワークだ！という主張なのかな？？ 


# まとめ

個人的にはまだReactはライブラリーと言うのに100%納得している訳ではないですが、
いろんな人の意見を聞いたり自分で考えたりして思ったことは、
**ちゃんと理解してしっかり自分の意見を持つことが大事。**ということ。

別にReactがフレームワークだ！っていう意見でも、
Vue.jsがライブラリーだ！って意見でもいいと思うんですよね。

ただ、なんで？って聞かれた時に
しっかり自分の意見が言えるかどうかが重要なんじゃないかなって思います。
(その意見がチンプンカンプンだったらアレですけど... ^^;)


みなさんのご意見やコメントもいただけると嬉しいです :slight_smile::sparkles: