Railsでアイコンと画像管理を完全ガイド！asset_path・image_pack_tag・SVGインライン化まで丁寧に解説

アイコン/画像管理：asset_path/image_pack_tagとSVGインライン化

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

生徒

「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 を正しく読み込むことができます。拡張子を含めて指定するだけなので初心者でも扱いやすいのが特徴です。

3. image_tagを使ってもっと簡単に画像表示

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


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

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

4. image_pack_tagとは？Webpacker時代の画像管理方法

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


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

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

5. SVGインライン化とは？柔軟にデザイン変更できる便利な方法

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にクラスを追加したり、色を変更したりできるため、アプリのデザインを統一するうえで非常に便利です。

6. ERB・Haml・Slimでの画像呼び出しの違い

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


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

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

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

7. パーシャルとレイアウトでアイコンを共通化する方法

アプリ内で何度も使うアイコンは、パーシャルやレイアウトにまとめて管理するととても便利です。特にヘッダーやフッターでは複数の画像を使うため、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>

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

8. 初心者が迷わない画像管理のおすすめ手順

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

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

実務の壁を乗り越える【Ruby on Rails 実務開発特別演習】

職業訓練講師が最短攻略！Ruby on Railsによる「商用API開発」とDB最適化の極意。

商用開発基準を身につけ、エンジニアとしての市場価値を最大化する

職業訓練講師が最短攻略！Ruby on Railsによる「商用API開発」とDB最適化の極意。

モダンWeb開発のデファクトスタンダードRuby on Rails。本講座では、その圧倒的開発スピードの核にある「Active Record」を完全解剖。「設定より規約」を体現した効率的なアーキテクチャ設計を学び、JWT認証やバックエンドAPI構築など、現場で必須となるエコシステムの繋ぎ方を60分で濃縮体験します。