パパエンジニアのアウトプット帳

30歳に突入した1児のパパエンジニアのブログ

Railsのinculudesについて

以前は普通にincludesを使っていたけど、includes(:books).references(:books)みたいに書くようになってからちょっと疑念を抱いていた。

そして、確かr7kamuraさんのamakanの実装についての記事でpreloadとかを使っていて、やっぱりpreloadやeager_loadを明示的に使ったほうがぱっと見分かりやすいのでは?と思って、includesを使わないように意識していた。


そんな中、下記の記事を最近読んだ。

techracho.bpsinc.jp

あぁ、やっぱりincludes(:books).references(:books)みたいに書くの冗長だと思っている人いるよね。 (includes支持者ももちろんいるみたいだけど


これからも、やはりincludesは極力使わずにpreloadやeager_loadを使うようにしていこうと思った。



なお、未だにpreloadやeager_loadなどが自信無くなるので下記によくお世話になってる。

qiita.com

cancancaでAbilityクラスにcurrent_user以外の引数を渡す方法

Cancan(Cancancan)使ってて、今までは下記みたいにuserさえあればよかったけど、ある時sessionのある値をAbilityクラスに渡したくなった。

class Ability
  include CanCan::Ability

  def initialize(user) ←(user, other_param)みたいにしたい!
    ・・・
  end
end

ぐぐっていると下記を見つけた。

github.com

なので、そこにあるようにapplication_controller.rbでcurrent_abilityをオーバーライドすればOK。

react-railsとreact_on_railsについてのメモ

個人用の調べたことや思ったことメモ。

RailsでReactを利用するのに使われる2大Gem。 どちらもSSRに対応している。

webpackerでreactやるんではダメなん?

webpacker:install:reactのこと。 やれなくはないと思う。

しかし、今回はSPAではなく一部分に導入(ボタン等)したかったので、react_componentのようなヘルパーメソッドがほしかった(部分適用が楽)

下記のようにやる必要があるので、部分適用で箇所が多くなるとツライと思う。。

document.addEventListener("DOMContentLoaded", e => {
  ReactDOM.render(<Hello name="React" />, document.getElementById("ターゲットのid"))
})

react-rails

https://github.com/reactjs/react-rails

  • react登場の初期の頃からある認識
  • execjs依存
  • 単体利用だとコンポーネントをグローバルに紐付ける
    • webpackerをサポートしたので、webpackerを利用していればグローバルではなくなる
  • CSRFトークンをpropで渡す必要がある
  • デフォルトはsprockets利用
    • レールに乗ったままいける
    • 確か内部でreact.jsを持っている(バージョンがちょっと古い)
      • reactのaddonsの利用をサポートしているから?
    • すぐにnpm使いたくなる
      • 今はwebpackerと組み合わせる方法がある
      • 他はbrowserify-rails使う方法かRailsAssets.orgかな?

react_on_rails

https://github.com/shakacode/react_on_rails

  • execjs依存
  • Rails疎結合でReactを利用できる
    • Rails側で使いやすいようにヘルパーやnpmのライブラリを提供している
  • CSRFはnpmでライブラリが用意されている
    • ReactOnRailsで取得可能
  • 非SPAだと重厚すぎないか?
csrfToken = ReactOnRails.authenticityToken();

// compose Rails specific request header as following { X-CSRF-Token: csrfToken, X-Requested-With: XMLHttpRequest }
header = ReactOnRails.authenticityHeaders(otherHeader);
  • 利用例はr7kamuraさんのamakanが秀逸

http://r7kamura.hatenablog.com/entry/2016/10/10/173610

その他

ExecJSとは

Rubyからjavascriptを実行できるようにするためのもの。

javascriptランタイムを抽象化して同じインターフェースで利用できるようにする。

ランタイム

  • therubyracer
    • Gemfileでデフォルトで入っていたやつ
    • メモリ使用量が多いのが難点
    • インストールも苦労するのだが
    • 最近はmini_racer推奨
  • Node.js
    • いわずとしれたサーバサイドでも使えるjavascript
  • mini_racer
    • therubyracerよりも高速、安定、省メモリ
    • therubyracerが抱えていた古いV8エンジンの問題も解決

Railsのwebpackerでbin/webpack-dev-serverをした時にinvalid host headerになってしまう

Railsのwebpackerでbin/webpack-dev-serverをしてブラウザからアクセスするとinvalid host headerとJSのエラーになってしまった。

(Virtualboxに開発環境を作ってホストOSのブラウザからアクセスしている)


とりあえず、下記の設定を入れてエラーを回避しているが、どうやるのが正しいのだろう。

[config/webpack/development.js]

module.exports = merge(sharedConfig, {
    ・・・

  devServer: {
    disableHostCheck: true,
    ・・・
  }

HerokuのRailsでnpm installをできるようにする

1. 下記の手順に従ってrubyとnodejsのビルドパックを追加する

devcenter.heroku.com

$ heroku buildpacks:add --index 1 heroku/nodejs
Buildpack added. Next release on アプリ名 will use:
  1. heroku/nodejs
  2. heroku/ruby
Run git push heroku master to create a new release using these buildpacks.

2. assets:precompileの前にnpm installを行うRakeタスクを作成する

[lib/tasks/before_precompile.rake]

task :npm_install do
  sh "npm install"
end

Rake::Task["assets:precompile"].enhance(%i(npm_install))

手順2. は要らなさそう。Herokuがyarnをサポートしているようなのでyarn.lockファイルがあるとyarn installが自動で走るみたい。

devcenter.heroku.com