ReactかBabelかで、迷っています。

Question

ReactかBabelかで、迷っています。
Reactはウェブ、ハイブリッド、ネイティブアプリつまりサーバサイド以外全て出来ると聞いています。
Babelでハイブリッドアプリ、ネイティブアプリ制作は出来るのでしょうか。
個人でうける程度ならReactまでやる必要ないでしょうか？

下記のようの予想しています。
速度は恐らくはBabel
絶対に無駄にならないのもBabel
難易度は？
将来性?
沢山ある過去のプラグインを使いたいならBabel
アプリやりたければReact

Answer 1

使われるところが全く異なる物についてどちらを使うべきかと言う質問は意味がありません。RecatとBabelは排他な関係ではありません。選択肢としては、

1. Recatを使わない。Babelを使わない。
2. Recatを使う。Babelを使わない。
3. Reactを使わない。Babelを使う。
4. Reactを使う。Babelを使う。

の4種類があり得ます。「ReactかBabelか」という問いは2.と3.しか求めておらず、1.と4.の可能性を無視しているため、無意味な問いになっています。CSSで例えるなら「BootstrapかSassか」と聞いているような物です。「BootstrapかSassか」と聞くことがおかしいことがわかりますよね？

Reactとは何か、Babelとは何かということが本質的に理解できていないと思われます。それぞれについて、何であるのかを学び直すことをお勧めします。それでもよくわからなければ、わからない点を個別に質問することをお勧めします。

Answer 2

誤解があるようです。
アプリを作りたいというのが目的であれば、そもそもまったく性質の異なるものなので、Babelをそこに挙げてくるのはおかしいです。

ReactはいわゆるMVCモデルのV、Webサイト、Webアプリケーションのview部分を担当するライブラリです。
イメージとしては、JavaScriptを使って動的にHTMLを生成して画面を作るもの。

ReactNativeを使うとスマホ向けのアプリを作ったりすることもできますし、サーバサイドという意味ではReactJS.NETというのがあるので、できなくもないです。

BabelはJavaScriptのコンパイラです。
JavaScriptの新しい記法（ECMAScript2015とかES6と呼ばれるもの）で書いて、それを現状ブラウザが対応できている書き方に変換してくれるツールです。
今後ブラウザがES6に完全に対応すれば必要なくなるものですね。
ですから「絶対に無駄にならない」は嘘でしょう。
ES6を早々に取り入れられて、かつ将来Babelを通さずにそのままソースを使えるのが利点でしょうか。

Reactと同じようなもので比較するならRiotやVueなどがありますが、アプリを作れるかどうかでいえば当然Reactを選択することになります。
ハイブリッドアプリを作るのであればほかにCordovaとかもあるのでそちらと比較したほうが良いでしょう。

Comments

[退会済みユーザー]

BabelがJSのpostcssということは知っています。
ただJSそのものでハイブリットアプリ制作ができるのかは知りません。
できないということでしょうか？

＞＞＞
ReactNativeを使うとスマホ向けのアプリを作ったりすることもできますし、サーバサイドという意味ではReactJS.NETというのがあるので、できなくもないです。

reactはmeteroと違ってサーバサイドはできないと聞いていたのですが、フルスタックなのですか？
ReactJS.NETで問い合わせフォームやショッピングカートなどを作ることも可能ということでしょうか？

ただWEBサイト制作などでは、結局レンサバがPHPしか対応していないところしかなく、
サーバサイドのJSは自分で構築しない限り日本では使えないと聞いたのですが、
こちらも同じでしょうか？

＞＞＞
ES6を早々に取り入れられて、かつ将来Babelを通さずにそのままソースを使えるのが利点でしょうか。

よって無駄になることはないと思った次第です。

[NatsumiOki]

＞BabelがJSのpostcssということは知っています。

たぶんAltJSのことを言いたいんだと思いますが、PostCSSはツールの名称なのでこれもまた意味が異なります。
（CoffeeScriptやTypeScriptのようなJSの代替言語を総称してAltJSといいます。）

