JavaScriptフレームワークまとめ Node、React、Vue、Electron、jQuery

React.js（&Next.js）［フロントエンド］

React.jsとは、コンポーネント指向でシンプルに一方向バインディングを実現するフロントエンドのフレームワークです。
（開発元：Meta（Facebook）、開発者：Jordan Walke、ライセンス：MIT License）

React.js公式サイト
https://ja.reactjs.org/
公式ドキュメント
https://ja.reactjs.org/docs/getting-started.html
npm CDN（常に最新バージョン）
<script src="https://npmcdn.com/react/umd/react.production.min.js"></script>
<script src="https://npmcdn.com/react-dom/umd/react-dom.production.min.js"></script>
Babel（JSXを利用する場合）
<script src="https://npmcdn.com/@babel/standalone/babel.min.js"></script>
インストール方法：コンソールで「npm install react」
実行すると「node_modules」-「react」フォルダにファイルが保存されます。
アプリ作成ツールのインストール方法：コンソールで「npm install -g create-react-app」（-gオプション：グローバルインストール）
デベロッパーツールReact Developer Tools
https://chrome.google.com/webstore/

React.jsは、画面表示の更新に特化したシンプルなフレームワークです。
データのバインドが一方向のため、処理が分かりやすいのが特徴です。
コンポーネント指向とは、画面表示のUI部品を「コンポーネント」として管理する考え方です。
コンポーネントは、オブジェクト指向におけるクラスと似た概念で、UI部品とそれに関わる処理をひとまとめにしたものです。
また、React.jsは、仮想DOMを採用しており、DOMを直接操作するより表示が非常に速くなります。React.jsは、JSXによる記述と相性が良いため、Babelを利用する方向で考えているなら、Vue.jsではなくReact.jsを利用するのが妥当でしょう。
React.jsは画面表示の更新に特化しているため、その他の機能は用意されていません。
Next.jsというフレームワークを利用することで、ルーティングやAPIの作成などの機能を導入することができます。

Vue.js（&Nuxt.js）［フロントエンド］

Vue.jsとは、MVVMアーキテクチャーでシンプルに双方向バインディングを実現するフロントエンドのフレームワークです。
（開発元：Vue.js team、開発者：Evan You、ライセンス：MIT License）

Vue.js公式サイト
https://v3.ja.vuejs.org/
公式ドキュメント
https://v3.ja.vuejs.org/guide/introduction.html
npm CDN（常に最新バージョン）
<script src="https://npmcdn.com/vue/dist/vue.min.js"></script>
インストール方法：コンソールで「npm install vue」
実行すると「node_modules」-「vue」フォルダにファイルが保存されます。

Vue.jsは、画面表示とデータの両方の更新を重視したフレームワークです。
双方向のバインディングをシンプルな記述で実現できるのが特徴です。
MVVMアーキテクチャーとは、システムの処理をModel（データ管理）、View（画面表示）、ViewModel（データ-表示間のやり取り）に分けて管理する考え方です。
バックのデータが更新されたらフロントの表示も更新し、フロントの表示が更新されたらバックのデータも更新する、双方向のバインドを簡単に実現することができます。
Nuxt.jsというフレームワークを利用することで、データ更新処理以外の機能も導入することができます。

jQuery［フロントエンド］

jQueryとは、JavaScriptの処理をシンプルに記述するためのライブラリです。
（開発元：jQuery team、開発者：John Resig、ライセンス：MIT License）

jQuery公式サイト
https://jquery.com/
公式ドキュメント
https://api.jquery.com/
npm CDN（常に最新バージョン）
<script src="https://npmcdn.com/jquery/dist/jquery.min.js"></script>
インストール方法：コンソールで「npm install jquery」
実行すると「node_modules」-「jquery」フォルダにファイルが保存されます。

jQueryは、JavaScriptの処理で複雑になりがちなDOM操作やAjax通信をシンプルに記述できるライブラリです。
最近では、React.jsなどのフレームワークが出てきたことから、一からの開発ではjQueryを使用しないケースも出てきています。
Bootstrapも、Bootstrap5からはjQueryは不要になりました。
しかし、長らくjQueryがないとJavaScriptの開発ができないという時代があったため、jQueryで記述されたシステムは多くあります。
既存のシステム関係でjQueryの知識が必要となるケースはまだまだあるので、勉強して損はないでしょう。

Node.js（&Express）［バックエンド］

