Rails

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

 
Rails

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

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

Github rails-template-inspector
この記事の内容
  1. rails-template-inspectorとは
  2. 使い方
  3. まとめ
  4. 参考

rails-template-inspectorとは

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

Rails
【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」を有効化する必要があります。

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

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

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によって埋め込まれるコメントを探索している

参考

 

今回はブラウザ上で要素をクリックするだけでViewファイルを開くことができる「rails-template-inspector」を紹介しました。Viewファイルが膨大なアプリケーションの開発をする際に活躍しそうなライブラリだと感じました。

Rails VSCode
こんな記事もおすすめ