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

はじめに

こちらのページで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】RSpecを使った自動テスト《システムスペック編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月11日 17:07
【Rails】RSpecを使った自動テスト《リクエストスペック編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月11日 16:06
【Rails】RSpecを使った自動テスト《コントローラースペック編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月11日 15:39
【Rails】RSpecを使った自動テスト《基本編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月10日 17:49
【Rails】デザインパターン「Concern」の基本情報と実装方法
# はじめに Ruby on RailsなどのMVCフレームワークで構築したWebシステムにはアンチパターンというものが存在します。システム開発におけるアンチパターンとは、避けるべき悪い設計や実装方法のことを指します。 MVCフレームワーク [...]
2024年7月10日 13:32
【Rails】デザインパターン「Form Object」の基本情報と実装方法
# はじめに Ruby on RailsなどのMVCフレームワークで構築したWebシステムにはアンチパターンというものが存在します。システム開発におけるアンチパターンとは、避けるべき悪い設計や実装方法のことを指します。 MVCフレームワーク [...]
2024年7月6日 22:50
【Rails】デザインパターン「Service Object」の基本情報と実装方法
# はじめに Ruby on RailsなどのMVCフレームワークで構築したWebシステムにはアンチパターンというものが存在します。システム開発におけるアンチパターンとは、避けるべき悪い設計や実装方法のことを指します。 MVCフレームワーク [...]
2024年7月6日 19:59
【Rails】Dockerを使用してRuby on Railsの開発環境を構築
# はじめに Ruby on Railsは強力なWebアプリケーションフレームワークですが、開発環境の構築には時間がかかることがあります。特に、チーム全体で一貫した環境を維持することは困難な場合があります。 Dockerを使用することで、R [...]
2024年7月5日 18:49