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_filenamesconfig/environments/development.rbconfig/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のみ書き換えます。

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

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

annotate_rendered_view_with_filenamesの動作確認

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

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

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

 

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

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

※上記画像は筆者が動作確認用に作成したアプリケーションをキャプチャしたもの

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

まとめ

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

 

参考リンク

.annotate_template_file_names annotates HTML output with template names by joelhawksley · Pull Request #38848 · rails/rails (参照: 2020年11月27日)

Add the configuration option for annotating templates with file names to the generated app by prathamesh-sonpatki · Pull Request #39204 · rails/rails (参照: 2020年11月27日)

 

告知

明日は、Y.Aさんによる「いまいちPrebid.jsがGAMに対して何をやっているのか分からない人へ説明してみます」です。

引き続き、GMOアドマーケティング Advent Calendar 2020 をお楽しみください!

■エンジニア採用ページ ~福利厚生や各種制度のご案内はこちら~

https://www.gmo-ap.jp/engineer/

■noteページ ~ブログや採用、イベント情報を公開中!~

https://note.gmo-ap.jp/