Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
691
Help us understand the problem. What are the problem?

posted at

updated at

何故くそややこしいReactを勉強しないといけないのか?

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

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

しょせんはHTMLとCSSとJavascript

で、結局Reactは何をやっているかというと、しょせんはHTML、CSS、JSなのである。
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, Netflix, Instagramやショッピングアプリ、ブログアプリなど、ほぼほとんどのページや部分が書き換わり、更新され、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ではエレメントレベルの変更が、ページのリロードなどという前時代的な動作をせず、1エレメントだけ瞬時に変わるのである。これはめちゃ便利。
また、エレメントをブロック化して独立ファイルとして保存することにより、リニューアルや修正したい部品だけを修正でき、その他のコンポーネントやページ全体には影響を及ぼさないというリスクマネージメント的にも優れている。

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

あと、充実したエコシステム。世界中の多くの人が共通で使えるコンポーネントをライブラリ化して配布しているのも嬉しいところである。まさにレゴの組み立て感覚でアプリを構築できるのだ。
最初は何が出来るのかいまいちピンとこないまま、必要に駆られて学習しだし、React特有の色々な面倒くささやくせ(特にstateの保存や変数の扱い方)にストレスが溜まり、毒を吐きながら勉強をして2か月ほど。
ようやくあなたの良いところに気付き始めたのだよ。
というわけで、反省と、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君に向けて、何故React, Angular, Vueといったフレームワークはやった方が良いのかという事を伝えたくて、実体験を書いてみたよ。


独学におすすめはこちらのチャンネル↓
Dev Ed : 最近REACTを勉強するのにお気に入りのチャンネル。本当に理解していないと、人には教えられないをよく表しているスタイル。ニートなエドがマイペースでコードを書いて、解説してくれる。ちゃんと初心者視点に立った解説で、なぜこれを使うのか、なぜ必要なのかをちゃんと説明してくれていて、置いてけぼりにならない。

Traversy Media : 本当にただで良いんですか?っていうくらいのコンテンツの充実ぶり。Udemyコースを少しコンパクトにした感じ。実際にコードを書きながら解説してくれて、リズムもよくて分かり易い。この人は声も良いよね。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
691
Help us understand the problem. What are the problem?