RailsアプリにおけるReactの使い方や注意点など

2019年12月13日 12:37

はじめに

こちらのページでReactの基本について勉強しました。
Railsアプリの中でReactを利用するという観点でいくつかトピックを抜き出してみました。

Babelの利用

BabelはReactのJSX記法を典型的なJavaScriptの構文に変換してくれる機能です。
Babelは本来、ES6で書かれたJavaScriptをES5やES4に変換するために使われますが、ReactでのBabelは@babel/preset-reactによってJSX記法を変換する機能を持たせている…のだと思います。
Webpackを使ってReactをインストールしている場合、Webpackのコンパイル時にBabelによるトランスパイルを行うようWebpackのバンドリングルールに設定されています。

ReactDOM

app/views/sample/index.html.erb

<h1>Sample#index</h1>
<p>Find me in app/views/sample/index.html.erb</p>

<%= react_component("Hello", { name: "John" }) %>
<div id="hello"></div>

app/javascript/components/Hello.js

import React from "react"
import PropTypes from "prop-types"
import ReactDOM from "react-dom";

export default class Hello extends React.Component {
  render () {
    return (
      <h1>Hi, {this.props.name}!</h1>
    );
  }
}

Hello.propTypes = {
  name: PropTypes.string
};
Hello.defaultProps = {
  name: "Jane"
}

const hello = document.getElementById('hello');
ReactDOM.render(<Hello />, hello);

ReactDOMを使うことで任意の場所でコンポーネントを実行することが可能です。
上記の場合、HTMLから直接Helloコンポーネントを呼び出して引数を与えており、ReactDOMで生成されたHelloコンポーネントはデフォルトの変数が使われています。
export default <コンポーネント名>を記述することで外部からの呼び出しが可能になります。

1

実行結果。

wepack-dev-serverの利用

Webpack管理下(app/javascript/)のファイルを更新した状態でRailsアプリを実行したタイミングでWebpackerによりWebpackのコンパイルが実行されます。
webpack-dev-serverを起動しておけば、Railsアプリを実行しなくても自動でWeb管理下の更新を検出してコンパイルしてくれます。

$ bin/webpack-dev-server

コンポーネントの階層

コンポーネントに階層をもたせることができます。
app/javascript/components/Hello.jsapp/javascript/components/Greeting/Hello.jsに変更した場合、呼び出し側は以下のように記述します。

<%= react_component("Greeting/Hello", { name: "John" }) %>

まとめ

Reactは最新のJavaScript構文がふんだんに使われているので、まずJavaScript構文を勉強し直す必要があると感じました。匿名関数、let宣言、{name}、ここらへんの構文は見たことはあっても説明はできない状態です。JavaScriptの基本から勉強し直そうと思います。
それから、まだReactの基本しか勉強してないからかもしれませんが、Railsアプリの中でReactを使うメリットがいまのところ見つかっていません。Railsの考え方はMVCなので、ReactのSPA的な考え方と相反するような気がしています。

関連記事

【Rails】ダウンロードしたフリーフォントをWebpackerを使って導入する方法
# はじめに Webサイトのデザインを彩るひとつの要素にフォントの種類があります。Google Fontsの登場により、様々なフォントが手軽に導入できるようになりました。しかし、世の中にはGoogle Fontsが提供するフォント以外にもたくさん [...]
2021年10月16日 13:26
【Rails】mimemagicに依存しているRailsアプリでbundle installコマンドが失敗する事象の対処法
# はじめに Railsアプリで`bundle install`コマンドを実行しようとしたところ、以下のエラーメッセージが出力されコマンドに失敗しました。 ``` Your bundle is locked to mimemagic (0 [...]
2021年10月14日 14:44
【Rails】macOSのアップデート後にrailsコマンドが失敗する事象の対処法
# はじめに 久しぶりにRailsアプリに手を入れようと思い、`rails server`コマンドを実行してRailsサーバーを立ち上げようとしたところ、エラーが出て起動に失敗してしまいました。 前回までの間にしたことの中で思い当たることと [...]
2021年10月14日 12:11
【Rails】Railsアプリのデバッグ《マルチデバイス篇》
# はじめに 近年のWebアプリはレスポンシブ対応が当たり前になっています。最低でもPCとスマートフォンに対応したデザイン、ときにはその中間のタブレットに対応したデザインなんかも作成する必要があります。 Webアプリの開発はPCを使って行う [...]
2021年5月23日 13:02
【Rails】Railsアプリのデバッグ《Better Errors篇》
# はじめに Railsアプリの開発中になんらかのエラーが発生すると、デフォルトでは以下のような画面が表示されます(画像をクリックすると拡大します)。 <a class="gallery" data-group="gallery" href [...]
2021年5月22日 19:42