2024.10.25
CDKテンプレートを無料で試行錯誤する為にAWSのエミュレータをインストールした
2017.12.01
プログラミングRuby on RailsでReact開発をしてみました!
カナダから来たCanadian Devです。初めての投稿です。よろしくお願いします。バックラウンドがRubyなので、記事の内容は主にRuby on Railsになるかなと思います。
今年Rails 5.1が公開されて、新しい特徴がいろいろ導入されました。特に、Webpackerという機能がRailsに導入されました。このgemの導入によって、RailsとともにReactとAngularのようなJavaScriptモジュールを使えるようになります。
RailsはもともとMPA(Multi-Page Application)が得意なフレームワークですね。RailsはjQueryやCoffeescriptなどでライブDOM変更ができるんですが、今までReactとAngularのような流行ったテクノロジーのサポートがありませんでした。そもそもマルチページアプリケーションが得意なRailsはReactのようなシングルページアプリケーションのモジュールと統合できるでしょうか?ReactもAngularもRailsにないライブ読み込みをするし、Railsにないwebpackというアセット用バンドラーが必要です。webpack機能はRailsがサポートできるのでしょうか?やってみたら、意外と簡単で楽しく使えます!
webpackerはRailsでwebpackバンドラーが使えるようにするgemです。設定はとても簡単です。Railsアプリには、
bundle install
rails webpacker:install
rails webpacker:install:react
最初からwebpackerが付いている新しいRailsアプリを作りたいなら、さらに簡単です。例えば、Reactを統合したいんだったら下記のコマンドのように指定します。
rails new アプリの名前 --webpack=react
webpackの一つの特徴はライブ読み込みなので、Railsもその特徴を導入しています。別のターミナルで
./bin/webpack-dev-server
を実行すると、Railsサーバーとともにwebpackのライブ読み込みサーバーが立ち上がります。
では、webpackがインストールできたので、これからRailsがReactと繫がるように設定しましょう。
webpackerのgemを導入したことで、app/javascript
という新しいフォルダが作られます。その中にpacks
というフォルダが存在して、そこで全てのReactコンポーネントがコンパイルされます。Rails 5.1から新しいjavascript_pack_tag
というタグがあって、そのタグでRailsがReactと繫がります。下記の二つのことを行いましょう。(spreadsheet
は例の名前で、ファイル名は自由に変えてください。)
app/javascript
フォルダの中にspreadsheet
フォルダを作成します。app/javascript/packs
フォルダの中にjs
ファイルを作成します。例えば、spreadsheet.js
を作成して、そのファイルの中に
import 'spreadsheet'
を記述します。spreadsheet.js
ファイルにimport 'spreadsheet'
を指定したことでRailsがspreadsheet
というフォルダの中のコンポーネントを読み込みます。
app/javascript/spreadsheet
フォルダの中にReactと同じようにindex.js
というファイルとコンポーネントを作成します。import React, { Component } from 'react'; class Spreadsheet extends Component { render() { return ( <div> <h1>動いています!</h1> </div> ) } } export default Spreadsheet;
index.js
ファイルにはコンポーネントの正しいパスが指定してあるのかを確認してください。
import React from 'react'; import ReactDOM from 'react-dom'; import Spreadsheet from './Spreadsheet'; document.addEventListener('DOMContentLoaded', ()=> { const container = document.body.appendChild(document.createElement('div')); ReactDOM.render(<Spreadsheet/>, container) }
最後に、javascript_pack_tag
でReactのコンポーネントをビューに渡します。読み込ませたいpack
ファイルをタグで指定して、head要素に必ず入れてください。
<!DOCTYPE html> <html> <head> <title>Rails 5.1 app</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'spreadsheet' %> </head> <body> ... </body> </html>
これでRailsフレームワークでReact開発ができるようになります。Reactだけではなく、AngularもVueもサポートしているので、Rails 5.1でいろいろな楽しい開発ができるでしょう。
That’s all, folks!
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索