Rails 5.1 の First Impression

ども、@kimihom です。

f:id:cevid_cpp:20171105213739j:plain

この連休はひたすらプログラミングやってた。そんな中で手をつけ始めた Rails 5.1 について感想を書いてみるとする。こういうちょっとしたことでも記事にできるのがブログのいいところよね。

Yarn マジ便利

JavaScript のパッケージ管理の Yarn は本当に便利だと感じた。今までの Rails の AssetPipeline での外部ライブラリの管理って、専用の Gem をインストールして application.js に書く感じだった。例えば momentjs-rails 。これの大きな弱点ってのは、Gem の管理者が更新をやめればバージョンは古いままだってこと。そもそもフロントエンドの JavaScript の管理も Gem でやろうって時点でモヤモヤ感を感じてはいた。

そこで Yarn の登場だ。Rails プロジェクトのトップで yarn add moment ってするだけで moment をインストールすることができる。すると Rails 直下にお馴染みの node_modules フォルダができるので、それを見ながら application.js を以下のように追加するだけで OKだ。

//= require moment/moment

これは Yarn を入れた後の JavaScript ライブラリの構成によって、 require 以降の書き方は変わるので注意する必要がある。例えば JavaScript ライブラリ hoge の実体ファイルが dist/hoge.js だったら //= require dist/hoge って感じにすれば OK だ。

これで例えば moment をアップデートしたいってなら yarn upgrade moment で終わりだ。最高にクール！

フロントエンドの選択

以下の記事を読んで、自分が Rails プロジェクトの中でフロントエンドをどうしていきたいかを考える必要がある。

blog.toshimaru.net

私は現状の Asset Pipeline に大満足している派だったので Asset Pipeline を使い続けることにした。この記事では ES6 使いたいなら browserify-rails を使うやり方が紹介されていたけど、普通に Asset Pipeline 使ってでも ES6 使えるような気がするため、メリットがいまいちピンとこなかった。唯一 require が使える? 的な話を他のページで見かけたけど、結局 Asset Pipeline で一発でまとめてくれるから require 自体必要ないよな、とか思ったりした。ここら辺詳しい方いたら教えて欲しい。

-- 2017/11/19 追記 -- rails server で普通に開発してる分には問題起きないけど、assets:precompile で ES6 形式で書くと失敗することが判明。。やはり Asset Pipeline では ES6 構文を書くのに対応させることは難しいようだ。

今までは AssetPipeline のコンパイルとかで ES6 の書き方をするとエラーになってたりしたけど、それがスラスラ書けるようになったのは嬉しい限りだ。

以下の本は是非読んでおくといいかと思う。このために Kindle の Mac アプリをインストールして読んだ甲斐があった。この値段でこのコンテンツはありがたすぎる。

let, class, Arrow Function.. こうした新しい JavaScript コーディングによって、 Rails のフロントエンドの書き方も大きく変化する。んで意気揚々とアロー関数を定義しまくってたら、this の挙動で悩まされることになるので、これも勉強しておいたほうがいいかもしれない。こんなん、初めて書いたら絶対ハマるやろっていう感想しかなかった。特にメソッド Callbasck 内での this の挙動が怪しい。。ここら辺、いい書き方を今後模索していきたい。

【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita