Reactの特徴とメリットとは？実際のコードを交えながら基本を解説

2022.07.08

ラボ型・オフショア開発

安藤大海

はじめに

こんにちは。
Webディレクターの安藤です。
以前にモダンなweb技術の解説シリーズとして、Vue.jsの解説をお送りしました。今回はReact.jsについて解説しようと思います。

前回のVue.jsの解説同様、jQueryくらいしか触ったことがないデザイナー、コーダーの方でも大丈夫です！
デモコードを見ながら、特徴とメリットについて紹介していきますので、ぜひこの機会にチェックしてみてください。

Reactとは

Reactとは、Javascriptを用いたView（UI・見た目）に作用するライブラリです。FacebookやInstagramを運営するMeta社（当時Facebook社）が開発し、今ではオープンソースとして世界中で使われています。
以前、こちらの記事では「フレームワーク」という言い方で統一していましたが、公式にはライブラリなのですね。

ちなみに、Reactをベースに開発されたJavascriptフレームワークがNext.jsになります。

Reactの3つの特徴

Reactが持つ特徴として、公式サイトでは、以下の3つが挙げられています。

ただ、これがちょっとわかりづらいので、噛み砕いて解説していきます。

宣言的なView（Declarative）
コンポーネントベース（Component-Based）
一度学習すれば、どこでも使える（Learn Once, Write Anywhere）

宣言的なView（Declarative）

いきなりちょっと馴染みのない言葉がでてきました。
言い換えると、「《こうしたい状態を定義する》だけで実装できる」という感じです。

もう少し順序立てて説明します。

《Declarative》の対義語は《Imperative》になります。これは《命令的・指示的》という意味です。
「従来のJavascriptが命令的であり、それに対しReactは宣言的である」、ということになります。
そこで、同じ実装を従来のJavascriptとReactの書き方を比較してみてみましょう。

以下は、ブラウザでh1タグで囲った「Hello World!」のテキストを表示する、というデモです。

参考：From JavaScript to React | Learn Next.js

従来のJavaScript

<!— index.html —>
<html>
  <body>
    <div id=“app”></div>

    <script type=“text/javascript”>
      // JSが動作する範囲div#appを定義する
      const app = document.getElementById(‘app’);
      // h1を作る
      const header = document.createElement(‘h1’);
      // h1の中にいれるテキストを定義する
      const headerContent = document.createTextNode(
       'Hello World!',
      );
      // h1の中にテキストをいれる
      header.appendChild(headerContent);
      // app#devの中に、テキストが入ったh1をいれる
      app.appendChild(header);
    </script>
  </body>
</html>

React

<!— index.html —>
<html>
  <body>
    <div id=“app”></div>

    //Reactを読み込む
    <script src=“https://unpkg.com/react@17/umd/react.development.js”></script>
    <script src=“https://unpkg.com/react-dom@17/umd/react-dom.development.js”></script>
    //ReactのJSX記法をブラウザが理解できる記法に変換する"Babel"を読み込む
    <script src=“https://unpkg.com/@babel/standalone/babel.min.js”></script>

    //JSX記法でReactの記述
    <script type=“text/jsx”>
      //Reactが動作する範囲dev#appを定義する
      const app = document.getElementById(‘app’);
      //dev#appの中にh1で囲ったテキストをいれる
      ReactDOM.render(<h1>Hello World!</h1>, app);
    </script>
  </body>
</html>

いかがでしょうか。
従来のJavascriptでは、一つ一つ順序立てて記述しなければなりません。これが《命令的・指示的》ということになります。
対してReactでは、動作そのものの記述はたった2行です。
1行目の動作する範囲の指定は、従来のJavascriptと変わりませんが、
2行目の状態を定義する記述だけで、実装は完結しています。

このデモはシンプルなので、従来のJavaScriptの記述でも理解できる範疇ですが、実際の開発はもっと複雑です。
そうなると、

長文化して他人が理解しづらくなる
実装・テスト工数が増える
後からの変更が大変

というデメリットが想像できるかと思います。

対してReactの記述はシンプルになり、従来のJavaScriptにおける上記のデメリットが大幅に改善できます。

コンポーネントベース（Component-Based）

