React、AngularJS、Electronとは？

Question

###前提・実現したいこと
javascript,jQueryを勉強していますが、node.js, React, AngularJS, Electronなどというものがあると聞きました。
javascriptとnode.js, React, AngularJS, Electronなどは関係があるようですが、具体的にどのようなものか公式サイトや入門用のサイトを閲覧しても理解できませんでした。そして、javascriptではなくてこれらを使う理由について詳しく知りたいです。また、node.jsとReact, AngularJS、Electronの違いとはなんなのでしょうか？

どなたかご存知の方、よろしければ回答おねがいいたします。

Answer 1

そもそも前提として、javascript, jQuery、node.js, React, AngularJS, Electronはそれぞれ別ものなので、同じレイヤーで考えるべきではない。

#プログラミング言語: Javascript
ECMAScript、いわゆるJavascriptはプログラミング言語の一種である。
同期処理の煩雑さ、クラスやオブジェクトの定義の曖昧さ、型管理の難しさなどの"欠陥"から、Javascriptを代替する新たなプログラミング言語AltJSをいろんな方が開発されている。
AltJSの多くはJSと互換性があり、JSにコンパイルできます。

例)

• TypeScript (Microsoft)
• CoffeeScript (Jeremy Ashkenas, et al.)
• Dart (Google)

(などなど...)

#実行環境: Node.js

Node.jsはJavascriptを実行する環境です。
Javascriptは通常ブラウザで開いた時にWebサーバーからロードされ、実行されますが、
サーバー上でも実行可能にするために、Googleが開発したV8 Javascriptエンジンを元にNode.jsが製作された。

参考： Node.js - Wikipedia

#ライブラリ: jQuery など

jQueryはJavascriptのライブラリである。

ライブラリとは、
汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものである。ライブラリと呼ぶ時は、それ単体ではプログラムとして作動させることはできない実行ファイルではない場合がある。

(Wikipedia より)

つまり素のJSで書くよりも少なく、可読性の高いソースコードでアプリケーションを作成できる便利なツールである。
ちなみにJSは人口が多いことから、ライブラリの数は全ての言語の中でもトップレベルの多さです、
DOM操作に強いものや、文字列計算、数学、3Dモデリングなど、各分野で様々なライブラリが公開されています。

#フレームワーク: React、AngularJS など

ReactやAngularJSはJavascriptでアプリケーションを実装するためのフレームワークである。

JSにおけるフレームワークとは、アプリケーションを実装するための標準構造に使うクラスやライブラリの集まりである。ほとんどのフレームワークでは、それぞれどれかのデザインパターン（アプリケーション構造のルール）に従って構築されている。そのため、個々のフレームワークのルールに準じた書き方をしなければなりません。

つまり、フレームワークを使えば、ハイレベルなアプリケーションを簡単に実装することができるが、ある程度デザインパターンを学習した上で、それぞれのフレームワークの仕様に従ってプログラミングしなければならない。

ちなみに、フレームワークそのものにはすでに色々なクラスやライブラリを含めているため、別のライブラリを利用する場合はそれとの相性を考えなければならない。

#マルチプラットフォームアプリケーションエンジン: Electron など
ElectronはJavascriptやHTMLを利用したマルチプラットフォームアプリケーションエンジンである。
マルチプラットフォームアプリケーションエンジンは少々長いですが、その名の通り、様々なデバイスで動作するアプリケーションを製作するためのツールです。
Webを作る感覚で、PCのソフトウェアを作ることができます。ちなみに、同じようなエンジンで、iOSやAndroid向けのアプリケーションが製作できるApache Cordovaもあります。

Answer 2

JavaScript周りの歴史のお勉強が必要ですね。
Qiitaあたりを漁ればいくらでも記事が出てきますよ。

• Javascriptの歴史 - Qiita
• フロントエンド+JavaScriptの歴史(2) ライブラリ・フレームワーク編 - Qiita

---

いきなり歴史読めだと辛いと思うので、
質問者さんが知りたそうな所に絞って違いや経緯をざっくり書き出しました。

JavaScript

Webページに動作を持たせる為に作られた言語、
C言語に似た構文だが、イベント駆動で動作する独特の仕組みで闇が深い。
2006年にGoogleMapと共にAjaxという使い方が爆発的に流行り、各ブラウザのJSエンジン改良により流行していく。

jQuery

AjaxやDOM操作は実装が困難でコードがぐしゃぐしゃになる為、数多のエンジニアを失意のどん底に落としてきた。
そんなエンジニア達の救世主で、簡単なコードでAjaxからDOM操作までなんでもござれ、
こうしてデザイナーさんまでがJavaScriptを利用した動的なサイトが簡単に作れるようになった。

Node.js

なんとJavaScriptは単体では外部ライブラリを読み込んだりファイルの読み書きやHTTP通信を行う事は不可能。
Scriptタグでグローバルの変数を書き換えてるんですって…あらまあ原始的ね！

なのでC++でそれらを実装して、Googleがオープンソースとして公開しているV８エンジンを乗せて
Windows、MacOS、Linuxのローカル環境で直接JavaScriptが動作する仕組みを用意したのがNode.js

Electron

GitHub社がひらめいてしまった。
Node.jsとWebKit使えばHTML,CSS,JavaScriptでアプリケーション作れるんじゃね？

この試みでAtomというモダンエディタが作られた。
この仕組みをフレームワーク化したものをはAtomShellという名前で配布していたが、Electronに改名した。

AngularJS、React

JavaScriptによる動的なページの表現はjQueryの登場で一度は落ち着いたけど、エンジニア達は満足出来なくなってきた。
jQueryは更新箇所とDOMの書き換えが一緒になるので大きなプロジェクトになってくると、
あっちも書き換えこっちも書き換えでコードはぐしゃぐしゃでコピペコードだらけ、変更するとあっちが漏れるしこっちが漏れるしで非常に辛い。

「なんで俺らが逐一DOMを更新しなきゃいけないんだ。DOM構造は俺らの実装に従って勝手に変わって欲しい。」
「オブザーバーパターン」と呼ばれる手法を利用して、DOMは特定の変数を監視し続けて、参照先の変数の値が変わったら勝手に中のDOMが更新される仕組みを作った。

実現する手段は色々あって、フレームワークは乱立したけどゴールは皆一緒。
よく知られてるフレームワークはAngularJSやReact、Polymer、Vue.js…といった感じ。
HTMLライクなテンプレートを読み込ませると、特定の変数を監視する仮想的なDOMを作り出して、オブザーバーパターンを構築してくれる事が特徴。

大規模開発するならJSフレームワークは必須。
jQueryは駄目、絶対。