Rails プロジェクトでフロントエンド開発を高速化する


こんにちは。 Gaji-Labo 衛生班の和田です。
主な仕事は、タオルの洗濯です。

この記事は、Gaji-Labo Advent Calendar 2015、9日目の記事です。

さて、フロントエンド開発をしていると、ちょいちょいリロードしたくなりますよね。
Browsersync を愛用している人も多いのではないでしょうか?

一方、開発環境によっては「時間かかるから、できるだけリロードしたくないな」ということも少なくありません。

という訳で、今日は、 Ruby on Rails なプロジェクトの開発環境を高速にするおまじないをご紹介します。
※きちんとメンバーの許可を取ってからでないとすごく迷惑をかける場合があるので要注意です。

設定を追加する

方法は簡単です。

config/environments/development.rb に以下を追加します。

if ENV['FRONTEND_MODE']
config.cache_classes = true
config.eager_load = true
config.action_view.cache_template_loading = false
else
config.cache_classes = false
end

そして、サーバーを起動するとき、環境変数を指定します。
例: $ FRONTEND_MODE=true bundle exec rails s 以上です(簡単)!

あえて具体的な数値は掲載しませんが、超高速になりました!(当社比)

何をやっているか

cache_classes は、アクセスのたびにアプリケーションクラスのリロードするかの設定を行います。

cache_classes = true : リロードしない
cache_classes = false : リロードする

eager_load は、ブート時に app 以下のクラスを全て読み込むかどうかの設定を行います。

※「全て」かどうかは設定によって変更できます。
※ ActiveRecord の eager_load とは別モノです。また、この設定が影響することはありません。念のため。

eager_load = true : ブート時にクラスを読み込む
eager_load = false : ブート時にクラスを読み込まない

上記の設定により、オーバーヘッドを減らしています。

「たくさんのパーシャルを読み込んでいるし、それぞれのパーシャルが、そこそこ大きな処理をしている」ようなページですと効果が大きいです。

action_view.cache_template_loading = false としていますが、これは「さすがに view もキャッシュしてしまうと仕事にならないことが多いよね」という理由です。

なぜ、これがデフォルトじゃないの?

ブート時に全てのクラスを読み込み、キャッシュしてしまいますので、クラスに変更があっても反映されません …… ということは Rails のアプリケーション開発はほぼ出来ません(罠ですね)。
そのため、(当然ですが)デフォルトでは、開発時にこれらの設定が無効になっています。

とはいえ、開発中は HTML/CSS/JS のみの修正を行う機会も多いと思います。
そんな時、この設定があると重宝すると思います!

注意すること

クラスに変更が入った場合は、読み込みが必要です。 そのため、ブランチを切り替えた時などは、多くの場合、 FRONTEND_MODE=true bundle exec rails s し直す必要があります。 慣れるまで、これを忘れて、「あれ?」ってなる事があると思います。ご注意を。

Passenger を使っている場合

Passenger を使用している場合は、Nginx, Apache などに設定を行う必要があります。 その場合は、 Nginx, Apache を再起動することで、クラスの再読み込みが行われます。

FRONTEND_MODE の有効・無効を切り替えるには、「設定ファイルの切り替え→サーバー再起動」を行うような簡単なスクリプトを用意しておき、おれおれエイリアスなどで、簡単に切り替えられるようにしておくと良いと思います(筆者の場合、たとえば _restart で有効+サーバー再起動、 restart_ で無効+サーバー再起動 としています)。

まとめ

  • クラスをまとめて読み込むと、フロントエンド開発を快適にできる
  • クラスの修正を行った時は、クラスの再読み込みが必要なので注意する
  • Passenger を使っている場合は、ちょっとだけ工夫が必要

弊社では、多くの Ruby on Rails プロジェクトのフロントエンド開発に参加しています。 バックエンドとフロントエンドのつなぎのような役割でも貢献できることがあると思いますので、ぜひ、お気軽にお問い合わせください!

関連リンク


投稿者 Gaji-Labo Staff

Gaji-Laboの社内デジタル環境でいろいろなお手伝いをしているがじ専務&じら常務。みんなのシリーズ記事をまとめたり、卒業したスタッフの過去記事を記録したり、Twitterをやったりしています。