Next.jsについて(フレームワークとライブラリ、位置付けについて)
Next.jsとは
-
Next.jsとは、Reactをベースに開発された、フロントエンドフレームワーク。
※ReactはJavaScript言語を用いた、Webサイト上のUIを構築するためのライブラリ。
フレームワークとは、開発を効率化するための枠組みだ。 -
Next.jsは
「URLルーティング」と呼ばれるリクエストされたURLに対して呼び出すアクションを決定する仕組みや、Webアプリ開発の効率化機能が多く含まれているのが特長。
(こちらは内容が濃いので次回以降で。)
今回は基礎の基礎！！！！！
フレームワーク・ライブラリの違いが説明できる？！？！？！
そもそもフレームワーク・ライブラリとは？
違いが説明できるか？
フレームワーク(framework)
framework(フレームワーク):
直訳 = 「枠組み」「骨組み」「骨格」「構造」「構想」など
-
Webアプリケーションやシステムを開発するために必要な機能があらかじめ用意された枠組み
(特定の仕事ができるように既にプログラミングされているプログラムのこと) - JavaScriptの"フレームワーク"とは、
JavaScript開発におけるアプリケーションの枠組み、土台を意味している。
[ JSのフレームワーク ]
■ React ※
WebサイトのUIパーツを構築するために使われるフレームワーク.
(REACTについてと他のフレームワークとの比較について)
※公式ホームページでは、 libraryと記述があるためライブラリなのですが、
その範囲を超えて大きくなているので、フレームワークと言われることも多いです。
公式ページヘ
■ Vue.js
WebアプリケーションのUIを構築できるJavaScriptフレームワーク
■ Angular
Webアプリケーション開発に必要なほとんどの機能をサポート
この辺の違いや遷移については、以下のページに
"フロントエンドフレームワークの歴史"としてまとめているので是非ご覧ください！！！
ライブラリ
よく使う機能などをパッケージ化して使用する部品であり、
開発時、パッケージ化された部品(ライブラリ)を使って組み立てることで効率化ができます。
ex. 画像のスライドを作成するライブラリなど...
[ JSで言うと ]
-
jQuery
主にDOM要素をJavaScriptから簡単に操作するための機能を提供。
約83のライブラリがあり、たくさんあります！！！！
フレームワークとライブラリの違い
1. 全体の処理の流れが実装されているかだ。
- フレームワーク : 全体の処理の流れが実装されている
- ライブラリ : 機能の集まり(処理の流れが実装されていない)
2. コードレベルか設計レベルか
- ライブラリ:
コードを使いまわす、使わないのコードレベルの"部品"- フレームワーク:
**アプリケーション"設計"**であり、その設計に必要なプログラム制御はフレームワーク側で行う
Next.jsの位置付けは？？
Reactをベースに開発されたフロントエンドフレームワーク"Next.js"ですが、
ReactはJavaScriptのライブラリ(フレームワーク)...
最初は混乱しますが、上記のフレームワークとライブラリの違いを理解し,
ここまでくるとわかりますね！！！
React ＝ UIパーツを構築するために使われるライブラリ.
Next.js = Reactをベースに開発された、フロントエンドフレームワーク
でも、フレームワークとも言われるようになっているREACT...
境界線は曖昧な事もある。
それぞれの違いを解説したが、本当は違う意味なのに、実際これらの境界線は曖昧だったりもします...
フレームワークにライブラリが含まれたり、ライブラリがフレームワークのようなメソッドを実装していたり...
結局、REACTとNext.jsの違いは？？
1番の大きい違いは...サーバー機能の有無
- Next.js: サーバー機能を持っている
=>単体でWebアプリを動作させることができる- React: サーバー機能がない
=>別途サーバーを用意する必要がある。
今日はここまで。
Discussion