Reactとは、柔軟なユーザーインターフェースを構築できる人気の高いJavaScriptライブラリです。
Reactではユーザーインターフェース作成を手軽にする宣言型の文法やコードの再利用と複雑なアプリケーションの構築がしやすいコンポーネント指向の機能が利用でき、高速動作を実現できるため、多くの利用者へ快適なサービスを提供できます。
React.jsを詳しく見ていきましょう。
Contents
Reactとは？
Reactとは、Meta（旧FaceBook）社が開発した、WebサイトやWebアプリのUI（ユーザーインターフェース）作成に利用できるJavaScriptライブラリです。
世界中で19億人以上が毎日利用するSNSのFacebookはさまざまな機能を日々追加・更新していますが、複雑なUIを備えたFacebookのさまざまなサービスを構築・メンテナンスし続けることは開発チームにとって骨の折れる仕事でした。
Facebookほど複雑で大量のアクセスがあるページを開発し新機能をリリースし続けるためには従来の開発手法の限界では限界があり、限界に突き当たった当時のFacebook開発チームはオープンソースのプロジェクトとして2011年にReactを開発しました。
ReactはFacebookのように大規模なUIを効率的に開発・アップデートしていくことのできるJavaScriptのライブラリとなっています。
フレームワークとライブラリの違い
ライブラリとフレームワークは双方ともプログラミングを助けるコードの集合体、ソフトウェア開発の部品やブロックに例えられます。
さまざまな開発プロジェクトで、開発する機能が似ていることはよくあります。
例として基本的なログイン画面を考えてみると、ユーザー名とパスワードを入力する入力欄とログインボタンがあり、ログインボタンを押すと登録済みユーザーのデータを検索してマッチしたものがあればログインできます。
いろいろなサイトでログイン画面は大きく変わらないとすると、似たような機能を毎回開発するのではなくライブラリやフレームワークを使うことで効率よく開発を進められます。
ライブラリはフレームワークより汎用性が高く、さまざまな開発プロジェクトへパーツの一つとして組み込めます。ログイン機能の例では「（ユーザーの）データベースを検索する」処理のライブラリが考えられます。
フレームワークはライブラリよりも現実のアプリケーションに近く、ある程度できあがった状態で提供されます。ログイン機能の例では「ログイン画面を表示する」「登録済みユーザーのデータベースからユーザーを検索し、マッチしたものがあればログイン」までがフレームワークの機能として提供されます。
ライブラリとフレームワークでは、一長一短があり、フレームワークはある程度できあがった状態のため開発しようとするアプリケーションと用途や機能が合っていれば開発効率が良くなりますが、用途や機能が異なる場合は、結局フレームワークの処理を大幅に変更するか独自開発する必要がありフレームワークの恩恵は少なくなります。
ライブラリはよい意味で個性がなく、求める機能に合ったライブラリであればさまざまなプロジェクトに適用できるよう作られています。Reactはライブラリですので既存プロジェクトなどにも適用しやすくなっています。
JSX記法
ReactではUIの部品を「コンポーネント」単位でパーツ化し再利用性を高めています。コンポーネントを作るにはHTMLに似た文法をJavaScript上にコーディングできるJSX記法を利用できます。
JSX無しの場合はcreateElement関数を使ってJavaScriptの関数でページの要素を定義します。
| const heading = React.createElement(‘h1’, null, ‘Hello, World!’); |
同じくh1要素を使って見出しを作成するコードですが、JSX記法ではシンプルに記載できます。
| const heading = <h1>Hello, World!</h1>; |
UIを作成するうえでHTMLを記載する機会が多いReactではJSX記法によってコードの見やすさと書きやすさを実現しています。
Reactでできること
ReactはUIに特化したライブラリですが、UIだけにとどまりません。Reactで開発できるものをご紹介します。
アプリ開発
ReactはUIを作るのが得意です。Webアプリとして有名なGoogleマップやFacebookは一度ページを読み込むとページを再読み込みしなくてもアプリの機能を利用できます。再読込の少ない高速なレスポンスを実現できるのはReactの特長となっており、開発のしやすさだけでなく利用者にとって快適なレスポンスで利用できる使いやすいWebアプリケーションを作成できます。
また、関連プロジェクトのReact Nativeと組み合わせることでAndroidやiOSのアプリストアで配布できるモバイルアプリを開発できます。
従来必要だったKotlinやSwiftなどの言語を使わずJavaScriptベースでモバイル向けアプリを開発できるため、Webアプリとモバイルアプリで共通の機能を持たせる場合などにも便利です。
VR開発
React 360と呼ばれるフレームワークを使用するとさまざまなプラットフォームで動作するVRアプリを開発できます。
例えば3Dモデルを表示したり、3D空間のUIとしてボタンを設置したりできます。
Reactの活用事例
ReactはさまざまなWebアプリやモバイルアプリで採用されていますが、画像SNSとして有名なInstagramや、インターネット上で通話やメッセージの送信ができるSkype、宿泊場所を探している旅行者に自宅やアパートを貸せるAirbnbなどのアプリはいずれもReact Nativeで開発されており、多数のユーザーが実際に利用しているアプリの開発にReactの技術が活用されています。
Reactのメリット
ReactはJavaScriptのライブラリですが、開発プロジェクトにとってどのようなメリットがあるのでしょうか。5点ご紹介します。
ソースコードを理解しやすい
Reactの特長として、宣言的にUIを作成できる点があります。
多くのプログラミング言語は処理の手順（どのように処理するかの手続き）をプログラミングしていきますが宣言的プログラミングでは結果（どのような表示内容になるか）を記述するだけでプログラミングできます。
宣言的なコードは、手続きを書いたコードに比べ一般的に理解しやすく、簡潔で効率よく書けるようになっています。
複雑で大規模なUIを作るうえでは宣言的なコードが恩恵をもたらしてくれます。
拡張しやすい
Reactではコンポーネントを組み合わせてプログラミングできます。
コンポーネント自体が完結した機能を備えていて、複雑なUIもコンポーネントを複数組み合わせることで作成できます。
例として、Webサイトのなかではナビゲーションメニューやページの見出し部分（ヘッダー）などがコンポーネントとして作成でき、ナビゲーションメニュー自体がタップするとサブメニューを開く機能を備えております。そこでは、ページAでもページBでも同じナビゲーションメニューコンポーネントを利用できます。実際は、ナビゲーションメニュー自体もさらに細かいコンポーネントから構成されており、組み合わせを変えることで少し違ったメニューも簡単に作成できます。
様々なジャンルで使うことができる（Learn Once, Write Anywhere）
Reactは既存プロジェクトの一部分に利用でき、アプリ全部をReactで作るだけでなくほかのフレームワークなどと組み合わせて活用できます。
また、Reactで学んだスキルはモバイルアプリ向けにReact Nativeで活かせます。
「仮想DOM」にて処理速度が早い
仮想DOMとは、Reactを支える技術の一つで無駄な描画を減らし高速なUIを実現できます。Reactを利用するうえで常に意識する必要はありませんが、意識するとより高速なアプリを作成できます。
一般に描画（画面の表示内容を書き換える）処理はCPUパワーを多く使用するため反応速度や消費電力の点でデメリットが多く、特にモバイルアプリではできるだけ削減したい処理です。仮想DOMでは実際の描画をする前に、処理のビフォーアフターで書き換わった場所をメモリ内で比較し実際に描画するのは最小限の差分だけで済ませます。
経験が少ない人でも最先端のものが作れる
Reactは多くの開発者、世界中の企業で利用されInstagramやAirbnbなど先端的なアプリでも使用されているため多数の洗練されたコンポーネント（パーツ）を利用できます。いままでUIの開発経験が少ない人でも洗練されたコンポーネントを使ってUIを作成できます。
Reactのデメリット
万能のように見えるReactですが、いくつか注意が必要です。ここでは、3点を見ていきます。
環境構築に手間がかかる
Reactで正式に開発を進めるには、開発環境となるパソコンへBabelやwebpack、Node.jsなどをインストールしReactのコードを実際のブラウザで動作するJavaScriptにコンパイルする環境を構築する必要があります。
また、プロジェクトごとにNode.jsなどのバージョンを管理し、アップデートするなどのメンテナンスが必要となります。
フロントエンドの開発ではこうしたツール導入が多いですが、例えばパソコンを買い替えたり環境を移す場合などにはけっこう手間がかかります。
学習ハードルが高い
Reactは海外での利用が多く、日本でも徐々に利用が増えてきているものの頼りになる日本語の情報は少ないのが現状です。
今後は日本語の情報も増えていくものと思われますが、現時点で少し英語の文書を調べる必要があるかもしれません。英語が苦手な方にとってはハードルが高いものとなっています。
万能ではない
Reactは描画パフォーマンスを上げるために仮想DOMを採用しているため、場合によってはメモリの消費が多くなります。
Reactが向いているのは頻繁に画面を書き換えたり、複雑なUIを構築するアプリケーションです。逆に、電話帳のようにシンプルな項目を大量に表示するだけで書き換えなくて済む場合にはメモリを消費する分、かえってパフォーマンスが下がることも考えられます。
Reactの機能説明
Reactの機能を構成する主要なコンセプトをご紹介します。
コンポーネント
コンポーネントとはUIを形作る部品です。わかりやすい例はボタンやメニューなどタップすると反応するパーツですが、反応しなくても大抵の表示内容はコンポーネントに切り出せます。
Reactではコンポーネントを作る際にJavaScriptのクラスを使用するクラスコンポーネントと関数として定義する関数コンポーネントの2とおりの実装が選べますが、現在では関数コンポーネントの使用が推奨されています。
過去にはクラスコンポーネントでしかできないことなどがあったため併用されていましたが、現在では差が解消されたためクラスコンポーネントを新たに作るのは非推奨となっています。
関数コンポーネントは次のGreetingの例のように必ず大文字で始まる関数名で定義します。
| export default function Greeting() { return ( <h1>Hello, world.</h1> )} |
state
stateとは、コンポーネントが今どのような状態かを記憶する入れ物です。
例えば、チェックボックスを表示するコンポーネントなら、チェックが入った状態・チェックが入っていない状態いずれかがstateに設定されるでしょう。
ログインしたユーザーの名前を表示するコンポーネントなら、ユーザーの名前がstateに入ります。
stateは以下のようにuseState関数で初期値を指定します。
| import { useState } from ‘react’; function GreetingComonent() { const [name, setName] = useState(‘Yamada’); return ( <h1>Hello, {name}.</h1> )} |
ライフサイクル
ライフサイクルとは、オブジェクトなどが生成されてから破棄されるまでの段階を表すものでReactのコンポーネントには以下の3つのサイクルがあります。
- 最初にコンポーネントを描画するとき（mount）
- コンポーネントを書き換えるとき（update）
- 最後にコンポーネントを破棄するとき（unmount）
React以外のライブラリや外部のサーバーと協調してアプリケーションを実現する場合は、ライフサイクルに応じた処理が必要になる場合があり、エフェクト（Effect）機能を使って処理できます。
Reactのコンポーネント描画コードのなかでは、外部とのやりとりは副作用・不具合の原因となるため禁止されています。副作用のある処理が必要な場合、イベントハンドラーやエフェクトを利用します。イベントハンドラーではユーザーからの入力に対して処理をおこなえ、エフェクトではコンポーネントの状態に応じて処理をおこなえます。エフェクトを使うことで従来ライフサイクルでおこなっていた多くの処理を実現できます。
Reactの環境構築のやり方を解説
以下では、実際にReactの簡単なアプリケーション環境構築をおこなっていきます。
環境構築にはいくつかの方法がありますが、ここではNode.jsのバージョンを管理できるnvmを使用して構築をおこないます。
シェル環境をWSLで準備する
本項はWindows環境が対象です。macOS、 Linuxの方は本項をスキップし次の「nvmのインストール」から始めてください。
nvmの動作に必要なbashをWSLのLinux環境にセットアップします。
対応する環境はWindows 10バージョン2004以上（ビルド19041以上）またはWindows 11です。
まずWSLを有効化します。詳しい手順は以下のとおりです。
- スタートからPowerShellまたはコマンドプロンプトを検索します。
- 検索結果にPowerShell・コマンドプロンプトのアイコンが表示されたら、右クリックし「管理者として実行」します（必要に応じて管理者による認証をおこなってください）
- PowerShell・コマンドプロンプトが開いたら、次のコマンドをタイプしてエンターキーで実行してください。既定ではUbuntuディストリビューションが導入されます。
| wsl –install |
もし「すでにインストールされている」とメッセージが表示された場合、wsl –install -d Ubuntu を実行しUbuntuを導入すると本記事を理解しやすいでしょう。WSLに関するほかの問題はMicrosoftのサイトを参照してください。
- スタートからUbuntuを検索し、開きます。初回起動時は初期設定のため少し待ちます。しばらくするとユーザー名とパスワードの設定を求められるので、半角でユーザー名とパスワードを入力してください。
以上でシェル環境（Ubuntu上のbash）を準備できました。以降、途中から再開する場合は、スタートからUbuntuを検索し、開いて作業を進めてください。
nvmのインストール
nvmはNode Version Managerのことで異なるバージョンのNode.jsを管理できるコマンドです。nvmは異なるバージョンのNode.jsを使用する複数プロジェクトの開発で重宝します。
ターミナル・端末・シェル（以下、端末と表記します）を開いてください。
端末に以下のコマンドを入力しエンターキーで実行してください。
| curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash |
※ コマンド内のv0.39.3は本稿執筆時点（2023年2月）の例です。最新版はnvm-shを参照してください。
実行後に、いったん端末を×で閉じ、再び端末を開きます。
正常にインストールされた場合、以下のコマンドを入力し実行するとバージョン番号（例では0.39.3）が表示されます。
| nvm -v |
node.jsのインストール
nvmを使用してNode.jsを導入します。
端末から以下を実行すると最新のLTS（長期サポート版）Node.jsを導入できます。
| nvm install –lts |
node.jsが導入できたか確認するには、以下のコマンドでバージョンを表示します。本稿執筆時点（2023年2月）では例としてv18.14.1が表示されました。
| node –version |
Create React App でReact開発を始める
Reactアプリケーションの開発環境の構築ができているか確認するため Create React Appによるアプリケーション作成をおこないます。
端末を開き、以下のコマンドを実行してください。コマンドによりmy-appディレクトリと必要なファイルやディレクトリが自動作成されます。
| npx create-react-app my-app |
初回使用時は、以下のような表示が出て止まる場合があります。
必要なパッケージが不足しているためインストールをおこなうかの確認ですので、続ける場合は半角でyを入力しエンターキーを押せばインストールし続行できます。インストールには数分ほどかかる場合があります。
| Need to install the following packages: create-react-app@5.0.1Ok to proceed? (y) |
続けて以下のコマンドでmy-appディレクトリに移動し、開発用サーバーをローカル起動できます。
| cd my-appnpm start |
開発用サーバーが起動したら、Webブラウザでhttp://localhost:3000を開くと動作を確認できます。
今後の開発は、my-appディレクトリ内のsrcディレクトリにあるファイルを追加・変更し開発用サーバーでの動作確認をおこなって進めていきます。
Reactの勉強法
Reactは比較的シンプルなライブラリのため導入しやすいですが、JavaScriptの知識やJSXなどいくつかのコンセプトを理解する必要があります。
ここではReactのおすすめの勉強方法を3点ご紹介します。
公式サイト
React公式サイトのチュートリアルは 正確な情報が記載されており、日本語版があるので最初に目を通すことをおすすめします。
- 書籍
書籍でじっくり学びたい方向けにReactの学習におすすめの書籍を2冊ご紹介します。いずれも初歩的なJavaScriptの知識を得たうえで読むのがおすすめです。
- React.js&Next.js超入門第2版はJavaScriptの入門書を読み終えた方向けにReact.jsの基礎からステップごとに手順を省かず丁寧に解説している書籍です。
- モダンJavaScriptの基本から始めるReact実践の教科書はconst・letやアロー関数などモダンなJavaScriptの基礎から実務で必要となるReactの知識まで解説している書籍です。
オンライン学習
画面を見ながら学習したい方は、下記のサイトでオンライン講座を受講できます。
- Udemyはさまざまな動画の学習コースを提供しているサイトですが、Reactのコースは多数あり、レベルに合わせて受講できます。
- ProgateではReactの基礎から、コンポーネント作成、チェック機能付きのフォーム作成などを学べます。
Reactの将来性
近年多くの企業サービスがインターネットを通じて提供されるようになっており、洗練されたUIは多くの利用者が求めるものとなっています。
複雑なUIを構築するだけでなく機能の追加やアップデートをおこないやすいReactの特長は多くの開発者に支持されており、実際にInstagramなどのアプリケーションを支える技術となっています。また、Reactは熱心な開発者コミュニティがあり、Meta社による安定したアップデートもあるため今後も改善がおこなわれていくことが期待できます。
欧米に比べReactの採用が進んでいない日本でも、開発のしやすいReactは今後採用例が増えていくと考えられます。日本語の参考文献が少ないなどの障壁はありますが、Reactスキルを身につけておくことは将来的に日本の開発現場での活躍につながります。
Reactの収入
弊社テックリーチのReact求人案件によれば、 多くは成長企業のSaaSやWebアプリとモバイルアプリのUI開発を含む案件となっています。 数字で見ると、月収90万円（年収換算1,080万円）以上の案件は63件、430件ほど登録されているReact案件の平均年収は約821万円となっています。
| Reactの高額案件数 | （React全件数） | React案件 平均年収（テックリーチ掲載） |
| 63 | 431 | 約821万円 |
※テックリーチ2023年2月調べ
まとめ
人気のJavaScriptライブラリReactを見てきました。
- Reactは理解しやすく拡張しやすいUIを作れるライブラリです。
- Reactは再利用可能な部品としてコンポーネントを作成できます。
- ReactはWebアプリだけでなくモバイルアプリの開発にも利用できます。
世界の著名アプリケーションで実際に使用され開発者からの人気もあるReactは今後も多くのWebアプリやモバイルアプリ開発の現場で採用されていくと考えられます。JavaScriptに覚えのある方は、React.jsを学び高度なUI作成のスキルを習得してみてはいかがでしょうか。
フリーランスの案件をお探しの方はTechReachにご相談ください。
TechReachを運営する株式会社アールストーンはIT・Web業界特化で15年以上の実績がございます。
そのため、高単価・高品質な数多くの案件紹介が可能です。
また一人のコンサルタントが企業と求職者様の担当を行う「両面型エージェント」を採用しているため、あなたの希望に合う案件がきっと見つかるはずです。
TechReachを活用して、理想の案件を見つけましょう！
