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】M1チップ搭載MacでRuby on Railsの開発環境構築
# はじめに M1チップ搭載MacにRuby on Railsの開発環境を構築する手順を記載します。 - MacBook Air (M1, 2020) - macOS Monterey 12.3.1 # Homebrew ## [...]
2022年5月5日 11:56
【Rails】Rakeタスクの基本情報と作成・実行方法
# はじめに Railsには標準でRakeというGemが同梱されています。RakeはRubyで実装されたMake(UNIX系のOSで使用できるコマンド)のようなビルド作業を自動化するツールです。Ruby Make、略してRakeというわけですね。 [...]
2022年3月7日 22:12
【Rails】Capybaraのfill_inメソッドを実行すると「既存レコードの内容+指定した内容」がセットされる事象の原因と対処【RSpec】
# はじめに RSpec + Capybaraを使用して、Railsアプリの統合テストを実装しています。とあるモデルの編集画面において、入力フォームの内容を書き換えた上で送信し、レコードが更新されることを確認します。 入力フォームの内容を書 [...]
2022年1月27日 21:22
【Rails】GitHubのセキュリティアラートで発見された脆弱性を解消する方法
# はじめに GitHubにはセキュリティアラートという機能があります。セキュリティアラートはリポジトリに含まれるライブラリやパッケージの脆弱性を定期的にチェックし、脆弱性のあるライブラリやパッケージが発見されたらアラートで知らせてくれるという機 [...]
2022年1月16日 10:36
【Rails】devise-two-factorを使った2段階認証の実装方法【初学者】
# はじめに Railsアプリで2段階認証を実装するには、「rotp」というGemを使う方法の他に、「devise-two-factor」というGemを使う方法があります。「devise-two-factor」はその名の通り、IDとパスワードによ [...]
2021年12月12日 17:58
【Rails】rotpを使った2段階認証の実装方法【初学者】
# はじめに 昨今はIDとパスワードによる認証だけでなく、ワンタイムパスワードによる2段階認証を導入するWebアプリが増えてきました。Railsで作成したWebアプリでも、IDとパスワードによる認証に加えて2段階認証を導入するニーズが高まっていま [...]
2021年11月27日 13:02
【Rails】deviseを使った認証機能の実装【初学者】
# はじめに Railsアプリに認証機能を導入するには「devise」というGemを使う方法が最も簡単です。「devise」は認証に係る機能をほとんどコードを書くことなく実装できる反面、処理がブラックボックス化されており、全容が把握しづらいという [...]
2021年11月27日 13:01
【Rails】IDとパスワードによる認証機能の実装【初学者】
# はじめに 大抵のWebアプリでは、ユーザー登録/解除、ログイン/ログアウトといった認証機能を持っています。Railsには簡単に認証機能を導入できる「device」というGemが用意されています。「devise」は多くのRailsアプリで使われ [...]
2021年11月27日 13:00