Rails 6.1の新機能「annotate_rendered_view_with_filenames」を試す

この記事は GMOアドマーケティング Advent Calendar 2020 8日目の記事です。

はじめに

こんにちは。
GMOアドマーケティングの石丸(@thomi40)です。
弊社では複数のプロダクトでRuby on Railsを使って開発を行っています。
今回はRails 6.1で導入が予定されている「annotate_rendered_view_with_filenames」について紹介します。

annotate_rendered_view_with_filenamesとは？

annotate_rendered_view_with_filenames は config/environments/development.rb や config/environments/test.rb で設定できるオプションで、今後リリース予定のRuby on Rails 6.1で追加が予定されています。
このオプションを有効にすることで、viewで実装したテンプレートの開始位置と終了位置がHTMLのコメントとして自動で追加されるようになります。
具体的には以下のように出力されます。

基本的にはオプションを有効にするだけではありますが、上記の出力を確認するまでに私がやったことを紹介します。

Rails 6.1 RC1の環境構築

執筆時点(2020年11月)ではRails 6.1のRC1が公開されているので、今回はRC1を導入してみます。
今回は以下のQuickstartや記事を参考にDocker環境で構築しました。

今回の機能を検証するためにRails 6.1の環境が必要なので、以下のようにGemfileのみ書き換えます。

source 'https://rubygems.org'
gem 'rails', '6.1.0.rc1'

1 2	source 'https://rubygems.org' gem 'rails', '6.1.0.rc1'

Quickstartを参考に各種ファイルを用意し、 rails newやDockerイメージのbuild、DBの作成を行い、最後にコンテナを起動します。
※Rubyは 2.6.6 を指定しました。

$ docker-compose run web rails new . --force --no-deps --database=mysql --skip-test --webpacker
$ docker-compose build
$ docker-compose run web rake db:create
$ docker-compose up

$ docker-compose run web rails new . --force --no-deps --database=mysql --skip-test --webpacker

$ docker-compose build

$ docker-compose run web rake db:create

$ docker-compose up

localhost:3000 にアクセスして「Yay! You’re on Rails!」の表示が確認できれば環境構築は完了です。

annotate_rendered_view_with_filenamesの動作確認

動作を確認するために適当なviewファイルが必要なので、scaffoldで雛形を作成します。

$ docker-compose run web rails g scaffold user name:string
(省略)
      create      app/views/users
      create      app/views/users/index.html.erb
      create      app/views/users/edit.html.erb
      create      app/views/users/show.html.erb
      create      app/views/users/new.html.erb
      create      app/views/users/_form.html.erb
(省略)

$ docker-compose run web rails g scaffold user name:string

(省略)

create app/views/users

create app/views/users/index.html.erb

create app/views/users/edit.html.erb

create app/views/users/show.html.erb

create app/views/users/new.html.erb

create app/views/users/_form.html.erb

(省略)

今回の検証に必要なviewファイルが作成されました。

app/views/users/new.html.erb でrenderが使われているので、viewはデフォルトの状態で検証を進めます。

<h1>New User</h1>

<%= render 'form', user: @user %>

<%= link_to 'Back', users_path %>

<%= render 'form', user: @user %>

<%= link_to 'Back', users_path %>

今回検証したいannotate_rendered_view_with_filenames はデフォルトではコメントアウトされているため、 config/environments/development.rbからコメントを外しておきます。

# Annotate rendered view with file names.
config.action_view.annotate_rendered_view_with_filenames = true

1 2	# Annotate rendered view with file names. config.action_view.annotate_rendered_view_with_filenames = true

設定後にサーバーを再起動して localhost:3000/users/new にアクセスしてみます。

上記の通り、テンプレートの開始位置や終了位置に関するコメントが挿入されていることを確認できました。

まとめ

今回はRails 6.1で新たに追加される「annotate_rendered_view_with_filenames」について紹介しました。
本番環境では使わないちょっとした機能ではありますが、HTMLを見るだけでどのviewから呼び出されているかを確認できるので、デバッグやコードレビューの際にかなり活躍しそうです。
本機能の導入の経緯や元のPull Requestは以下の参考リンクにまとめていますので、気になる方はぜひご覧ください。