React、AngularJS、Electronとは?
受付中
回答 2
投稿
- 評価
- クリップ 2
- VIEW 2,829

退会済みユーザー
前提・実現したいこと
javascript,jQueryを勉強していますが、node.js, React, AngularJS, Electronなどというものがあると聞きました。
javascriptとnode.js, React, AngularJS, Electronなどは関係があるようですが、具体的にどのようなものか公式サイトや入門用のサイトを閲覧しても理解できませんでした。そして、javascriptではなくてこれらを使う理由について詳しく知りたいです。また、node.jsとReact, AngularJS、Electronの違いとはなんなのでしょうか?
どなたかご存知の方、よろしければ回答おねがいいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+6
そもそも前提として、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
が製作された。
ライブラリ: jQuery など
jQuery
はJavascript
のライブラリである。
ライブラリとは、
汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものである。ライブラリと呼ぶ時は、それ単体ではプログラムとして作動させることはできない実行ファイルではない場合がある。(Wikipedia より)
つまり素のJSで書くよりも少なく、可読性の高いソースコードでアプリケーションを作成できる便利なツールである。
ちなみにJSは人口が多いことから、ライブラリの数は全ての言語の中でもトップレベルの多さです、
DOM操作に強いものや、文字列計算、数学、3Dモデリングなど、各分野で様々なライブラリが公開されています。
フレームワーク: React、AngularJS など
React
やAngularJS
はJavascript
でアプリケーションを実装するためのフレームワークである。
JSにおけるフレームワークとは、アプリケーションを実装するための標準構造に使うクラスやライブラリの集まりである。ほとんどのフレームワークでは、それぞれどれかのデザインパターン(アプリケーション構造のルール)に従って構築されている。そのため、個々のフレームワークのルールに準じた書き方をしなければなりません。
つまり、フレームワークを使えば、ハイレベルなアプリケーションを簡単に実装することができるが、ある程度デザインパターンを学習した上で、それぞれのフレームワークの仕様に従ってプログラミングしなければならない。
ちなみに、フレームワークそのものにはすでに色々なクラスやライブラリを含めているため、別のライブラリを利用する場合はそれとの相性を考えなければならない。
マルチプラットフォームアプリケーションエンジン: Electron など
Electron
はJavascript
やHTML
を利用したマルチプラットフォームアプリケーションエンジンである。
マルチプラットフォームアプリケーションエンジンは少々長いですが、その名の通り、様々なデバイスで動作するアプリケーションを製作するためのツールです。
Webを作る感覚で、PCのソフトウェアを作ることができます。ちなみに、同じようなエンジンで、iOSやAndroid向けのアプリケーションが製作できるApache Cordova
もあります。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
JavaScript周りの歴史のお勉強が必要ですね。
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は駄目、絶対。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
2017/01/19 19:32
こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。