フロントエンドフレームワークも通常のプログラミングと同じように、第二,第三の言語の習得にそこまで時間はかからない。
選択に時間を使うくらいなら、何か一つ直感で選んで遊んでみるべきである。

私は、それを知らずにそれなりの時間をフレームワークの特徴探しに費やしてしまったので、過去の自分自身に送るつもりでこの記事を書いてみる。そして、過去の私と同じ境遇の人が少しでも参考にしてくれたらいいと思う。

これらは完全に主観であるため、何か納得できない点があれば、コメント欄に残しておいてほしい。

Why choose React over Angular and Vue.js

上で述べたように、フロントエンドフレームワークの学習という観点では何から始めても大きな問題はない。ここでは、その'何か'でReactが選ばれる理由を述べる。

Reactは小さく、シンプル。

Reactは、ちょっとしたReactとの対話方法を覚えれば、殆どが素のJavaScriptである。JSXを除けば。
だから、Reactの学習に対してそこまで臆病になる必要はない。あなたが臆病になっているのはJSXの方だから。

ReactはDOM操作以外の、例えばAjax通信だとか、そういうことに一切関知しない。自身はDOM操作をする機械だと思っているし、実際そのように行動する。通信やらデザインはお門違いだから、他にやらせておけばいい。

だから、Reactを覚えるために通信やらデザインやらの知識は必要ないし、必要になったときに必要になったツールを覚えたり作ったりすればいい。Reactはそれらを受け入れる準備をしてくれている。

この点は、Vue.jsも非常に似ている。

対して、Angularは巨大なAPI群を持っている。プログラマが考える機能はAngularが手伝ってくれる。何かをするのに、ほかから何かを持ってくる必要はないし、Angularを理解していれば他にはなにも必要ない。Angularができることなら。

JSXを過度に警戒しなくても良い。

JSXがTypeScriptのようなJavaScript亜種、または全く別の言語だと思っているのであれば、それは間違いである。JSXは多くの場合、Reactを選ばない理由として挙げられるが、それは開発者の嗜好であり、JSX自体が醜い生き物というわけではない。
確かに、JavaScriptとは似ても似つかぬ書き方をするが、少しでもその世界に足を踏み入れると、HTMLとJavaScriptをうまく融合した、理にかなった書き方であることを知ることができると思う。

render() {
    return(
        <div className='main'>
            Hello, This is main app!
            <SubApp {...this.props} />
        </div>
    )
}

はっきり言って、これには慣れが必要だ。特に、引数の渡し方や親との通信の仕方にはJSX特有のルールがある。

しかし、それに慣れてしまえば、JSXはHTMLやCSSをReact内にうまく取り込んでくれることに気がつくことができるだろう。
下の例を見てほしい。こんなにシンプルなHTMLでも、実は超巨大なWebアプリケーションだ。つまり、ページの内容であるHTMLやデザインのためのCSSはReactの管轄内にのみ存在すればよく、JavaScriptと同じように煮るなり焼くなりできようになるということだ。

index.html

<html>
<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <title>The Ultra Big Project</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel" src="js/script.js"></script>
</body>
</html>

もちろん、コンポーネント指向のフレームワークでは全てにおいて似たような書き方ができる。しかし、HTMLに予め触れたことがあるのであれば、JSXを使ったDOMの描写についてイメージしやすいだろう。

React-Nativeという武器。

ReactにはReact-Nativeという大きな武器を持っている。React-Nativeをかんたんに説明すると、スマートフォン向けのアプリケーションをReactで書くことができるソリューションだ。それも、WebViewのような張子の虎ではなく、UIパーツや処理も含めすべてが実際にスマートフォン上でNativeに実行される。

React-Nativeはまだ熟した技術ではないが、それでも個人制作やかんたんなツールで採用することができるレベルになって来ている。Reactに限った話ではないが、Webの技術は本当の意味でフロントエンドを呑み込もうとしている。この波に乗るか乗らぬかは自分次第だが。

それはさておき、React-NativeはReactを学ぶ十分な理由になりうるのである。

情報量が多く実用に耐えうる。

Reactが世の中に出てからもう6年が経とうとしている。その間、ES5,6の違いはあれど、React自身に大きな方向転換はなく成長してきた。
そのおかげか、企業のWebサービスなどでReactが使われているのをよく見かけるようになっている。この記事を投稿しているQiitaもそのうちの一つだ。
学習だけではなく、実務のための技術を習得したいのであれば、Reactはいい選択肢かもしれない。

おわりに

ここまで、Reactの利点を上げてきた。Reactには、それを選択するための理由が多数あることをわかっていただけただろうか。

では、Reactを学べばその他のフロントエンドフレームワークは必要なくなるのかといえばそれは違う。適材適所という言葉があり、Reactが苦手な所ではその他のそれを選択してみるのもいいだろう。最初に書いたように、第二の習得はそれほど困難ではないということを頭に入れておいてほしい。

おつかれさまでした。

結局Reactは他(Vue.js, Angular)と比べて何がよかったのか。触ってみてわかった初めてのフロントエンドフレームワーク。