Node.jsとは、JavaScriptのランタイム環境であり、JavaScriptによるサーバー処理開発を実現するバックエンドのフレームワークです。
（開発元：Node.js Developers、開発者：Ryan Dahl、ライセンス：MIT License）

Node.js公式サイト
https://nodejs.org/ja/
公式ドキュメント
https://nodejs.org/ja/docs/
インストール方法：上記公式サイトよりダウンロード

Node.jsは、JavaScriptでサーバー処理を開発するためのフレームワークです。
Google Choromeで使用されているV8というJavaScriptのエンジンプログラムをベースとして開発されています。
Node.jsを利用すると、JavaScriptでWebサーバーシステムそのものを開発することができます。
Expressというアプリケーションフレームワークを利用することで、よりスムーズにアプリケーション開発をすることができます。
Expressの特徴は、Node.jsに近い記述の軽量のフレームワークでありながら、開発効率が向上することです。

Electron［デスクトップアプリ］

Electronとは、JavaScriptとHTML/CSSでデスクトップアプリを開発するためのフレームワークです。
（開発元：OpenJS Foundation、開発者：GitHub、ライセンス：MIT License）

Electron公式サイト
https://www.electronjs.org/ja/
公式ドキュメント
https://www.electronjs.org/ja/docs/latest
インストール方法：コンソールで「npm install -g electron」（-gオプション：グローバルインストール）

ちなみに、Web開発で人気のエディターVSCodeもElectronで開発されています。
（開発元/開発者：Microsoft、ライセンス：Visual Studio Code: マイクロソフト ソフトウェア ライセンス条項）

Visual Studio Code公式サイト
https://code.visualstudio.com/download/

Electron は、デスクトップアプリの処理をJavaScript、GUIをHTML/CSSで開発できるフレームワークです。
Electron は、Node.jsとChromiumの技術を使用しています。
Windows、macOS、Linux用がリリースされており、それぞれのOS固有の機能が用意されています。
しかし、固有の機能を使用しなければ、同じソースコードで全てのOSに対応するアプリを開発することができます。
また、JavaScriptやHTMLで開発しますが、ビルダーツールでネイティブアプリを作成できるため、処理速度が遅い、HTMLの中が見られるといった心配もありません。

TypeSript［JavaScriptの上位互換］

TypeScriptは、AltJS言語（Alunative JavaScript）と呼ばれる、JavaScriptにトランスコンパイルできる言語です。
（開発元/開発者：Microsoft、ライセンス：Apache License 2.0）

TypeScript公式サイト
https://www.typescriptlang.org/ja/
公式ドキュメント
https://www.typescriptlang.org/ja/docs/
プレイグラウンド（学習用ページ）
https://www.typescriptlang.org/ja/play/
インストール方法：コンソールで「npm install -g typescript」（-gオプション：グローバルインストール）

TypeScriptは、JavaScriptの文法をベースにしつつ、JavaScriptに欠けている要素を足した上位互換言語です。
JavaScriptは元々、簡易な処理を書くための言語だったため、文法規則に緩い部分があります。
例えば、動的型付けである、細かいスコープの設定ができない、クラスベースのオブジェクト指向でないなどです。
しかし、複雑な処理を書くにあたっては、本格言語のような厳格な文法規則が必要となります。
その問題を解決するために生まれたのがTypeScriptです。
文法が厳密なTypeScriptでコードを書き、それをコンパイルすることで、JavaScriptのコードに変換することができるのです。
既にJavaScriptを修得している人は、TypeScriptをすんなり修得することができます。
これからWebの勉強を始める初心者は、いきなりTypeScriptを勉強してもいいですし、手軽に動きを試せるJavaScriptを修得してからTypeScriptを勉強してもいいでしょう。
また、上記で紹介したフレームワークは、全てTypeScriptに対応しています。

まとめ

JavaScriptの代表的なフレームワークについて解説しました。
ベースとなるJavaScriptを修得し、フレームワークを勉強していけば、開発できるものがどんどん増えていくというのはワクワクしませんか？
今のところ、私の推しプログラミング言語は、JavaScript（TypeScript）です。
フレームワークにも流行があり、より良いものが出たら勉強し直す必要がありますが、新しい言語を一から勉強するよりかは学習コストが低く、効率が良いと感じています。
特に、これからWebやプログラミングの勉強を始める人には、JavaScriptがオススメです。