react.jsとは

【超初心者向け】Reactとは何かを簡単に解説!JavaScriptフレームワーク

まったくプログラミングに触れてこなかった筆者がフロントエンドエンジニアを目指してJavaScript勉強中!
しかし現役のフロントエンドで活躍する方々の会話を聞いても
「…正直なにを言っているのか、わからねーと思うが、おれも何を言われてるのかわからなかった…」
と某マンガで生まれた『ポル〇レフ状態』近い感覚を毎週味わっています。

JavaScriptライブラリ…?フレーム ワーク …?UI/UX…?

おそらく基礎中の基礎なのでしょうが、jsの勉強を始めた筆者からすると本当に何の事だかさっぱりわからない状態です…。

そんな感じでReact.jsというJavaScripライブラリの一つが、今段々と勢力を付けてきているので、知らなかった用語とReact.jsについて紹介しようと思います。

【こんな方にオススメ】

  • そもそもフレームワークって…?
  • Reactのフレームワークついてざっくり知りたい
  • Reactの人気について知りたい

そもそもフレームワークって…?

フレームワークとは開発を簡単に行えるようになり、効率よく行う為のモノと覚えてください。もう少し噛み砕いて説明するのであればフレームワークが開発を効率よく行う部品の集合体、その部品単体を指すのがライブラリとなります。

料理で例えるならホットケーキがわかりやすいと思います。
各家庭のおやつとして登場する一般的なホットケーキを作る場合、何かしらのホットケーキミックスを使うことで大幅に作業時間を短縮することが出来、誰でも簡単にホットケーキを作ることが出来ます。
しかし、ホットケーキミックスを使わない場合、砂糖や小麦粉、ベーキングパウダーのように様々な材料を組み合わせ分量を調整して味を調えるなど、おいしく作るまで難易度の高いお菓子作りとなってしまいますよね。

誰でも一定の質が維持出来て、なおかつ時間を短縮することが出来る。
これがフレームワーク!

フレームワークを使うことにより効率的に作業できるのでかなり便利なアイテムということがわかるかと思います!
JavaScriptでは多種多様なコードの書き方があるので、同じ動作をしているのに自分のコードと他者のコードが作る人によって変わります。しかしフレームワークを使えばコードの書き方が統一される為、個々人によるコードの違いを大幅に減らすことが出来、運用管理はたまた機能の追加や改修などがやりやすくなり、意図しないバグを減らすことにも繋がります。

しかしこんなに便利なワークフレームでもデメリットが存在します。
フレームワークでコーディングの量が減らすことをお伝えしましたが、逆に言ってしまえば仕組みが分かっていなくてもその機能を使うことが出来るので、デメリットにも繋がってしまいます。
そのため初心者の内からフレームワークを使用するとフレームワークを使わない場合にどんな書き方をするのか、はたまたコードの意味を理解出来ないままとなってしまい、基礎知識がついてこないと言われています。

今回の記事で例えるとReact.jsを使う前に、まずはJavaScriptの基礎的な知識が必要とされるわけです。

Reactとは?

JavaScriptフレームワークのひとつです、React以外にも jQueryVue.jsAngularJSなど用途に合わせた様々なフレームワークが存在します。

React.jsはFacebookより公開され、主にUIのパーツ(構成部分)を作るためのライブラリとなっており、ボタンやテキストボックスなどを多用するWebアプリケーションなどに有効なフレームワークと言われています。

『React.jsの特徴』

・HTMLタグを埋め込むことが出来る
実際に記述されるHMTLとは多少異なりますが、HTMLで使用するようなタグを埋め込んで実装することが出来ます。

・仮想DOMによる高速処理
代表的なフレームワークの一つでjQueryなどでもDOMを作成し処理をする事は可能ですが、React.jsは仮想DOMという技術が使われている為、処理のスピードが他のフレームワークに比べると早くなります。

・コンポーネントを定義する
コンポーネント…つまりは部品を定義することで簡略してHTMLの要素に様々な機能を付けることが可能になります。

『主にどんなことができるのか?』

React.jsとは?の冒頭でお伝えした通りFacebookで使われていることから、大規模なアプリケーションに向いていると言われています。
Web開発やアプリ開発、他にはVR開発など様々なところで使われているので、他のフレームワークに比べ多様性に優れています。

webアプリケーションなどでは本来アプリの画面を更新する場合、アプリ全体を更新する必要がありますが、React.jsではコンテンツをそれぞれ独立してコンテンツを配置することが出来る為、SPA(シングルページアプリケーション)として動かせるアプリを作ることが出来ます。これによりコンテンツの一部分だけを更新することが出来るわけです。

Reactで作られたアプリケーション事例

2011年、Facebookの社員の力により誕生したFaxJS(のちのReact)は、2013年にOSS(オープンソースソフトウェア)化され、現在SNSサイトを中心に様々なアプリケーションが開発されている。その中のいくつかの事例を紹介させていただきます。

『Facebook』

全世界で活用されている代表的なSNSの一つです。そして前述の通りReactの生みの親となります。
元よりSNSのようなアプリ開発が目的で作られた為、こういったサイトで力を発揮することでしょうね。

『 Instagram 』

2012年にFacebookが買収。2014年から爆発的な人気により「インスタ映え」などの代名詞がかなり有名となっているSNSです。
こちらもFacebook同様、Instagramの機能性は高くその使いやすさはReactを代表する一つであると考えられます。

『Skype』

オンラインで通話をするアプリの一つであり、今でも現役で使われている方はいらっしゃるのではないでしょうか?
Skypeのような通話やチャットに特化したアプリでもReactが使われている事はReactの多様性が覗えます。

『WIX』

HTMLやCSSの専門的知識がなくてもWebページを作成することが出来るWIX。現在様々は場所で広告を目にすることが多くなりました。
誰でも簡単にWebページを作成できる裏側ではReactで開発が行われており「React Navigation」などのライブラリをいくつも出しております。

今後のReactの人気について

JavaScriptのフレームワークは数多く存在します。2020年現在でGoogleトレンドとなっているフレームワークと言えば、古くから親しまれている「jQuery」がトップ。しかし支持率を独走していたjQueryですが年々降下傾向にあり、ReactやVueといったフレームワークの注目度が高まっています。

その中でも年々注目度が増してきているのがReactです。
FacebookやInstagramを始め、日本で運用されるているWebサービスでも徐々に採用されています。利点などは前述した通りで、リアルタイムで情報を入手できるSNSが急速に普及したことにより支持率を徐々に伸ばしていると推測できます。

人気度の傾向は以下の通りです。

終わりに

React.jsの特徴や傾向なんかを筆者なりにまとめてみましたがいかがでしたか?
前提としてReactを使えるようになるまでJavaScriptを習得しなければなりません。しかしそこで終わりではなくReactの様にそこからいくつもの選択肢があるという事をお伝えできたかと思います。

フロントエンドエンジニアが進めるフレームワークの一つでもあり、現在市場相場や市場価値は年々増加傾向にあるため、勉強を始めて損はないと推測できます。

SPAなどを必要とするWebアプリを作成する場合、積極的にReactで作成していきたいと筆者は考えております。

作者情報

エンジニア兼麻雀プロ。
好きな言葉は『大体リーチ』
フロントエンドエンジニアを目指して日々勉強中。