Rails 8 Active Storage 画像アップロード完全マニュアル

• 画像をアップロードして保存する
• アップロードした画像を表示する
• よくあるエラーの原因も解決！

Active StorageはRails公式のファイルアップロード機能です。外部のgemに頼らず、Rails標準機能だけで画像アップロードが実装できます。Amazon S3やGoogle Cloud Storageなどのクラウドストレージにも対応しており、本格的なWebアプリケーションでも安心して使えます。

• 1. Active Storage のセットアップ
• 2. モデルに画像添付を追加
• 3. コントローラーのパラメータに :image を許可！
• 4. ビュー（フォーム）にファイルアップロード欄を追加
• 5. アップロードされた画像を表示する
• 6. 画像が保存されているか確認する方法
• よくあるエラーと対処法
• 応用：複数画像のアップロード（簡単版）
• まとめ

1. Active Storage のセットアップ

まずはActive Storageを使うためのデータベーステーブルを作成します。

bin/rails active_storage:install
bin/rails db:migrate

何が作られる？

このコマンドで3つのテーブルが作成されます：

• active_storage_blobs → アップロードしたファイルの情報（ファイル名、サイズ、形式など）
• active_storage_attachments → ファイルとモデル（Work等）の関連付け情報
• active_storage_variant_records → 画像のリサイズなどの変換情報

これらのテーブルがActive Storageの仕組みを支えています。

2. モデルに画像添付を追加

Workモデルに画像を添付できるようにします。

app/models/work.rb

class Work < ApplicationRecord
  has_one_attached :image
end

解説

• has_one_attached :image → 「このWorkモデルには画像を1つ添付できる」という意味
• :imageの部分は好きな名前に変更可能（:photo、:picture、:thumbnailなど）
• 複数の画像を添付したい場合はhas_many_attached :imagesを使用

この1行を追加するだけで、WorkモデルにActive Storageの機能が組み込まれます。

3. コントローラーのパラメータに :image を許可！

Railsのセキュリティ機能「Strong Parameters」で画像パラメータを許可します。

app/controllers/works_controller.rb

private
def work_params
  params.require(:work).permit(:title, :description, :image)
end

なぜ必要？

Railsでは、悪意のあるデータ送信を防ぐため、コントローラーで明示的に許可したパラメータしか受け取れません。:imageをpermitに追加しないと、フォームから画像を送信しても無視されてしまいます。

:imageの部分は、モデルで定義した名前と一致させる必要があります。

4. ビュー（フォーム）にファイルアップロード欄を追加

画像をアップロードするためのフォームを作成します。

app/views/works/_form.html.erb

<%= form_with model: @work do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>
  <%= f.label :description %>
  <%= f.text_area :description %>
  <%= f.label :image %>
  <%= f.file_field :image %>
  <%= f.submit %>
<% end %>

重要ポイント

• Rails 8ではmultipart: trueは不要！ form_withでf.file_fieldを使えば、Railsが自動的にmultipart/form-dataを設定します
• f.file_field :image → ファイル選択ボタンを表示
• accept: "image/*"を追加すると、画像ファイルのみ選択可能になります（オプション）

注意事項

multipart: trueが必要なのは、古いform_tagとfile_field_tagを使う場合のみです：

<!-- 古い書き方（multipart: true が必要） -->
<%= form_tag '/upload', multipart: true do %>
  <%= file_field_tag :image %>
<% end %>

5. アップロードされた画像を表示する

アップロードした画像をWebページで表示します。

app/views/works/show.html.erb

<% if @work.image.attached? %>
  <%= image_tag @work.image.variant(resize_to_limit: [500, 500]).processed %>
<% else %>
  <p>画像がありません</p>
<% end %>

解説

• @work.image.attached? → 画像が添付されているかチェック（必須！）
• variant(resize_to_limit: [500, 500]) → 画像を最大500x500pxにリサイズ
• .processed → 画像処理を実行

画像サイズ調整のオプション

• resize_to_limit: [500, 500] → 最大サイズを指定（縦横比は保持）
• resize_to_fill: [300, 200] → 指定サイズにトリミング
• resize_and_pad: [400, 300] → 指定サイズに収まるようにパディング追加

if @work.image.attached?のチェックを忘れると、画像がない場合にエラーが発生するので注意！

6. 画像が保存されているか確認する方法

開発中に画像が正しく保存されているか確認したい場合の方法です。

bin/rails console

work = Work.last
work.image.attached?  # => true なら画像アップロード成功！

その他の確認コマンド

work.image.filename    # ファイル名を表示
work.image.byte_size   # ファイルサイズを表示（バイト単位）
work.image.content_type # ファイル形式を表示（image/jpeg など）

デバッグ時に「本当に画像が保存されているのか？」を確認するのに便利です。

よくあるエラーと対処法

最も多いエラー

1番目のCan't resolve image into URLエラーが最も頻発します。これは画像が存在しないのにimage_tagを実行しようとした時に起こります。必ずif image.attached?でチェックしてから表示しましょう。

デバッグのコツ

エラーが起きたら、まずrails consoleでWork.last.image.attached?を実行して、実際に画像が保存されているかを確認するのが効果的です。

応用：複数画像のアップロード（簡単版）

1つではなく複数の画像をアップロードしたい場合：

# モデル
class Work < ApplicationRecord
  has_many_attached :images  # sを付ける
end

# コントローラー
def work_params
  params.require(:work).permit(:title, :description, images: [])  # 配列として許可
end

<!-- フォーム -->
<%= f.file_field :images, multiple: true %>

<!-- 表示 -->
<% @work.images.each do |image| %>
  <%= image_tag image.variant(resize_to_limit: [300, 300]).processed %>
<% end %>

まとめ

Active StorageはRails公式のファイルアップロード機能で、Rails 8でも安心して使える。 大事なのは以下の3点！

• モデルに has_one_attached
• コントローラーで permit(:image)
• form_withならmultipart: trueは不要（自動設定される）

この3つを忘れなければ、確実に画像アップロード機能を実装できます。エラーが起きても、上記のエラー対処表を見れば解決できるはずです。

次のステップ

基本的な機能ができたら、以下にチャレンジしてみましょう：

• 画像サイズのバリデーション追加
• ファイル形式の制限
• クラウドストレージ（S3など）への保存