Reactとは？ライブラリの特徴や重要語句について解説

フリーランス向けコンテンツ
公開日: 2022-10-27
更新日: 2023-03-08

Reactは、Meta社によって開発されたJava scriptのライブラリです。世界中のIT技術者によるアンケート結果をまとめた「The State of JavaScript 」によれば、Reactは、Java Scriptライブラリにおいて、2016年から6年連続で人気1位を獲得するなど、非常に人気の高いライブラリとなっています。

今回はReactについて解説していきますので、ぜひともご確認ください。

Contents

1 ReactはUI構築に特化したJavaScriptライブラリ
2 Reactの特徴
3 Reactを用いた開発のメリット
4 Reactを理解するための重要語句
5 Reactの開発環境の構築手順
- 5.1 Node.jsのインストール（Windows編）
- 5.2 Create React Appのインストール
6 はじめは公式チュートリアルがおすすめ
7 まとめ

ReactはUI構築に特化したJavaScriptライブラリ

Reactは、Meta社（旧Facebook社）によって開発されたJava scriptのライブラリです。2011年Facebookの開発に使用され、また2012年にInstagramの開発に使用され、2013年にはオープンソースとして公開されました。

Reactは、主にGUIの実装時に用いられます。インタラクティブなUI開発を得意としており、シングルページアプリケーション（SPA）の開発にも向きます。

Reactの特徴について、更に詳しく見ていきましょう。

Reactの特徴

Reactの下記3つの特徴について解説します。

コンポーネントを用いたUI構築

Reactは、コンポーネントを組み合わせることで、UIを構築します。こうした構築方法をコンポーネント指向と言います。

例えば、WebサイトのUIを構築する際、コンポーネント指向を用いない作り方では、動的な部分をJava scriptで作り、静的な部分をHTMLで作るようなサイト制作において、Java scriptとHTML、CSSをそれぞれ別々に作成します。

一方、コンポーネント指向で作成する場合、一つのコンポーネントを構築するJava scriptとHTML、CSSなどをひとまとめにして作成します。

UIと動的な部分は紐づいていることも多いため、例えば、UIの些細な変更で動的な部分が動作しなくなることも多々あります。

変更すべきJava scriptやHTML、CSSなどが近くにまとまっていることで、保守性が高まるというメリットがあります。

既存のソースコードに干渉しない

また、各コンポーネントは、互いのソースコードに干渉しないカプセル化されたコンポーネントとして作成し、それらを組み合わせることで複雑なUIの構築を目指します。

カプセル化とは、ある要素が、別の要素の影響を受けないようにする、という考え方です。例えば、いずれかのコンポーネントに修正を加える必要があった際も、他の影響を考えずに変更できます。

仮想DOM

DOMとは、Document Object Modelの略で、HTML、XMLなどのドキュメントをJava scriptにおいて操作するためのAPIです。仮想DOMは、更新があった際に、DOMの内容をコピーし、差分のみを部分的に更新し、仮にDOMを再構築したもののことです。これらの更新は瞬時にインタラクティブに行われます。

例えば、一人のユーザーがコメントを書き込んだ際、HTMLによってDOMを更新します。ユーザーが複数になると、DOMでは処理速度が遅くなることが想定されます。仮想DOMを用いることで、瞬時にインタラクティブな更新に期待ができます。

Reactを用いた開発のメリット

Reactを用いた開発のメリットについて見ていきます。

・直感的なコード記述でコード量を減らせる

　Reactの開発は、宣言的UIによりコードを記述します。宣言的UIとは、UIの完成形をイメージし、HTMLを書くように、記述することができる手法です。これにより、直感的なコードの記述が可能になると共に、従来よりコード量を減らすことができ、複雑なUIほどその恩恵を得ることができます。

・保守性が高い

Reactでは、コンポーネントごとにまとめて記述されているため、コンポーネントごとの修正が行いやすいです。また、各コンポーネントを粒度高く把握できるため、コンポーネントの改善の際にも役立ちます。

・学習難易度が低い

Java scriptを習得済みの方であれば、学習難易度はそれほど高くありません。

Reactを理解するための重要語句

Reactを理解するために重要な語句について、下記の4つを説明します。

JSX記法

Reactは、Java scriptに直接 HTML、XMLコードを記述可能なJSX記法と呼ばれる記述方法を利用しています。