ハイブリッドアプリを制作するときにJSを使いますが、JSのみでアプリを構築できるわけではありません。
先に挙げたようなCordova（PhoneGap）というフレームワークを利用したり、自前で用意するのが大変であればMonacaというサービスを利用する手もあります（中身はCordovaですが、そのへんを意識しないでHTML5/JSのみ書ければ作れます）
あくまでもJavaScriptで記述することができるというだけです。

＞reactはmeteroと違ってサーバサイドはできないと聞いていたのですが、フルスタックなのですか？

「React」はサーバサイドはできません。
回答にあるように、View部分のみ担当するライブラリです。

＞ReactJS.NETで問い合わせフォームやショッピングカートなどを作ることも可能ということでしょうか？

可能です。ただし名前のとおり.NETに取り入れるので.NETの理解がなければ使えないと思った方がよいでしょう。

＞ただWEBサイト制作などでは、結局レンサバがPHPしか対応していないところしかなく、

サーバそのものに制約があるのであればPHPしか選びようがありません。
Node.jsだとかサーバサイドでJSを使うことが目的であれば、それ用のサーバを調達しましょう。

＞よって無駄になることはないと思った次第です。

あーたしかにそういう意味でならそうですね。
私の思ってたのは、無駄にならないのはES6の記法で書かれたソースであって、Babelは不要になるので無駄という解釈でした。

[退会済みユーザー]

＞＞＞
「React」はサーバサイドはできません。
回答にあるように、View部分のみ担当するライブラリです。

下記のようにおっしゃっていたので、問い合わせフォームやショッピングカートのサーバサイドもできるのかと思いました。
ｍｅｔｅｒｏとは違うのですね。

そもそもハイブリットアプリ制作の需要は海外は大変盛んのようですが、
日本ではまだ数年はWEB、ネイティブと比べれば、仕事は圧倒的に少ないでしょうか？
特に小規模で行う場合です。
将来はネイティブを超すといわれていますが、数年後にはそうなると思いますか？
そうなればWEBの仕事は激減するかもしれないですね。
ReactNativeを使うとスマホ向けのアプリを作ったりすることもできますし、サーバサイドという意味ではReactJS.NETというのがあるので、できなくもないです。

＞＞＞
サーバそのものに制約があるのであればPHPしか選びようがありません。
Node.jsだとかサーバサイドでJSを使うことが目的であれば、それ用のサーバを調達しましょう。

やはり国内のレンサバにはnodeが簡単に使えるところはないのですね。
PHPは山ほどありますが、PHP工房などの既存のプラグインを使った小規模サイト政策くらいなら、
PHPしか選択肢はないですね。

＞＞＞
可能です。ただし名前のとおり.NETに取り入れるので.NETの理解がなければ使えないと思った方がよいでしょう。

.NET Framework（マイクロソフト ドットネット フレームワーク｝のことでしょうか？

JS、HTMLでもハイブリット制作はできるが
reactの方がより適している。
ネイティブはreactのみ。
ただWEBでMITのプラグインを使ったり、APIを利用する場合は、JSが基礎しかわからない状態でreactのみを行うと理解ができないという感じですかね。

JS自体がある程度わかっていればreactを始めるのは容易だが逆は難しいという感じですかね。
JS自体が標準語なら、reactはそこから派生した方言のようなイメージでしょうか？
王道はJSからreactですかね。
汎用性はJS＜react。
小規模サイト制作ならJS＞react。
チームでやるならreactができる人が少ないのでJS＞react。

[NatsumiOki]

ReactというのはJSを書きやすくする代替言語とは異なります。
JSを使って動的に画面を作るものだと思ってください。
HTMLだけで書こうとすると同じようなページを何枚も作らないといけないところを、Reactを使うことで共通の部品を1つだけ作り、そこに別のデータを入れて複数生成したり、ユーザーが値を入力したらそれに合わせてその場でデータを書き換えたりということができるものです。

Webアプリケーションを作るためのフレームワークで、.NET Framework向けに作られたASP.NETというものがあります。
問い合わせフォームやショッピングカートも作れます。
ASP.NETだけでも手軽にフォームを実装したりすることができますが、これに「ReactJS.NET」というライブラリを導入することで、「Reactの書き方でサーバサイドを実装できる」ようになります。