Reactでは、部品ごとにコンポーネントとして分けて定義することで、管理やカスタマイズがしやすくなっています。
従来のJavaScriptでは一部を変更したいだけなのに全体に手を入れなければいけなかった面倒な作業が解消され、改修や管理、再利用性を高めることができます。
例えば、公式サイトのチュートリアルにある、こちらのデモをみてみましょう。
https://codepen.io/gaearon/pen/oWWQNa?editors=0010

まず、四角ボタンをSquareというコンポーネントとして定義しています。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

実際の見た目では、Squareは3×3で配置されていますね。
下の記述をみてみましょう。

Squareを中で繰り返すBoardコンポーネントを定義し、

class Board extends React.Component {
  render Square(i) {
    return <Square />;
  }

そして、Boardコンポーネントの中に再利用した四角ボタン（Square）を、3×3で配置しています。

render() {

    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

このように再利用性を高められるということは、大規模な開発の際には、保守性を高め、開発負担を下げるということにもつながります。

一度学習すれば、どこでも使える（Learn Once, Write Anywhere）

React.jsを学ぶことで、スマホアプリ開発にも使われるフレームワーク「React Native」にも応用ができます。
また、開発の途中から利用されることを想定して作られているため、新しい機能を追加する場合でも、既存のソースコードとの干渉を避けて開発することが可能です。

Reactを導入するメリット

それではReactを導入することで、具体的にどんなメリットがあるか解説していきます。

仮想DOMにより、差分のみをレンダリングするから高速

ReactもVue.jsと同様に仮想DOMを使って動く仕組みです。
仮想DOMは、《DOMをJavascriptの要素として扱い、管理するもの》です。
DOMとは、《JavascriptでHTML・CSSの状態を操作し、ブラウザに描画する仕組み》です。
仮想DOMはDOMの仮想版ですから、実際に描画まではしません。

ユーザーが画面操作を行うと、Reactは変更前・変更後の2つの仮想DOMを用意して比較し、変更した差分のみを実際のDOMに渡して反映します。
そのため、ブラウザの描画は差分のみで済むのでパフォーマンスが向上、高速化することができるというわけです。

SPA開発ができる

仮想DOMを駆使することで、SPA（＝シングル・ページ・アプリケーション）開発が可能です。

シングル・ページ・アプリケーションとは、同じURLのままで、他のページに遷移しているような画面表示を提供する技術です。

従来はコンテンツを切り替える際に都度サーバーがHTMLをブラウザに返していましたが、SPAの場合は初回のページ表示地のみで、以降のコンテンツの切り替えは、仮想DOMを駆使することで、差分のデータだけを反映します。

規模が大きい開発ほど、再利用性・開発効率が向上できる

先程の特徴でも触れた通り、Reactはコンポーネントベースで開発されています。

従来では、同じようなパーツを複数のページに実装する場合、何度も同じ記述を書かなければなりませんでしたが、既存のコンポーネントを使い回すことで、再利用性、開発効率を高めることができます。

小規模な開発ではコンポーネントを利用しなくても大きな差は出ないかもしれませんが、規模が大きい開発ではコンポーネントを利用しないと複雑化し、実装・テスト工数が増えてしまいます。

またReactの特徴である宣言的な書き方は、従来のJavascriptの書き方より記述が短くて済み、どのような動きをするのかが理解しやすいため、規模が大きい開発ほど、開発効率の向上に一役買ってくれるでしょう。

応用の幅が広い

Reactを学習すれば、スマホアプリ開発にも使われるフレームワーク「React Native」にも応用ができますし、Reactは世界でシェアの多いライブラリなので、それ以外でもNext.jsを筆頭に、さまざまなフレームワークを利用できるようになります。
その点では、Vue.jsやAngularよりも応用の幅が広いといえるでしょう。

まとめ

今回は、デモを交えてReactの特徴や導入するメリットをご紹介しましたが、いかがでしたでしょうか。

Wakka Inc.はWeb・アプリ・業務系のシステムのラボ型開発が得意な会社です。今回ご紹介したReactの知識豊富なメンバーも多数在籍しています。

UI・UXにこだわりながら開発したい、フロントエンドからサーバーサイドまで対応できる会社を探している、DXや新規事業で伴奏してくれる開発パートナーが欲しい等のニーズがございましたら、お力になれるかと思いますので、まずはお気軽にお問合せください。

弊社の事例・ノウハウについて詳しく知りたい方は「資料ダウンロード・ウェビナー一覧」もぜひご覧ください。

お問い合わせはこちら

この記事を書いた人