質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2725閲覧

reactとangularjsの違いについて

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/05/11 09:29

編集2016/05/11 23:49

reactとangularjsについて、reactの方がトレンドで支持されている理由が解りません。
例えば、入力されたものを即時表示する場合、下記のようにangularは非常に短いコードで実現できます。
実務現場の理解が乏しい故の曲解があるかもしれないのですが、例えば下記reactコードもangularのようにシンプルに記述する方法が用意されているのでしょうか。
また、将来的にはreactがweb制作の現場では普及していくのでしょうか。

angular

<html ng-app> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <p><input type="text" ng-model="name"></p> <p>{{name}}</p> </html>

react

<html> <head> <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <div id="app"></div> <script type="text/jsx"> // 親:<Parent />の定義 var Parent = React.createClass({ // State(※状態は親が管理) // この値はブラウザを閉じたり、リロードするまでは保持される getInitialState: function () { return { textVal: "", children: [] }; }, // State(textVal)を変更 setStateTextVal: function(textVal) { this.setState({ textVal: textVal }); }, // State(children)を変更 setStateChildren: function(textVal) { var textVals = this.state.children.concat(textVal); this.setState({ children: textVals }); }, // <Parent />の表示 // ここで子となる<ChildInput />と<Child />を記述 render: function() { return ( <div> <p>入力してEnterキーを押す</p> <ChildInput onChange={this.setStateTextVal} onSave={this.setStateChildren} /> <Child textVal={this.state.textVal} children={this.state.children} /> </div> ); } }); // 子1:<ChildInput />の定義(※props経由で親を参照できる) var ChildInput = React.createClass({ _onChange: function (e) { this.props.onChange(e.target.value); }, _onKeyDown: function (e) { if (e.keyCode === 13) { // Enterキー this.props.onSave(e.target.value); e.target.value = ""; } }, // <ChildInput />の表示 render: function() { return <input type="text" onChange={this._onChange} onKeyDown={this._onKeyDown} />; } }); // 子2:<Child />の定義(※props経由で親を参照できる) var Child = React.createClass({ // <Child />の表示 render: function() { var key = 0; var textVals = this.props.children.map(function (textVal) { // 時間が同じ。つまり、キーが押されるごとに、まとめて再描画されていることに注目 //(サーバーサイドっぽいと言われる所以) var date = new Date().toString(); return <li key={key++}>{key}.{textVal}({date})</li>; }); return ( <div> <p>{this.props.textVal}</p> <ul>{textVals}</ul> </div> ); } }); // id='app' に <Parent />を表示する(マウント) var m = React.render(<Parent />, document.getElementById('app')); </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

私もReactを最近使い始めたばかりで、分かっていない部分や誤解している箇所があるかもしれませんが、私感について並べてみます。

  • AngularとReactでは、たしかに最近はReactが話題になることが多いですが、だからといって必ずしも

React > Angular だとは思っていません。ケース・バイ・ケースで利用すればよいかと思います。
そもそもReactはView周りをサポートするフレームワークですので、MVC全てをサポートしているAngularと単純比較することは難しいかと思います。Angularを採用した上でView部分にReactを採用することも出来ます。(React + Flux(Redux) VS Angularで、全体で語られることも多いですが)

  • 提示されているような簡単なケースではAngularの方が記述量が少なくなりますが、複雑なWebアプリになってくると、AngularよりもReact+Fluxの方がわかりやすいコードが書きやすい気がします(あくまで私感です。Angularでわかりやすいコードが書けないと言っているわけではありません

そもそも、Angularのウリの一つが双方向バインディングにある(提示されたケースですね)と思っているのですが、React + Fluxでは、双方向バインディングをあえて行わずにデータの流れを1方向のみにしたことで、UIがどのように更新され何処が変更されたのかを容易に把握する事が出来るのがメリットだと思っています。

  • 将来的にどちらが流行るかですが、Reactを採用するケースは確かに今後増加するとは思いますが、まだ完全にどちらかが残ってどちらかが消えるということはないと思っています。

Reactの最大のウリはコンポーネント指向にあると思っているのですが、Angularも2系からはカスタムディレクティブによるコンポーネント指向ベースになるとのことなので、いい勝負になるのではないかと。

長文乱文失礼しました。

投稿2016/05/12 02:21

k.tada

総合スコア1679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問