まとめると、

○「React」本体ではサーバサイドは実装できません。
○「ReactJS.NET」でサーバサイドの実装はできますが、ネイティブアプリ本体を制作することはできません。
○「ReactNative」はもちろんアプリ制作が可能です。

＞JS、HTMLでもハイブリット制作はできるが
＞reactの方がより適している。

たしかMonacaはReactに対応していたので、純粋なJSでもjQueryでもReactでもハイブリッドアプリは制作できます。
適しているかどうかはアプリの規模や運用面（複数人チームなのかとか）次第ですかね。

ちなみに何度か誤記されているので念のため指摘しておくと、MeteroじゃなくてMeteor（メテオ）です。
これもMonacaのサービスと同じで、中身はCordovaです。
Cordovaというベースがあって、そこでJSを直接書くか、Reactで書くかという違いです。

①Reactをどうしても使いたい
→ReactNative
→MonacaにReactを導入

②フルスタックでサーバサイドもやりたい
→Meteor

③サーバサイドもReactで書きたい
→自前でサーバを用意してReactJS.NETを導入

という選択になるかと思います。

JSが理解できているのならReactを使うのはさほど難しくないと思います。
Reactでよく使われるJSXと呼ばれる書き方があるのですが、それを利用する場合はJSよりむしろHTMLの構造に詳しい方が有利かなと思います。

汎用性は圧倒的にJSです。
生のJSが完璧に書けるなら本来ほかのAltJSやライブラリは必要ありません。
チーム全員が生のJSを理解しきっていて管理が容易なのであればReactにしなければならないということはありませんね。

ただ、楽に書けたりするので利用されることが多いですし、生のJSを必死に書いているプロジェクトはそんなに多くないと思います。
今後いろいろな案件に関わることを想定したら、Reactのようなライブラリやほかのフレームワーク（Angularとか）を扱った経験があったほうが良いと思います。

[退会済みユーザー]

ありがとうございます。

＞＞＞
○「React」本体ではサーバサイドは実装できません。
○「ReactJS.NET」でサーバサイドの実装はできますが、ネイティブアプリ本体を制作することはできません。
○「ReactNative」はもちろんアプリ制作が可能です。

「React」本体だけではフロントしかできないが、同じような知識をベースに少しプラスアルファすれば、
ReactJS.NEでPHP、Nodeのようなサーバサイドのプログラミングもでき、nativeでネイティブアプリ政策もできるのですね。

reactはほぼmeteorのようにフルスタックといっても過言ではないようですね。
その点バニラJSはフロントとモナカを使ったハイブリットアプリ制作しかできないということですね。

＞＞＞
②フルスタックでサーバサイドもやりたい
→Meteor

はじめはこれを考えました。ただ、meteorは重く、小規模サイト制作ではレンサバを使うことになるので、
PHPしか選択肢はないと聞きあきらめました。
ReactJS.NETも同じですよね。

＞＞＞
JSが理解できているのならReactを使うのはさほど難しくないと思います。
Reactでよく使われるJSXと呼ばれる書き方があるのですが、それを利用する場合はJSよりむしろHTMLの構造に詳しい方が有利かなと思います。

JSはまだ基礎しかやっていません。
ただJSが使えるようになれば、いざアプリ制作を将来始めたいと思ったときにreactをやるのは容易ということですね。

HTML、CSSはそれなりに使えるのですが、その場合はバニラJSやbabelを使ったJSよりもreactをいきなりやってしまったほうが、
むしろ学習コストがかなり低いのでしょうか？
それは意外でした。
jQueryは確かに、便利なメソッドがあって、JSそのものよりかなり簡単で、記述量も少なくて学習コストが圧倒的に低いのを感じます。
reactもそうなのでしょうか？

babelをつかっても、まだJSはたくさん記述しないといけなく、大変で難しいのですね。
JSそのものですとそう聞かなくもないですが、babelを使ってフューチャーシンタックスでも、いまだにそうなのでしょうか？