2021年9月27日 現場Rails Chapter8 React
Reactとは
Facebook社が開発しているJavaScriptのUIライブラリです。Reactは仮想DOMと呼ばれるデータ構造をメモリ上に持ち、ページ変化の差分のみをレンダリングすることで効率的にページを表示・更新する事ができるという特徴があります。
※UIライブラリとは、 いくつかの種類のあるUI(ユーザーインタフェース)を実現するための集合体です。
DOMとは?
仮想DOMとは
仮想DOMは本当に“速い”のか? DOM操作の新しい考え方を、フレームワークを実装して理解しように詳しく解説されているので、以下に引用します。
仮想DOMは、ブラウザが持っていたDOMツリーを、JavaScriptのオブジェクト(仮想DOMツリー)として表現します。そして、メモリ上の仮想DOMツリーを用いて差分検知を行い、必要最低限の差分のみをリアルDOMに反映するため、一般的にパフォーマンスが向上すると言われています。
仮想DOMを用いたDOM動作の流れ
- 仮想DOMツリーを2種類用意(変更前後の2種類)
- データの変更を検知
- 仮想DOMを再構築
- 変更前後の仮想DOMツリーを用いて差分検知する
- 差分があった箇所だけ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操作の新しい考え方を、フレームワークを実装して理解しよう