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】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
【Rails】Railsアプリのデバッグ《byebug篇》
# はじめに Ruby on Railsに限りませんが、アプリの開発中にはエラーは付き物です。なにかしらのエラーが発生したときに、エラーの原因を特定しエラー箇所を修正することをデバッグと言います。Railsではデバッグの手助けとなる機能があらかじ [...]
2021年5月22日 15:30
【Rails】レンダリング(renderメソッド)でアンカー指定を行う
# はじめに 通常、Railsでアンカー付きのリクエストを発生させるには`redirect_to`を使います。 ```rb redirect_to root_path(anchor: 'target') ``` では、`rende [...]
2021年5月20日 10:47
【Rails】Bundler 2.2.x以降は開発者が適切なプラットフォームを追加する必要がある
# 事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash # 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle ch [...]
2021年5月18日 16:18