先生と生徒の会話形式で理解しよう

生徒

「Railsで画像やアイコンを使いたいんですが、どの書き方を使えばいいのかよく分からなくて…。asset_pathとかimage_pack_tagとか色々あって迷います。」

先生

「Railsでは、画像管理の方法が複数あります。どれも目的に合わせて使えるようになっていますよ。ビューやテンプレートでも使い分けやすい仕組みが用意されています。」

生徒

「それと、SVGのアイコンをインラインで使う方法も知りたいです。最近のサイトでよく見るので気になっていました。」

先生

「SVGは画質が落ちないので便利ですね。Railsでも簡単にインライン化できる方法があります。それでは順番に見ていきましょう。」

1. Railsでの画像管理とは？初心者が知っておくべき基本

Railsのビュー（ERB・Haml・Slim）では、画像ファイルやアイコンをアプリ内のassetsフォルダやpacksフォルダに置いて管理します。画像表示のために便利なヘルパーメソッドが用意されており、ファイル名だけを書くだけで正しいパスが自動的に生成される仕組みです。

初心者のうちは「画像はどのフォルダに置くのか」「どのヘルパーで表示するのか」を理解するだけで十分です。Railsが裏側で難しい処理を行ってくれるため、複雑な設定を覚えておく必要はありません。

2. asset_pathとは？Rails標準の画像パス生成機能

asset_pathは、assetsフォルダにある画像のURLパスを生成するヘルパーです。Railsのアセットパイプラインという仕組みにより、画像のパスが圧縮・最適化されても正しく参照できるようになっています。


<img src="<%= asset_path('logo.png') %>" alt="ロゴ">

この書き方で、app/assets/images/logo.png を正しく読み込むことができます。拡張子を含めて指定するだけなので初心者でも扱いやすいのが特徴です。

asset_pathよりさらに便利なのがimage_tagです。HTMLのimgタグ生成まで自動化してくれるため、画像を表示したいときはほぼこれ一つで足ります。


<%= image_tag 'logo.png', alt: 'ロゴ', class: 'img-fluid' %>

classやalt属性を追加できるため、BootstrapやTailwindなどのデザインとも組み合わせやすいのがポイントです。

Railsのバージョンによっては、Webpackerを使ったpackフォルダでの管理が必要になる場合があります。その際に使うのがimage_pack_tagです。


<%= image_pack_tag 'icons/user.svg', alt: 'ユーザー' %>

WebpackerはJavaScript・CSS・画像をまとめて管理する仕組みで、フロントエンド開発が進むにつれて使われるようになりました。画像をpack内に置いた場合はこちらのヘルパーを使う必要があります。

SVGファイルはテキスト形式の画像データで、どれだけ拡大しても画質が劣化せず、色や線の太さを自由に変更できるメリットがあります。特にアイコン表示に向いており、最近のWebアプリでも一般的になっています。

RailsではSVGをインライン化することで、CSSやJavaScriptで柔軟にスタイルを変更できます。インライン化とは、画像ファイルを読み込むのではなく、SVGのコードそのものをHTMLに埋め込む方法です。


# app/helpers/application_helper.rb
def inline_svg(filename)
  File.read(Rails.root.join("app/assets/images/#{filename}")).html_safe
end


<%= inline_svg "icon.svg" %>

この方法を使うと、SVGにクラスを追加したり、色を変更したりできるため、アプリのデザインを統一するうえで非常に便利です。

テンプレートエンジンが違っても、asset_pathやimage_tagの使い方はほぼ同じです。記法だけが変わるので、一度慣れてしまえばどれでも使えるようになります。以下に例を挙げます。


<!-- Haml -->
= image_tag "logo.png"

<!-- Slim -->
= image_tag "logo.png"

Railsのヘルパーはテンプレートエンジンに依存しないため、共通して覚えておくと便利です。

アプリ内で何度も使うアイコンは、パーシャルやレイアウトにまとめて管理するととても便利です。特にヘッダーやフッターでは複数の画像を使うため、1つのパーシャルにまとめることで管理しやすくなります。


<!-- shared/_icons.html.erb -->
<div class="icons">
  <%= image_tag "logo.png" %>
  <%= inline_svg "menu.svg" %>
</div>


<!-- application.html.erb -->
<body>
  <%= render "shared/icons" %>
  <%= yield %>
</body>

これにより、画像パスをどこかで変更する必要が出ても、パーシャルファイルを変更するだけで済みます。ビュー全体の整理にもつながり、デザイン変更にも強い構造になります。

最後に、初心者がRailsで画像やアイコン管理を行うときに迷わないためのポイントをまとめます。まずはimage_tagで画像表示に慣れ、次にSVGインライン化を学ぶ流れがスムーズです。

ERBでもHamlでもSlimでも、ヘルパーの使い方は同じなので、テンプレートの違いに惑わされる必要はありません。パーシャルで共通化し、レイアウトで全体をまとめるというRailsらしい構造を意識すると、アプリの見た目が整いやすくなります。