質問: ### 前提・実現したいこと javascript,jQueryを勉強していますが、node.js, React, AngularJS, Electronなどというものがあると聞きました。 javascriptとnode.js, React, AngularJS, Electronなどは関係があるようですが、具体的にどのようなものか公式サイトや入門用のサイトを閲覧しても理解できませんでした。そして、javascriptではなくてこれらを使う理由について詳しく知りたいです。また、node.jsとReact, AngularJS、Electronの違いとはなんなのでしょうか? どなたかご存知の方、よろしければ回答おねがいいたします。
回答: 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がオープンソースとして公開しているV8エンジンを乗せて 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は駄目、絶対。