React は JavaScript フレームワーク・ライブラリ群の中でも世界的に人気があり、日本でも人気が急加速的に高まっています。
また、フロントエンドエンジニアの求人を見ても、React 経験者のニーズが強くなっていることが分かります。
そこで今回は、React とは何か？ 特徴やメリット・デメリットは？ 習得するための学習方法などを、React という言葉は知っているが、詳しくは理解できていない初心者に向けて解説します。
そもそもReact とは
React は JavaScript ライブラリのひとつで、Web アプリにおけるフロントエンド（View）の部分をコンポーネントベースで構築するよう設計されたライブラリです。
他の有名フレームワークである Angular・Vue.js と合わせて、3大 JavaScript フレームワーク・ライブラリの一つとして数えられています。
React は、2011年に Facebook によって生み出され、その使いやすさと、保守性の高さから、開発元のFacebook を始めとする多くの有名企業で採用されています。
Reactの3つの特徴
公式ページでは、React の特徴として次の3つが挙げられています。
宣言的である（Declarative）
React では UI に当たる部分を、JavaScript の中に HTML を埋め込んだような JSX 記法を使って書いていきます。
JSX 記法を用いることで、アプリの状態がこうだったら、UI はこう表示するべきだという形で UI を宣言していきます。状態が変化するとReact がそれを検知し、必要な部分だけを効率的に更新してレンダリングしてくれます。
コンポーネント指向（Component-Based）
React では、Web ページ上の構成要素を、小さい部品（コンポーネント ）の集まりとして画面を設計します。
コンポーネントは、レイアウトやスタイル、状態をカプセル化し、他のコンポーネントと組み合わせることで、SPA を初めとする複雑なアプリケーションを構築できます。
出来る限り分かりやすい単位にコンポーネントを分割することで、機能間の依存性を低くし、再利用や将来の拡張性を高めることが可能になります。
一度の学習でどこでも使える（Learn Once, Write Anywhere）
React は Web アプリケーションだけを作るライブラリではありません。一度、React を学習すれば他の分野でも学習した知識を生かすことができます。
例えば、React Native を使って iOS / Android アプリをクロスプラットフォームで開発すれば、Node を使ってサーバ上で HTML を出力するサーバーサイドレンダリングにも使えます。また、React VR を使えば WebVR ベースの VR アプリケーションを作ることも可能です。
このように、React は他に組み合わせるフレームワークを規定していないため、組み合わせ次第でさまざまなアプリケーションにいてReact の知識を生かして開発できます。
Reactのメリット
React を使用するメリットには、次のようなものが挙げられます。優れた点も多く見られますが、フロントエンド部分に特化したライブラリなので、その点に特化している部分がメリットとして挙げられます。
仮想DOMの仕組みでレンダリングが高速
そもそも DOM とは HTMLの要素・テキスト・属性などをオブジェクトとして扱い、要素の関係をノードと呼ばれる階層的な構造（DOMツリー）として識別し、 JavaScirpt から操作する API を提供する仕組みです。
DOMツリーが変更されると、ブラウザはツリーの再構築を行い、各ノードの位置やスタイルを再計算し、その結果をもとにページを描画し直します。DOM ツリーの変更はコストが高い処理であり、頻繁に多くのノードを更新すると、画面表示の遅延に繋がります。
そこで、React では「仮想DOM」という仕組みを使ってレンダリングを高速化しています。
仮想DOM はブラウザの DOMツリーと似た構造のデータを React が内部的に持ち、React で状態を変更して UI が変更される時は、まずこの仮想DOM が更新されます。そして変更前の仮想DOMと変更後の仮想DOMを比較し、差分があった箇所だけを ブラウザの DOMツリーに反映することで、無駄な DOM ツリーの再構築を避け、レンダリングを高速化しています。
SPA（Single Page Application）に向いている
スマートフォンの普及などもあり、SPA（Single Page Application）で作られている Web アプリケーションが増えてきました。
従来の Web アプリケーションでは、ユーザーがアクションを行うたびにページの内容を丸々読み直していたのに対し、SPAは最初に必要な HTMLやCSS、JavaScript をサーバーから受け取り、そのあとは必要なデータだけを取得し、差分だけを画面に反映します。
必要な部分だけを更新するため、データ通信量も少なく、高速でページを動かせるメリットがあります。
その反面、SPAは１つの Webページにすべてのアプリケーション機能を詰め込むため、コードが複雑化し、予期せぬ JavaScript 関数の競合や、CSSの上書きが発生することがしばしばあり、システムがブラックボックス化してしまうリスクがありました。
その点 Reactは、コンポーネント指向の特徴を生かして、ページ内の個々の機能をコンポーネントに分割することで、コードの複雑さを回避し、もう１つの特徴でもある 宣言的な UI の定義により、状態の変化による UI の表示切替も分かりやすく記述することが可能です。
流行りのUIコンポーネントのライブラリが多い
React は世界中で使われており、流行りの UI をパッケージ化したライブラリが多くの企業や有志から提供されています。
例えば、ライブラリの１つである「Material UI」は、Google が提唱する Material Design をベースとしたUI ライブラリで、アプリ開発者は、このライブラリが提供しているカスタムタグを自身の JSX に配置するだけで、簡単に Material Design に対応したデザインやエフェクトを手に入れることができます。
ブラックボックス化しやすい jQuery からの脱却
少し前までは、jQuery を使った Web アプリケーションの開発が盛んでした。
jQuery はブラウザごとの非互換を吸収し、統一された API で DOMツリーを操作でき点でメリットがあり、当初は多くの Webサイトで導入が進みました。
しかし、SPAのや大規模な Web アプリケーションにおいて、jQuery で開発されたシステムはブラックボックス化しやすく、実際に jQuery で開発されたシステムが、特的の人にしか改修できないような技術的負債になっているシステムを抱える企業がいくつもあります。
React であれば、ここまでに紹介した 3つの特徴を生かして、複雑な Web アプリケーションであっても、メンテナンス性の高いアプリを構築することが可能になります。
Reactのデメリット
もちろんReact にもメリットばかりではなく、いくつかのデメリットもあります。しっかりとデメリットも理解した上で習得することを考えましょう。
コードの記述量は増える傾向にある
React は、宣言的であるが故に記述するコード量が増える傾向があります。簡単なページや、大半が静的コンテンツで、少しだけ JavaScirpt が必要なケースであれば、React は使わず HTML とプレーンな JavaScirpt だけで実装した方がよいでしょう。
環境構築に時間がかかる
React の開発を行うには、Node.js や babel、webpackなど色々なライブラリをインストールする必要があり、さらに、これらのツールは頻繁にバージョンアップが行われるため、開発するシステムごとにバージョンを切り替えたりする対応も必要です。
具体的なReact活用例
React はフェイスブック社が開発し、実際に使われていことから、海外を中心に高い信頼を得ています。以下は、React を使って作られた有名なサービスの一例です。
- Skype
- Netflix
- Aitbnb
など
Reactを学ぶ方法は
React を学ぶには、まず JavaScript の基本を理解しておく必要があります。JavaScirpt 未経験者の場合は、オンライン講座などで JavaScript の基礎を学んでおきましょう。
また、Reactは人気があるため、多くの書籍も出版されているのが特徴です。下記のような勉強方法にプラスして書籍で補うような勉強方法がいいでしょう。
それでは、React を学習するおすすめの方法を 4つ紹介します。
オンライン講座
現在は、オンラインで React が学べる講座が多くあります。まずは React の雰囲気を掴む意味でも、簡単に入門講座をこなしておくとよいでしょう。
おすすめの１つは、Progate の Reactコースです。有料の講座ですが、実際にサンプルを動かしながら React の基礎知識を短い時間で学ぶことができます。
React | プログラミングの入門なら基礎から学べるProgate[プロゲート]
公式のチュートリアル
React の公式サイトのチュートリアルでは、ブラウザで React を実行する手順から、簡単な三目並べゲームを作る方法が割りやすく解説されています。
YouTubeを活用
YouTube で「React 入門」と検索すれば、たくさんの動画が見つかるでしょう。基礎を分かり易く説明してくれる動画もたくさんあるため、自分でアプリケーションを作成する前に、先に動画で概要を掴むのもよいでしょう。
基本を理解したあとは
上記のような方法で基礎を理解することができたら、実際にプログラミングしてみるといいでしょう。
実際にプログラミングすることでReactの利点なども見えてくるでしょうし、習得するためにはコードをかいてみないことには理解することができないのではないでしょうか。
まとめ
世界ではフロントエンドエンジニアの重要性がましていますし、日本でも傾向的には同じ方向に進んでいます。現在の多様化したWebアプリケーションにも適していて、これからも利用頻度は上がっていくものと思われます。
数年前まではjQueryが圧倒的なニーズがあったのですが、現在は下降傾向になっています。ただし、JavaScriptは広く活用されており、フロントエンドエンジニアの必須スキルであるといえるでしょう。
Reactでも、Vueでも、jQueryであっても、JavaScriptであることは共通しており、なによりもまずは JavaScript について知識を得ておくことがフロントエンドエンジニアとして必須事項といえます。
また、現在の転職トレンドを見てもフロントエンドエンジニアのニーズは強く、特にReactの実績をもっているのであれば、転職活動で有利に運ぶことができる協力な武器となることは間違い有りません。
