CarrierWaveとは??

CarrierWaveは、画像をアップロードできるgemの一つです。
非常に簡単に扱えるので、初学者の方でも躓かずに導入することができると思います。
この記事はrailsプロジェクトが作成してあることを前提に書いています。

前提

・開発環境：cloud9
・OS:ubuntu
・railsのバージョン:5.2.5

CarrierWaveをインストール

まずgemファイルに以下のようにコードを記入します。

Gemfile

gem 'carrierwave', '~> 2.0'

そして、バンドルインストールします。

$ bundle install

これでCarrierWaveのインストールは完了です!

アップローダークラスの作成

以下のコードでアップローダークラスを作成します。

$ rails g uploader (アップローダー名)

アップローダー名は任意です。自分は「アップローダー名＝image」としました。

$ rails g uploader image

すると、app/uploaders/image_uploader.rbが生成されます。
このファイルについて簡単に説明します。

rmagickというgemをインストールし、画像アップロードの設定に関するコードを記入すると、
色々な機能をつけることができたりします。
ただし、この記事では触れませんが、以下の参考記事ではCarrierWaveとrmagickの導入から使い方まで
書かれていますので参考にしてみてください。

参考：【Rails】CarrierWaveとrmagickで画像アップロード機能を作る

アップロードする画像のカラムを追加

アップロードする画像を保存するためのカラムを作成していない場合は、以下のようにカラムを追加してください。
以下はユーザーのプロフィール画像をアップロードできるようにするため、usersテーブルにimageカラムを追加しています。

$ rails g migration add_image_to_users image:string

$ rails migrate:db

画像を保存するためのカラムimageは、なんで文字列（string)なの??と疑問に思うかもしれません。
じつは、imageカラムはアップロードした画像のファイル名を保存するためのカラムなのです。
データベースに画像データという重いデータを保存していては、データベースサーバを圧迫してしまいますからね。

また、セキュリティ対策として以下のように、取得できるパラメータを制限している場合は、imageカラムにアップロードした画像ファイル名を保存できるようにしましょう。

app/controllers/users_controller

  private

  def user_params
    params.require(:user).permit(:name, :email, :password, :password_confirmation, :introduce_comment, :image)
  end

アップローダークラスとimageカラムの結び付け

アップローダークラスとimageカラムを結びつけるためにapp/models/user.rbに以下のコードを追記します。

class モデル名 < ActiveRecord
  mount_uploader [:カラム名], [アップローダークラス]
end

例えば、imageカラムとImageUploaderクラスを結びつけるには

class User < ApplicationRecord
  mount_uploader :image, ImageUploader
end

を追記します。
これで完了です。

画像がアップロードできる編集フォームを作成する。

では、実際に画像をアップロードできるようにフォームの作成

edit.html.erb

<%= form_with(model: @user, local: true) do |f| %>

  <div class="form">
    <%= f.label :image, '画像' %>
    <%= f.file_field :image, class: 'form-control image-form' %>
  </div>

  <div class="form">
    <%= f.label :name, '名前' %>
    <%= f.text_field :name, class: 'form-control' %>
  </div>

  <div class="form">
    <%= f.label :introduce_comment, '自己紹介文' %>
    <%= f.text_area :introduce_comment, class: 'introduce-form-control' %>
  </div>

  <%= f.submit '更新する', class: 'edit-btn' %>
<% end %>

画像のアップロードフォームはfile_fieldでファイル選択ボックスを実装することができます。
これで画像をアップロードすることができるようになります。

アップロードした画像の表示方法

show.html.erb

 <% if @user.image? %> 
    <p>
      <%= image_tag @user.image.url %>
    </p>
  <% end %>

このようにimage_tagで画像を表示します。また、urlメソッドにより画像データの保存場所のpathを取得しています。

アップロードした画像の保存場所

実際の画像データの保存場所はpublic/uploads/user/画像ファイル名に保存されます。
画像をアップロードしたら、確認してみましょう。

最後に

CarrierWaveの実装方法については、多くの記事が出ていますので
プログラミング初学者にとっても簡単に実装できました。

【Rails】 CarrierWaveチュートリアルの記事が非常に参考になりましたので
こちらを参照することをお勧めします。

CarrierWaveをrailsアプリに導入する方法