逃げるプログラマー、避けられない壁

Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。
自分もそういうダメグラマーの一人でした。
だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。
React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。

しょせんはHTMLとCSSとJavascript

で、結局Reactは何をやっているかというと、しょせんはHTML、CSS、JSなのである。
モバイルアプリ開発に使うFlutterなどはDartで書かれてるし、Kotlin、SwiftなどOSが読める言語で書くが、ウェブアプリって基本はブラウザで読むので、ブラウザに通じる従来のウェブ言語で開発できる。
ReactのコードはJSXって呼ばれてますが、CSSとHTMLをJavascriptのファンクションで包んだもの。
JSXのコードは、ブラウザ等でレンダリングされると、ただの従来のHTMLコードになる。
つまり、やっているのはフロントエンド側のUIを作るという仕事。 どういう風なレイアウト、アウトプットをするかを担当していて、勿論それは従来のHTML、CSS、JSがやってきた仕事なのだ。
最終的にビルドされたコードだけ見ると、Reactで書かれているというのは、ぱっと見では分からない。まあ、stateとか見ると違うんだけども。
つまり、HTML、CSS、JSが分かっていれば、基本的にReactのコードは書けてしまう。
では、何故普通のHTML、CSS、JSではなくわざわざ自分の時間を使い、睡眠時間を削ってまで、Reactを使わないといけないのか？

何のためにReactは存在するのか？

Reactやフレームワークが輝くのは、主にアプリ開発である。
従来の様なホームがあって、Aboutがあって、Contactがあってみたいな半静的なサイトの場合は普通のHTML、CSS、JS、phpなんかで全然おk。
ただし、最近のアプリを見てみよう。Reactの開発元であるFacebook,Instagramや Netflix, 色々なショッピングアプリ、ブログアプリなど、あらゆるページや部分が動的に書き換わり、更新され、xマークを押すと消去される。リアルタイムの記事やニュースが次々更新されていく。
こういうのをHTML、CSS、JS、PHPだけで作ろうとすると、血を吐いて倒れる自分がイメージできるであろう。
実際は作れるのである。ただし、こういう超動的コンテンツをJavascriptだけでやろうとすると、メチャクチャ長くて煩雑なコードになる。Javascriptをやってる人なら容易にイメージが付くと思う。さらに、コードがスパゲティ化しやすく、一部分だけ書き直したり、エラーやバグを潰したり、後々の補修点検作業がとんでもなく面倒になる。

で、こういうアプリの高度化にあわせて登場したのが、React, Angular, Vueといったフレームワークと言える。
これは、レゴの様なコンセプトで、ページのパーツを細かな部品にし、それを積み上げていくことでページを構築するというコンセプトである。
Reactの世界では、このパーツをコンポーネントと呼び、ボタン一つから、各ページに至るまでがコンポーネントであり、コンポーネントの中にコンポーネントが入れ子になっている構造である。機械と一緒で、色々な機能を持つ各部品が組み合わされて全体を構成している。
で、それら各コンポーネントはHTML、CSS、JSで記述されている。

コンポーネントは簡単にコピペ（別ファイルで各所に使い回し）出来、Vanila JAVASCRIPTの様に、データベースからデータをfetchし、querySelector()でDOMエレメントを抽出し、target.addEventListener()でイベントを追加し、createChild()やappendChildでHTMLエレメントを追加しつつ、動的データをループで流していくみたいな作業を一個一個のエレメントに対してやる必要がないのである。
各コンポーネントは、すでに構造（HTML）、UI（CSS）、機能（JavaScript）をそれぞれで独立して保持している。

もう一つの大きな発明は、一か所のパーツが更新された場合（例えば、カートアイコンの商品数の表示やブログの記事の数、新規ニュース、メッセージの件数とか）、その部分だけがほぼリアルタイムでピンポイントで更新されるのである。これが、stateである。
HTMLではエレメントレベルの変更が、ページのリロードなどという前時代的な動作をせず、１エレメントだけ瞬時に変わるのである。これはめちゃ便利。つまり、データの変化に対して React している。
また、エレメントをブロック化して独立ファイルとして保存することにより、リニューアルや修正したい部品だけを修正でき、その他のコンポーネントやページ全体には影響を及ぼさないというリスクマネージメント的にも優れている。
あと、Reactで作る主なアプリは Single page app と言われ、最初のロード時に全てのコンポーネントがブラウザに読み込まれる。 つまり、ページもコンポーネントであり、ロード時に全ページが読み込まれ、それがメニュークリックによって表示が内部で切り替わっているだけなので、ページの切り替えにわざわざページをロードし、サーバーに問い合わせの必要も全くない。なので、超高速である。
Reactにおいてサーバー問い合わせが発生するのは、部分的なデータの送受信くらいである。

自分も大好きなフルスタックガイBradのチュートリアル。純粋なJavascriptを即興でReactに書き換えていってるんだけど、違いがめちゃ分かり易い。

あと、充実したエコシステム。世界中の多くの人が共通で使えるコンポーネントをライブラリ化して配布しているのも嬉しいところである。まさにレゴの組み立て感覚でアプリを構築できるのだ。

最初は何が出来るのかいまいちピンとこないまま、必要に駆られて学習しだし、React特有の色々な面倒くささやくせ（特にstateの保存や変数の扱い方）にストレスが溜まり、毒を吐きながら勉強をして２か月ほど。
ようやくあなたの良いところに気付き始めました。
というわけで、反省と、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君に向けて、何故React, Angular, Vueといったフレームワークはやった方が良いのかという事を伝えたくて、実体験を書いてみたよ。

これを一通りやれば、Reactはほぼ理解できる↓

独学におすすめはこちらのチャンネル↓
Dev Ed : 最近REACTを勉強するのにお気に入りのチャンネル。本当に理解していないと、人には教えられないをよく表しているスタイル。ニートなエドがマイペースでコードを書いて、解説してくれる。ちゃんと初心者視点に立った解説で、なぜこれを使うのか、なぜ必要なのかをちゃんと説明してくれていて、置いてけぼりにならない。
Traversy Media : 本当にただで良いんですか？っていうくらいのコンテンツの充実ぶり。Udemyコースを少しコンパクトにした感じ。実際にコードを書きながら解説してくれて、リズムもよくて分かり易い。この人は声も良いよね。

その他のおすすめ独学サイト↓
ビギナー向け、無料で最強の海外独学サイトリスト

ReactとFirebaseでアプリを作る最初のセットアップ手順を備忘録としてログしておきました。
[備忘録] React x Firebase アプリのセットアップ手順