Reactについて基礎知識を学ぶ
公開日: 2025/4/16
Reactについて皆さんは耳にしたことはありますか。
Reactはよく比較されるVue.jsやAngularと同様人気が高くあります。
ほかとどう違うのか、Reactの特徴とは何か。そういった内容を調査し、今回の記事作成を通してReactの基礎知識を学んでいこうと考えています。
1. Reactとは
Meta社(旧称Facebook社)が中心となって作られたJavaScriptライブラリで、ユーザインタフェースを構築するために使われます。
※ライブラリでありフレームワークではない
Reactはリアクトと読み、別名、React.jsもしくはReactJSとも呼ばれています。
モバイルアプリケーションやシングルページアプリケーション(SPA)の開発における基盤として使われてもいます。
Reactの初版は、2013年3月29日に出ています。
現在(2024年4月9日)の最新バージョンは、2022年6月23日の18.2.0になっています。
Reactは、Webサイト上のアニメーションや動的な処理を実現する目的で使われています。
ブラウザにはJavaScriptの実行環境が組み込まれているため、開発環境を構築しなくても動かすことが可能となっています。
Reactは、主にボタンや入力フォームなど、UIコンポーネントの作成に活用されています。
たとえば、ユーザーが使いやすいようにボタンの配置を変更することなどが可能となっています。
UI制作の効率を高められるため、Reactは多くの企業で導入されています。
Facebookをはじめとする世界的に有名なサービスでも使われています。
JavaScriptのライブラリやフレームワークで有名なJQueryやVue.js、Angularがある中、最も使用されているのがReactになります。
2. Reactの特徴
1.宣言的なView（Declarative）
Reactは、UIの部品に対し表示がどうなるかわかりやすく実装できるという特徴を持っています。これは、誰が見てもシンプルで理解しやすいソースコードの作成を可能にした成果であり、デバッグしやすいという利点も生まれました。
また、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新するといった点もReactならではの特徴となっています。
2.コンポーネントベース（Component-Based）
コンポーネントとは構成要素を指す言葉です。Reactでは、部分ごとにコンポーネントを分けることで、カスタマイズしやすくなっています。AngularやjQueryでは、一部を変更する場合でも、全部を変更する必要があります。
しかし、Reactでは変えたい部分だけを変えることができるので、格段に改修や管理、再利用がしやすくなっています。
また、大規模なJavaScriptコードも部品化させることで保守性を高め、既存のReactコンポーネントを再利用することで、開発工数を減らすことができます。
3.一度学習すれば、どこでも使える（Learn Once, Write Anywhere）
Reactは、開発の途中から利用されることを想定して作られています。そのため、新しい機能を追加する場合でも、既存のソースコードを書き換えることなく、開発ができます。
どんなWebアプリにもすぐに導入できる手軽さも、大きな特徴のひとつとなっています。
3. Reactのメリット
特徴がメリットにも繋がりますが、明確的なメリットは存在しています。
1.パフォーマンスが良い・サクサク動く（仮想DOMが高速）
Reactには、仮想DOM(Virtual Document Object Model)というレンダリング機構が備わっています。仮装DOMとは、実際の DOM ではなく、React 内部に持っている DOM の情報です。
Reactを使うと、この仮想 DOM と実際の HTML 上の DOM を比較したときに出てくる違いだけが、毎回 HTML 上に再適用されます。
そのため画面全体が React で構成されていたとしても、必要な部分しか更新されることがないため、非常に高速に動作します。
2.応用力が高い
Reactは応用性が高く、一度学習すれば、どこでも使えます。ReactによるWebアプリ開発によって得た知識は、同じくReactによるスマホアプリやVR開発などで活かせます。
Reactを習得することで、さまざまな開発分野に参入しやすくなると考えられます。
3.求人数が豊富
多くあるライブラリやフレームワークの中で、最も人気が高いため、求人数も高いと考えられます。Reactを習得することができればそのスキルを求められる回数は多くなると考えられます。
4. Reactのデメリット
1.学習コストが高い
React自体、ほかにあるJavaScriptのライブラリやフレームワークに比べて難易度が高いです。そのため習得するための学習コストも高くなります。
2.アプリ・Webページによっては不向きにもなる
Reactは仮想DOMを採用することで、アプリ・Webページの種類によってはかえって処理速度が落ちてしまう面があり注意が必要になります。仮想DOMではDOM構造をメモリ上に保持する関係から、その分だけメモリを多く消費することになります。
その上でニュースアプリのように、ユーザーが読むだけでページ更新が少ない場合は仮想DOMのメリットが活かされなくなります。
そうした場合、メモリ上に保存したDOM構造の役割がなくなってしまうため、仮想DOMはメモリを多く消費するだけでかえって非効率で処理が遅くなります。
3.環境構築に労力がかかる
Node.jsをはじめbabel・webpackなどのプログラムをインストールすることが求められます。インストール後は、これらプログラムのアップデートなどの対応も必要になります。
その分、環境の構築に手間がかかることは否めません。
ただし、昨今ではReactの環境構築をシンプルにするスターターキットなどもあります。
それらを利用すれば、環境構築の手間を軽減可能です。
5. 基本的な使い方
以下はJSXとJavaScriptを利用したReactの基本的な使い方です。(Wikipediaから引用)
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <title>Example</title>
5. </head>
6. <body>
7. <div id="root"></div>
8. </body>
9.</html> 1.import React from "react";
2.import ReactDOM from "react-dom/client";
3.
4.const Greeter = (props) => {
5. return (
6. <h1>{props.greeting}</h1>
7. );
8.};
9.
10.const App = () => {
11. return <Greeter greeting="Hello, world!" />;
12.};
13.
14.const root = ReactDOM.createRoot(document.getElementById("root"));
15.
16.root.render(
17. <React.StrictMode>
18. <App />
19. </React.StrictMode>
20.);6. Reactの活用事例
・メルカリ
・Instagram
・Skype
7. まとめ
ReactはJavaScriptのライブラリやフレームワークの中で最も人気が高いため、多少の学習コストがあっても習得したいと考えました。
この記事を読んだ方が少しでもReactについて理解していただけたら幸いです。