6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年9月27日 現場Rails Chapter8 React

Reactとは

Facebook社が開発しているJavaScriptのUIライブラリです。Reactは仮想DOMと呼ばれるデータ構造をメモリ上に持ち、ページ変化の差分のみをレンダリングすることで効率的にページを表示・更新する事ができるという特徴があります。

UIライブラリとは、 いくつかの種類のあるUI(ユーザーインタフェース)を実現するための集合体です。

画像引用

DOMとは?

DOMとは、HTMLやXMLのような文書をプログラムを通して、直接オブジェクトを変更できるインターフェイスのことです。

仮想DOMとは

仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しように詳しく解説されているので、以下に引用します。

仮想DOMは、ブラウザが持っていたDOMツリーを、JavaScriptのオブジェクト(仮想DOMツリー)として表現します。そして、メモリ上の仮想DOMツリーを用いて差分検知を行い、必要最低限の差分のみをリアルDOMに反映するため、一般的にパフォーマンスが向上すると言われています。

仮想DOMを用いたDOM動作の流れ

  1. 仮想DOMツリーを2種類用意(変更前後の2種類)
  2. データの変更を検知
  3. 仮想DOMを再構築
  4. 変更前後の仮想DOMツリーを用いて差分検知する
  5. 差分があった箇所だけDOMに反映する

画像引用

Reactのインストール

ブラウザ上で実行するにはReactDOMも必要になるので次のようにインストールします。今回、本書ではyarnでインストールしていますが、npmでもインストール可能です。

$ bin/yarn add react react-dom

app/javascript/taskleaf/hello.js

import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', () =>{
  ReactDOM.render(
    React.createElement('div', null, 'Hello World'),
    document.body.appendChild(document.createElement('div')),
  );
});

エントリポイントapp/javascript/packs/application.jsで、先ほど作成したtaskleaf/hello.jsモジュールをimportします。 (エントリポイントとは、WebブラウザからJavaScriptで読み込ませるための基点です。)

import 'taskleaf/hello';

javascript_pack_tagヘルパーメソッドを記述していなければ、共通レイアウトファイルapp/views/layouts/application.html.erbに次のように記述します。

<%= javascript_pack_tag 'application' %>

エントリポイントとは?

エントリーポイントとは、WebブラウザからJavaScriptで読み込ませるための基点のことです。 webpackerでは、app/javascript/packs/application.jsをデフォルトで、エントリーポイントとしています。packsディレクトリ配下に入れるファイルは、エントリーポイントとなるファイルになります。

app/javascript/
├── javascripts
│   ├── a.js
│   └── b.js
├── packs
│   └── application.js # エントリーポイント。a.js, b.js, c.cssを1ファイルにまとめたファイル。
└── stylesheets
    └──c.css
    └──application.css

app/javascript/packs/application.js」をエントリーポイントとする場合は、

<%= javascript_pack_tag 'application' %>

で、Viewから呼び出すことができます。ここで記述しているapplicationは、エントリポイント名です。このように記述することで、application.jsというエントリポイントであるファイルから、JSやCSSをビュー側で読み込ませることが出来るのです。

Railsでモダンなフロントエンド環境を手に入れる

JavaScriptライブラリを利用するのに、今まではGemやSprocketsを使用しました。しかし、これらを使用せずに、yarn(npm)とWebpackerを使用することで、"最新のJavaScriptパッケージ" や "モダンなフロントエンド環境" を手に入れられます。

参照

仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう

新人フロントエンドエンジニアが仮想 DOM について色々調べてみた

npm

【Rails入門】Webpackerではじめるフロントエンド開発!Rails5.1対応 | 侍エンジニアブログ