macroroblog

最近、自分で作っているポートフォリオがあるのですが、フロントをオシャレな感じで仕上げたいな〜という欲が出てきたので、前から興味のあったreactを使って少しモダンな見た目にしています。そこで今回はrailsにreactを導入してみましょう！という記事です。

本記事のテーマ

railsにreactを導入してみよう

①reactとは

Reactは、Facebookとコミュニティによって開発されているユーザインタフェースを構築するためのJavaScriptライブラリである。React.jsまたはReactJSの名称でも知られている。 Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。

ウィキペディア

reactは最近流行りのフロントを実装するjavascriptのライブラリーです。

reactはcomponentという単位で部品を作っていきそれらを複合させて一つのアプリケーションを構築していくフアプリケーションレームワークです。さらにreduxなどを用いれば非同期処理がスムーズに行えるなどの特徴があり、現在では多くの企業がどんどん取り入れてきています。

②react_on_railsの導入

今回はそんなreactをrailsアプリケーションのフロント側で使っていくための手順をみていきます。

まず、railsでreactを使う方法は主に3つあります。

それぞれに違いがあるのですが、簡単いうとgemを使うとrailsにより依存します。

最近のトレンドである、マクロサービスのアーキテクチャーを考えると、最終的にはサーバー側とフロント側を完全に分離した方がスケーリングするにも、保守するにも良さげです、、

なので、いつかは分離したいですが、reactの環境など諸々とやらなければ行けなくなるので、今回はgemを使ってreactを導入していきます。

で、reactを使えるようにするgemは2つあるのですが、それぞれの違いとしてはreact_railsの方はrailsにかなり依存するということです。私自身最終的には、分離させたいので今回は依存が少ないreact_on_railsを使いたいと思います。

では導入方法、まずはおきまりのgemのインストールですね。。

gem 'react_on_rails'

するとjsに関するファイルがいくつか作られますが、注目するのはapp/javascript配下のディレクトリ群です。

おそらくbundlesとpacksというディレクトリが作られていると思います。react componentを作成するのは

app/javascript/bundles/HelloWorld/components

内にjsxファイルを作成してください。

コンポーネントをrailsのview内で使えるようにするために、そのコンポーネントを登録する必要があります。

その登録するファイルが

app/javascript/bundles/HelloWorld/packs/helloworld/bundle

です。ここまでできれば、あとはコンポーネントをrailsのviewで使うだけです。react_on_railsをインストールするとcomponentを挿入できるヘルパーが使えるようになります。

<%= react_component("Button", props: @hello_world_props, prerender: false) %>

上記の例はButtonというcomponentをviewで使用したい時の例です。

react_componentというヘルパーが使えるようになるので、その中でcomponentを定義すれば良いです。これでreactで作成したbuttonが利用できるようになると思います。

③railsアプリケーションでcomponentを出力してみよう

それでは実際にcomponentを作ってviewで出力してみましょう。

今回はreactので使えるmaterial UIというライブラリーを使ってheaderを作成してみましょう。react_on_railsをインストールしたら、material UIをインストールしましょう。

npm install --save material-ui

これでmaterial UIが使用できるようになります。今回はheaderコンポーネントを作りました。

出来上がりはこんな感じです。

今私が作っているアプリなのですが、reactを使うと上の画面のようなheaderをcomponent単位で作成することが可能になります。componentを使いまわしたり、部分的に変更を加えてたりすることが可能なのでとても便利ですね。

では、今回のheaderのコードをみていきます。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import Create from '@material-ui/icons/Create';
import DirectionsRun from '@material-ui/icons/DirectionsRun';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MoreVertIcon from '@material-ui/icons/MoreVert';


const styles = {
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: 10,
  },
  menuright: {
    marginLeft: 900,
  },
};

function Header(props) {
  const { classes } = props;
  return (
     ここに描画するコンポーネントを表示する
  )
}

Header.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Header);

(return内の一番大事な部分が編集上うまく表示されなかったので、material UI のリファレンスを参照してください)

https://material-ui.com/(material UIリファレンス)

こちらのリファレンスの左のタブにあるcomponent Demosにたくさん使用できるcomponet一覧があるのでそちらから使いたいものを使用してください。

こちらはHeader.jsxというファイルで作成しています。まず上層部にでたくさんインポートしているのはmaterial UIで使いたい部品をインストールしています。

次の、constで定数を定義している部分がcssになります。その下のrender関数内で実際に出力したいコンポーネントの中身を作成していきます。ここまでできたら、あとは先ほど説明したようにコンポーネントを登録していきます。

import ReactOnRails from 'react-on-rails';

import Header from '../bundles/HelloWorld/components/Header';

ReactOnRails.register({
  Header,
});

こんな感じです。コンポーネントをインポートしたあとReactOnRails.registerで登録してください。

ここまでできたら、あとはviewでreact_componentヘルパーを使ってあげるだけです。

流れとしては、

こんな感じです。簡単ですね。

まとめ

今回はreact_on_railsを使用して、railsアプリケーションにreactを導入する方法を説明しました。

フロントの移り変わりは激しいですが、reactはまだまだこれからも使われつづけていくと考えられるので、railsでアプリケーションを作成している方はこの際に是非railsに取り入れてみてください！