【Rails】ブラウザで要素をクリックするだけでViewを開くことができる「rails-template-inspector」を使ってみる

こんにちは、千葉（@yoshi_chibaaa）です。

今回はブラウザ上で要素をクリックするだけでViewファイルを開くことができる「rails-template-inspector」を使ってみたので紹介したいと思います。導入も簡単で気軽に使うことができるため、View開発を効率化したい場合にはかなりおすすめのライブラリだと思います。

Github rails-template-inspector

この記事の内容

rails-template-inspectorとは
使い方
まとめ
参考

rails-template-inspectorとは

「rails-template-inspector」とは、ブラウザ上で要素をクリックするだけでViewファイルを開くことができるライブラリです。仕組みとしては、config.action_view.annotate_rendered_view_with_filenamesによって埋め込まれるコメントを探索しています。

【Rails】View開発に役立つ「annotate_rendered_view_with_filenames」機能を使ってみるRails6.1から追加された、Viewの呼び出し元を表示してくれる「annotate_rendered_view_with_filenames」を紹介しています。開発環境でのみ使えるTips機能ですが、使う人にとっては便利な機能なのかなと思います。...

使い方

実際に「rails-template-inspector」を導入し、どのような挙動になるか使ってみます。

事前準備

Rails6.1から追加された、Viewの呼び出し元を表示してくれる「annotate_rendered_view_with_filenames」を有効化する必要があります。

有効化手順については以下の記事を参考にしてください。

CDNの埋め込み

「rails-template-inspector」のCDNを埋め込みます。（開発環境でのみ使用する機能のためif Rails.env.development?で囲っています。）

<!DOCTYPE html>
<html>
  <head>
    <title>AnnotateRenderedViewWithFilenamesDemo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
    <% if Rails.env.development? %>
      <script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector"></script>
      <rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
    <% end %>
  </body>
</html>

url-prefix部分には自信が使用しているエディタを指定します。

Visual Studio Code: vscode://file
RubyMine: x-mine://open?file=
MacVIM: mvim://open?url=file://
Emacs: emacs://open?url=file://

動作確認

サーバーを起動し、ユーザー一覧画面（http://localhost:3000/users）にアクセスします。「shift + command + v」で「rails-template-inspector」を起動し、閲覧したい要素にカーソルを当てることでViewファイルを特定することができます。

また要素をクリックすることで、指定したエディタ（今回はVSCode）で該当のViewファイルを開くこともできます。

まとめ

「rails-template-inspector」とは、ブラウザ上で要素をクリックするだけでViewファイルを開くことができるライブラリ
「rails-template-inspector」は、config.action_view.annotate_rendered_view_with_filenamesによって埋め込まれるコメントを探索している