HTMLと似たような記述方法（下記の例を参照）で、可読性が高いという特徴があります。

・HTMLの記述例

・JSXの記述例

JSX記法によって記述されたコードを、ReactはBabelというJava scriptのコードに変換（コンパイル）して利用します。非推奨にはなりますが、JSX記法を使わずに、Java scriptのコードを直接記述することも可能です。

render

一般的に、レンダリングとは、コンピューターがコードなどを読み取り、映像や音声などを生成することを言います。例えばWebサイトであれば、HTMLやCSSやJava scriptのコードや画像データなどを読み取り、実際にWebサイトを画面に描画することです。

Reactにおいては、コンポーネントを呼び出すことを指します。これにより、ブラウザにDOMが描画されます。

props

propsは、ある一つのコンポーネント（親）から、別のコンポーネント（子）に値を渡す時に用いるオブジェクトです。値を受け取る際は、子コンポーネントの関数の引数にpropsと記述します。値を渡す流れは、親コンポーネントから子コンポーネントと決まっており、子コンポーネントから別のコンポーネントに値を渡すことはできません。

コンポーネントの外から値を与えることで、コンポーネント同士でデータのやり取りを行うことが可能になります。

state

stateとは、英語で状態を意味するように、ユーザーの動きに対してコンポーネントがどのような状態にあるのかを管理するためのオブジェクトです。

例えば、ユーザーがボタンを押した際に、ボタンを押す前と押した後で状態が変化するように設計したとします。その際に、Reactがその変化を検知し、UIを変化させます。このことをデータバインディングと言います。

stateは、一つのコンポーネントの内部で起こっている状態を管理するだけで、別のコンポーネントに値を渡すことはありません。

Reactの開発環境の構築手順

Reactの開発環境の構築手順について見ていきます。

Node.jsのインストール（Windows編）

①公式サイトにアクセスし、ダウンロードWindows(x64)の左側「推奨版」をダウンロードします。

②ダウンロードしたファイルを実行し、「Welcom to the Node.js Setup Wizard」画面で「NEXT」を押下します。

③I accept the terms in the License Agreementにチェックを入れて、「Next」を押下します。

④「Install Node.js to:」でインストール先のフォルダを選び「Next」を押下します。

⑤「Custom Setup」画面ではそのまま「Next」を押下します。

⑥「Tools for Native Modules」の画面中央にあるチェックボックスにチェックを入れて、「Next」を押下します。

⑦最後に、「Install」を押下します。

⑧インストールが完了すると、自動的にコマンドプロンプトが立ち上がります。「キーを押してください」とメッセージが表示されているので、適当なキーを押下します。

⑨Windows PowerShellが立ち上がり、Node.jsのインストールが実行されます。インストールには少々時間を要しますが、「Type ENTER to exit」が表示されたら、「ENTER」を押下し、インストールの完了です。

⑩インストール完了後はコマンドプロンプトで「node -v」と入力してください。「vXX.XX.X」と表示されていれば、インストールは成功です。

Create React Appのインストール

上記Node.jsのインストールが完了したら、「Create React App」のインストールを行います。

①コマンドプロンプトを起動し「npx create-react-app my-app」のコマンドを実行します。「Happy hacking」が表示されていれば成功です。

②そのままコマンドプロンプトに「cd my-app」と入力し、更に「npm start」のコマンドを実行します。

ブラウザで下記のサンプルアプリケーションが表示できれば成功です。

以上で、開発環境の構築は完了です。

はじめは公式チュートリアルがおすすめ

Reactを学習する際は、公式のチュートリアルがおすすめです。

上記で解説してきたprops、stateなどReactの学習に必要な概念を丁寧に解説しています。

また、実際に「三目並べ」の作成を行います。

上記の開発環境の構築を行ってから開発を行っても良いですが、ブラウザ上でも実行できます。

スターターコードの中身を確認する、データを Props 経由で渡す、インタラクティブなコンポーネントを作る、State のリフトアップ①、手番の処理、ゲーム勝者の判定、着手の履歴の保存、State のリフトアップ②、過去の着手の表示、key を選ぶ、タイムトラベルの実装という順番で、Reactを用いた具体的な開発手順を学ぶことが可能です。