JSのおすすめライブラリ・フレームワークについて紹介！

LiSMOtechの小谷です。
近年は様々JavaScriptのフレームワークやライブラリが出てきて、開発に使用されていますね。
中でも、僕が実際に使用したことがあるReact.js、Next.js、Vue.js、Nuxt.jsの4つについておすすめポイントもいれつつ比較していきたいと思います！
 
また、個人的な意見や見解もそこそこ含むので、ご了承ください。

そもそもライブラリ、フレームワークとは？

そもそもライブラリ、フレームワークとはなんでしょうか？
ざっくり言うと、どちらも他者が提供してくれるコードの集合体ということでよさそうですが、もう少し掘り下げてみます。

ライブラリ(Library)

日本語にすると「図書館」「書庫」と言った感じですね。これからなんとなく分かるように実際に使用する時は図書館から本を借りるイメージですかね。基本、無料なところも名前通りです。
 
中身は汎用性の高い関数やクラスなどのソースコードとなっており、再利用可能な形でひとまとまりにされているようです。
例としてよくあげられるのはjQueryで、これのCDNの中身を見てみるとイメージつくかもしれません。

以下CDNのURLです。
https://code.jquery.com/jquery-3.5.1.js
こちらをブラウザなどで開いてみると関数の集まりであることがよくわかりますね。
 
この点でいくと、React.jsやVue.jsもCDNとして呼びこんで、一部だけでライブラリとして使うことが出来るので、React.jsとVue.jsはライブラリと言っていいのかもしれませんね。

フレームワーク(Framework)

日本語にすると「枠組み」「骨組み」と言った感じですね。日本語のイメージからなんとなく分かるかもしれませんが、ライブラリと違いこちらは”一部”ではなく”全体”を司っている感じですね。
 
Webサービスやアプリを開発する上で、ルーティング、データの送受信など、全体的な処理の流れを担います。
 
例として、あげられるのはNext.jsやNuxt.jsなどです。React.jsやVue.jsもプロジェクト全体で採用して、ルーティングやデータのやり取りも頻繁にしているなら、フレームワークと言っていいかもしれないですね。

フレームワークとライブラリの違い

上記にも書いてきたようにフレームワークとライブラリの境界線は曖昧で、正直、区別しづらいので総じて「フレームワーク」と呼ぶことがあると思います。

ですが、強いて言うなら以下のような感じかなと思います。分かりやすく書かれている記事があったので、引用させてもらいます。

ライブラリとフレームワークの技術的な違いは、「制御の反転」と呼ばれる用語にあります。
ライブラリを使用する時、アプリケーションのフローはあなたが管理することになります。あなた自身がライブラリの機能を呼び出すタイミングと場所を指定します。対してフレームワークを使用する時、フローの管理はフレームワークが行います。そのフローの中で、あなたがコードで介入できる場所がいくつか用意され、フレームワークは必要に応じてそれらを呼び出します。

引用元

と書いており、ここではVue.jsもフレームワークとして話されていますね。

この制御の話を踏まえ、主導権の観点からみると違いが分かりやすく、主導権をもっている方がフレームワークで、持っていない方がライブラリとも書いていますね。

確かにフレームワークとしてReact.jsやVue.jsを使うと主導権や制御はフレームワーク側に取られた書き方をしているなと感じる時がありますね。ルーティングやデータのやり取りなど。

4つを比較(おすすめポイント、学習コスト、導入のしやすさ)

では、実際にReact.js、Next.js、Vue.js、Nuxt.jsについて見ていきましょう！

React.js

JSXと言われる書き方するのが特徴です。ここが学習コストをあげているポイントでもあるかもしれません。
すごくざっくり言うJavaScriptとHTMLを混ぜたような書き方です。なんとなくイメージ的にはPHPでHTMLを返してあげる時のような書き方の感じですね。
 
スタイルを書く時は自由度が高く、CSSモジュールを書きインポートする方法やライブラリを使った方法やスタイルそのまま要素に書いてあげる方法などなど様々です。
 
また、React.jsをマスターすることでReact Nativeというネイティブアプリを開発するフレームワークも使えるようになるかもしれません。React NativeがReact.jsを使い同じ考えでアプリを開発できるようですので。
 
フレームワークとして使用するなら構成はSPA(シングルページアプリケーション)のみです。
SPAについては以下の記事も参考にしてみて下さい。

Nuxt.jsのレンダリングの用語について

Next.js

こちらはReact.jsをベースとしたフレームワークで、React.jsを知っていることが前提で作られていますね。逆言うなら、React.jsを使ったことがある方なら飲み込みが速いかもしれません。React.jsをベースとしているので、メソッドやライフサイクルがそのまま使えますので。
 
React.jsと比較するとページ単位でアプリケーションやサービスを作成することが出来て、SSR(サーバーサイドレンダリング)が出来ることやプレレンダリングや画像の最適化など描画速度にも力を入れている印象です。
 
React.jsにない独自のメソッドのようなものもありますが、React.jsをある程度触ったことがある方であれば、やっていく内に分かってくると思います。

Vue.js

今回あげたようなフレームワークを使った経験がない方でも使いやすいと思います。と言うのも、React.jsのJSXとは異なり、Vue.jsではHTML、JavaScript、CSSを分けて書くことが出来るためです。
 
個人的にはReact.jsよりどこに何を書いているのか分かりやすいと思います。上記に書いたようにHTML・JavaScript・CSS部分が分かれて書くことができこともそうですが、JavaScriptの部分に関しても、どこに何を書いているか分かりやすく良いと思います。

例えば、プロパティ(機能)ごとに紐づく関数・定義が同じ箇所にまとまって書けることなどです。
watchやcomputedなどの便利機能は、他人の書いたものでもその中にある関数や定義ということで何をしようとしているかイメージしやすいと思います。ちょっと言いすぎかもしれませんが。笑
 
また、こちらもフレームワークとして使用するならSPAの実装のみですね。

Nuxt.js

Vue.jsをベースとしたフレームワークです。関係性がNext.js(=フレームワーク)とReact.js(=ベース)に似ていて、Nuxt.js(=フレームワーク)とVue.js(=ベース)みたいな感じですかね。
 
ページ単位にして、SSRが可能と言うところはNext.jsに似ていますね。ルーティングの実装や考えだけ見るとほぼNext.jsとほぼ同じかもです。あとは独自のコンフィグファイルがあるのもNext.jsと似ていますね。
 
Next.jsと違う点で言うとレンダリング方法は、Nuxt.jsではプロジェクト全体で決定している点などがあげられそうです。
 
また、オートインポートという機能があり、設定しておけば、コンポーネントをいちいちimport文を書いて呼び込むということが不要になります。

こちらもベースとなるフレームワーク(Vue.js)の使用経験がある方は、飲み込みが速いと思います。

まとめ

まとめとして、上記にあげた特徴などを踏まえて表を作成してみました！
参考に導入のしやすさやシェアも入れてみましたが、ちょっと主観も交じっていると思います。笑
ですが、日々、自分で触れている技術なのでそこまではずれていないはずです！