概要
- 目的
- ReactおよびRuby on Railsを学習する。
- システム構成
- フロント：React
- サーバサイド：Ruby on Rails
- 開発環境：macOS、Homebrew
- 目標
- リアクティブなWebサイトの開発
- RESTfulなAPIサーバの開発
導入
RubyおよびRuby on Railsのインストール
Rubyのバージョン管理システム(rbenv)のインストール
Homebrewでrbenvをインストールする。
※rvmというバージョン管理システムも存在するが、rbenvの方が後発で評判が良かったので今回はrbenvを使用する。(特に強いこだわりはないです)
$ brew install rbenv
# rbenvとruby-buildがインストールされていることを確認。
$ brew list
$ rbenv init
# Load rbenv automatically by appending
# the following to ~/.bash_profile:
eval "$(rbenv init -)"
# rbenv init コマンドの指示通り~/.bash_profileに1行追加する。ターミナルを再起動する。
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
# rbenvが正しくインストールされているか確認する。
$ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash
Rubyのインストール
# 利用可能なRubyのバージョンを確認する。
$ rbenv install -l
# 任意のバージョンのRubyをインストールする。
$ rbenv install 2.4.1
# インストールできたか確認する。
$ rbenv versions
* system (set by /Users/xxx/.rbenv/version)
2.4.1
# rbenvの再読み込み ※rehash要調査。$ rbenv rehash
# 使用するバージョンを設定する。(global)
$ rbenv global 2.4.1
# バージョンが切り替わったことを確認する。
$ rbenv versions
system
* 2.4.1 (set by /Users/xxx/.rbenv/version)
$ ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin16]
Ruby on Railsのインストール
bundlerのインストール
bundlerをインストールする。
# bundlerをインストールする。Ruby on Railsのインストール
$ gem install bundler
# bunderがインストールされたか確認する。
$ gem list --local
$ bundle -v
Bundler version 1.15.4
Ruby on Railsプロジェクトを作成する。
$ mkdir project
$ cd project
$ bundle init
Writing new Gemfile to /path/to/project/Gemfile
# Gemfileを編集する。
$ vi Gemfile
$ cat Gemfile
source "https://rubygems.org"
gem "rails"
# railsをインストールする。Ruby on Railsの起動
# 注意：プロジェクト内にGemをインストールする場合は、--pathオプションをつける必要がある。
# --pathオプションをつけないとシステムにインストールされる。
$ bundle install --path vendor/bundle
$ bundle exec rails new .
# Gemfileを上書きするか聞かれるので、そのまま上書きする。
# Railsを起動する。ブラウザで、http://localhost:3000にアクセスしてRailsの画面が表示されていることを確認する。
$ bundle exec rails server
※Railsを停止する場合は、ターミナルでCtrl-Cを実行する。
参考
- rbenv/rbenv: Groom your app’s Ruby environment
- Bundler概要 - Qiita
- システムのgemにrailsをインストールせずrails newする - Qiita
- railsでbundle installする時にインストールパスを指定 - Qiita
Reactの導入
Railsへreact-railsを導入する。Webpackerのインストール
$ vim Gemfile
$ cat Gemfile
(snip)
# Use Webpacker
gem 'webpacker', '~> 3.0'
(snip)
$ bundle installwebpackerでreactをインストールしようとすると、yarnが必要とエラーが出る。
$ bundle exec rails webpacker:install
Webpacker requires Yarn version >= 0.20.1. Please download and install the latest version from https://yarnpkg.com/lang/en/docs/install/
yarnをインストールする。
$ brew install yarn
$ which yarn
/usr/local/bin/yarn
$ yarn --version
0.27.5
※後で確認したら、bin/にyarnが入っていたので、webpackerがbin/yarnを参照できていなかった？→設定漏れかもしれないので要調査
webpackをインストールする。
$ bundle exec rails webpacker:install
# サンプル用のページを作成
$ bundle exec rails g controller sample index
$ bundle exec rails s
ブラウザでhttp://localhost:3000/sample/indexにアクセスして、scriptタグが複数あることを確認する。(/assetsディレクトリ)
※webpackにより、これらがまとめられることを後で確認する。
以下のように編集する。
$ vi app app/views/layouts/application.html.erb
- <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
$ bundle exec rails s
ブラウザでhttp://localhost:3000/sample/indexにアクセスして、scriptタグがまとめられていることを確認する。(/packディレクトリ)
ブラウザの開発ツールからコンソールを開き、「Hello World from Webpacker」と表示されていることを確認する。
Reactのインストール
$ bundle exec rails webpacker:install:react
以下を追加する。
$ vi app app/views/layouts/application.html.erb
+ <%= javascript_pack_tag 'hello_react' %>
$ bundle exec rails s
ブラウザでhttp://localhost:3000/sample/indexにアクセスして、Hello React!が表示されていることを確認する。
以上で、Ruby on RailsにReactを導入する作業の完了。
- reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
- Rails5+webpacker+Reactを試してみた - Qiita
- Rails5.1から追加されると噂のWebpackerを使ってReact.jsを動かす。 - Qiita
GitHub
- neogym/react-practice ※随時更新(本記事は、コミット51bec08の時点のもの)
以上
