React on Rails で hello world してみる

Rails React

お久しぶりです。

最近は、Vue.js を触っていましたが React.js というやつも触れてみたかったのでやってみました。

今回は環境を作って、hello world をするところまでです。

やりたいことリスト

  • React を使う（Rails の中で）
  • ES6 も使う（JSXも触ってみたい）
  • Sprockets でコンパイルする
  • npm で JSライブラリを管理する

Gem 追加

Sprockets で ES6 もいい感じにコンパイルしてもらうために、browserify-rails という gem を追加します。

Gemfile

gem 'browserify-rails'

config/application.rb

config.browserify_rails.commandline_options = '-t babelify --extensions .es6'

npm (package.json) の準備

{
  "name": "react_on_rails",
  "dependencies": {
    "babelify": "^6.4.0",
    "browserify": "^13.1.1",
    "browserify-incremental": "^3.1.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

※最新版の babelify(7.3.0) では、うまく動かなかったので 6.4.0 のバージョンを指定

$ npm install

土台つくる　

 

$ bin/rails g controller pages top

修正していく

config/route.rb

Rails.application.routes.draw do
  root to: 'pages#top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

app/controllers/pages_controller.rb

class PagesController < ApplicationController
end

app/views/pages/top.html.erb

<div id="target"></div>

app/assets/javascripts/application.js

window.onload = function() {
  require('./top.es6');
};

app/assets/javascripts/top.es6

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>hello world</div>,
  document.getElementById('target')
)

起動

$ bin/rails s

トップ画面で、hello world が表示されてること確認できました。

ログをみると開発環境では、初回のロード時に babelify してくれてるのがわかります。

Browserify: /Users/7kaji/Dev/rr/node_modules/.bin/browserifyinc -t babelify --extensions .es6 --list --cachefile=/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/output20161025-72290-1too9up" -
Browserify: /Users/7kaji/Dev/rr/node_modules/.bin/browserifyinc -t babelify --extensions .es6 --cachefile=/Users/7kajiDev/rr/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/output20161025-72290-28pg6y" -
Completed 200 OK in 3598ms (Views: 3590.3ms | ActiveRecord: 0.0ms)

今後

Sprockets4 では、 ES6、npm もサポートされるような話なのでもっと簡単に JS周りの整備できそうです。 界隈では、Sprockets は捨てられがちですが v4 がでれば解決することも多くありそうですね。

NPM support: Add support for resolving main from npm's package.json by guilleiguaran · Pull Request #405 · rails/sprockets · GitHub

github.com

REF

ppworks.hatenablog.jp

ppworks さんの記事をほぼほぼコピペさせていただきましたmm

ボタンを買った。

ガジェット

f:id:whitech0c0late:20160213150522j:plain:w200

flic という、ワイヤレススマートボタンを買った。
１つのボタンに対して、３つまでスマホの操作を割り当てることができる。

下の動画をみるとなんとなく感じは、伝わると思う。

自分は、hue の操作、iTunes の操作などに割り当てている。
ボタンは、壁に貼り付けたり、クリップを付けてかばんに取り付けることもできるので超絶便利。また、IFTTTと連携したり、ボタンを押下時には、任意のURI にHTTPのリクエストを送ることも可能なので、いろいろできそう。

f:id:whitech0c0late:20160213153001p:plain:w200

似たようなもので、

の、ようなものがあるので注目してみてる。

アニメで好きな名言。

名言

この記事は「名言 Advent Calendar 2015」の8日目の記事です。
自分の好きなアニメでの名言です。

http://livedoor.4.blogimg.jp/anico_bin/imgs/e/a/ea549aeb-s.jpg

売り上げなんか気にしてやりたいことブレたら、良いもの作れませんよ？

SHIROBAKO より、タローの言葉です。

会社に属している以上、売上はとても重要です。
が、ものづくりの現場では特に、創る側の気持ちとかモチベーションが作品だったり成果物に直結してくるものだと思います。 自分自身、エンジニアリングをしている際に、うーんと思いながらも作業を続けてしまっていることが多々ありますが、もっと楽しんでブレずに、いいものをたくさん生み出していきたいです。
よいものを作れば売上げもあがると信じています！！

あしたは、@omega999elt さんです。たのしみ。

REF

goodquote.biz

www.amazon.co.jp