railsにreactを導入してみよう

最近、自分で作っているポートフォリオがあるのですが、フロントをオシャレな感じで仕上げたいな〜という欲が出てきたので、前から興味のあった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つあります。

  • 「react_rails」gemを使う
  • 「react_on_rails」gemを使う
  • railsをサーバー側で、reactをフロント側で完全分離して使う
  • まとめ
  • それぞれに違いがあるのですが、簡単いうと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ヘルパーを使ってあげるだけです。

    流れとしては、

    1. componentを作成
    2. componentを登録
    3. ヘルパーを使って出力

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

    まとめ

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

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

    エンジニアとしての働き方前のページ

    GCPの基本概要次のページ

    関連記事

    1. プログラミング

      Dockerとは

      こんにちは、まくロロです。最近インフラ周りに興味が出てきて、今後do…

    2. プログラミング

      GCPの基本概要

      今回はGCP(Google cloud platform)について基…

    3. プログラミング

      dockerを使ってGolangの環境構築

      こんにちは、まくロロです。最近はサーバーをGo、フロントにR…

    4. プログラミング

      react-reduxの基礎

      こんにちは、マクロロです!季節も巡り、もうすぐ夏がきますね。。…

    5. プログラミング

      未経験エンジニア学習順序【アプリリリースまで】

      こんにちはまくロロです。今回は、未経験から一人でサービスをリ…

    6. プログラミング

      jQueryの基本を学ぼう

      こんにちは、まくロロです。アニメーションを実装する際によく使…

    コメント

    1. この記事へのコメントはありません。

    1. この記事へのトラックバックはありません。

    最近の記事

    PAGE TOP