Lorem ipsum

webエンジニア志望の学生の日記です。

雑にrails 5.1.0.beta1でWebpacker試した感想

f:id:y_temp4:20170225122252p:plain

この記事では rails new するまでの手順と実際に触れた感想を書いています。

準備

以下の手順で作成してましたが、

$ mkdir rails5_1_0_beta1-test
$ cd rails5_1_0_beta1-test
$ touch Gemfile

Gemfileの中身

source 'https://rubygems.org'

gem 'rails', '5.1.0.beta1'

続き

$ bundle install --path vendor/bundle
$ bundle exec rails new . --webpack=react
       exist
      create  README.md
      create  Rakefile
      create  config.ru
      create  .gitignore
    conflict  Gemfile
Overwrite /Users/yuki/Src/framework/rails/rails5_1_0_beta-test2/Gemfile? (enter "h" for help) [Ynaqdh] y
       force  Gemfile
         run  git init from "."

・・・ 省略 ・・・

      create  package.json
      remove  config/initializers/cors.rb
         run  bundle install
Fetching https://github.com/rails/sass-rails.git
Fetching https://github.com/rails/webpacker.git
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/.........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "sprockets":
  In snapshot (Gemfile.lock):
    sprockets (= 3.7.1)

  In Gemfile:
    sass-rails was resolved to 6.0.0.beta1, which depends on
      sprockets (~> 4.x)

    sass-rails was resolved to 6.0.0.beta1, which depends on
      sprockets-rails (< 4.0) was resolved to 3.2.0, which depends on
        sprockets (>= 3.0.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.
       rails  webpacker:install
The git source https://github.com/rails/sass-rails.git is not yet checked out. Please run `bundle install` before trying to start your application
       rails  webpacker:install:react
The git source https://github.com/rails/sass-rails.git is not yet checked out. Please run `bundle install` before trying to start your application

・・・ 省略 ・・・

・・・という感じで途中止まってしまったのでbundle updateします。

$ bundle update
Fetching https://github.com/rails/sass-rails.git
Fetching https://github.com/rails/webpacker.git
・・・ 省略 ・・・

rails webpacker:installも止まってしまっていたので、やり直す必要があります。

$ bin/rails webpacker:install
      create  app/javascript
      create  app/javascript/packs/application.js
       exist  bin
      create  bin/webpack-dev-server
      create  bin/webpack-watcher
      create  bin/webpack
   identical  bin/yarn
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/production.js
      create  config/webpack/shared.js
      append  .gitignore
         run  ./bin/yarn add --dev webpack webpack-merge webpack-dev-server path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader glob from "."
yarn add v0.20.3

・・・ 省略 ・・・

React 入れたかったのでrails webpacker:install:reactもします。

$ bin/rails webpacker:install:react

・・・ 省略 ・・・

せっかくなんで React のファイルを見てみましょう。app/javascript/packs/hello_react.jsにあります。

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

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

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}!</div>
  }
}

document.addEventListener("DOMContentLoaded", e => {
  ReactDOM.render(<Hello name="React" />, document.body.appendChild(document.createElement('div')))
})

まぁ、普通(?)ですね。コメントにもあるように、<%= javascript_pack_tag 'hello_react' %>を layout ファイルに付け足して動かすようです。

開発時には bin/webpack-watcher を、bin/rails sとは別に動かします。

Webpack の設定はconfig/webpack/にあります。

$ tree config/webpack
config/webpack
├── development.js
├── production.js
└── shared.js

現時点(2017年2月25日)での設定ファイルは以下から確認できます。

webpacker/lib/install/config

感想

ここで、他の方の Webpacker に対する感想を見てみましょう。

webpacker - Twitter検索 から一部抜粋。

個人的にも CSS 関連が弱いのが気になります。今後は PostCSS も使われる流れになるでしょうし、今の段階だと Webpacker を使うメリットは限られるんじゃないかな、と思います。

(と、いいつつ自分はPostCSSとかあんまりよくわかっていないのですが・・・。PostCSS や cssnext に関しては以下の記事が参考になると思います。)

PostCSSとcssnextで最新CSS仕様を先取り! | HTML5Experts.jp

オレオレ実装で Rails とフロントエンドを分離するのは技術を要する感じがするかもしれませんが、今は知見も溜まっている感じがしますし、必ずしも Webpacker を使う必要はないんじゃないかな、というのが個人的な感想です。

といっても、Rails 側がフロントまわりも頑張っていこうとしているなら、それに乗っかった方が全体として知見が深まりいい感じもしますし、積極的に使っていく or Webpacker に貢献していくのがいいのかな〜とも思います。

理想論かもしれませんが、できるだけがんばっていきたいですね。

2017年5月5日追記

Webpackerのconfigについてのメモ - Lorem ipsum という記事を書きましたが、当記事の執筆時点とは状況がかなり変わってきています。個人的にはいい方向に進んできていると思うので、今後に期待できると思う反面、大きく書き換わる可能性がかなり高いためいますぐ使うのはちょっと怖い気持ちもあります。