この記事の目的

railsを用いた、CRUD機能をもったwebアプリケーションの作成手順です。鳥の写真と名前を投稿できるサイト(birdtweet)です。

railsアプリケーションの作成

railsのバージョン6.0.0を指定。-dの後ろに使用するDB（今回はmysql)を指定。

rails _6.0.0_ new birdtweet -d mysql

設定変更。

config/database.yml

...
#  encoding: utf8mb4
  encoding: utf8
...

DB作成

cd birdtweet
rails db:create

Gemfileの編集
プロジェクト直下にあるGemfileを開く

Gemfile

# gem 'mysql2', '>= 0.4.4'
gem 'mysql2', '>= 0.5.3'
........
(ファイル最下行)
gem 'pry-rails'

ターミナルで設定内容の更新

bundle update

modelの作成

ターミナルにて

rails g model bird

カラムを追記

db/migrate/2020********create_birds.rb

...
create_table :birds do |t|
      t.string :name
      t.text :pic
      t.timestamps
end
...

コマンドにて、変更内容の更新！

rails db:migrate

コンソールでDBにデータをいくつか入れます。

rails c
Bird.create(name: "ツノメドリ", pic: "https://cdn.pixabay.com/photo/2020/05/26/13/22/puffins-5223057_1280.jpg")
Bird.create(name: "カワセミ", pic: "https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_1280.jpg")
exit

コントローラの作成

以下のコマンドで、コントローラを作成します。

rails g controller birds

複数形にしたり、しなかったり混乱しますが、
モデルだけが単数形です！

ここからの流れ

各機能作成の流れはほぼほぼ同じです！

routes.rbに追記
↓
index.html.erbに各機能へのリンクを追記（index意外）
↓
birds_controller.rbに追記
↓
機能名.html.erb作成

一覧表示機能

railsには７つのアクションがある。

index：一覧

show：詳細

new：新規作成画面への遷移

create：新規データの保存

edit：編集画面への遷移

update：編集内容の更新

destroy：削除

全機能を使わない場合は、onlyオプションで使うものだけを指定する。

config/routes.rb

# resourcesの後ろは、モデル名の複数形
  resources :birds, only: :index

app/controllers/birds_controller.rb

...
def index
    # インスタンス変数にBirdモデルのデータを格納します。
    @birds = Bird.all
  end
...

index.html.erbファイル作成
ビュー内でインスタンス変数を、eachメソッドを使って全て表示します。

app/views/birds/index.html.erb

<% @birds.each do |bird| %>
<%= bird.name %>
<div style=
"background-image: url(<%= bird.pic %>); 
 background-position: center center;
 background-size: cover;
 width: 300px; 
 height: 300px;
 margin-bottom: 10px;
 ">
</div>
<%end%>

以下のように、表示されました！！！

新規投稿機能

流れは同じく、routes → controller →　viewなのですが、投稿画面への移動（new）からのデータ追加（create）なので、一連の流れを二回やります！

routes.rb

Rails.application.routes.draw do
  # resourcesの後ろは、モデル名の複数形
  # アクションが複数あるときは、配列の形にしてあげます
  resources :birds, only: [:index, :new]
end

index.html.erb

<%=link_to '新規投稿', new_bird_path, method: :get%>
...

birds_controller.rb

...
def new
  # Birdモデルのインスタンス化したものを、インスタンス変数に格納します。
  @bird = Bird.new
end
...

new.html.erb作成

app/views/birds/new.html.erb

<%# 遷移先urlを記載しなくても、インスタンス変数に入れたモデルから判断して、遷移してくれます %>
<%=form_with(model: @bird, local: true) do |form| %>
  <%= form.text_field :name, placeholder: "鳥の名前" %>
  <%= form.text_field :pic, placeholder: "鳥の写真のURL" %>
  <%= form.submit "投稿" %>
<%end%>

http://localhost:3000/birds/new
にアクセスすると投稿画面ができてます！

次は、入力情報を登録する機能です。

routes.rb

Rails.application.routes.draw do
  # resourcesの後ろは、モデル名の複数形
  # アクションが複数あるときは、配列の形にしてあげます
  resources :birds, only: [:index, :new, :create]
end

birds_controller.rb
formからのハッシュの形でデータが送られてきます。
全てのデータを受け取るのは危険です！

名前と写真のURLだけでいいのに、ログイン情報のキーを悪意で追加されて、他人のログイン情報を勝手に変更し乗っ取るということができてしまいます。
そこで、ストロングパラメータを使います。
また、privateを記述した行より下は、他のファイルから呼び出せないメソッドとなります。メソッドが増えたときに、見るべきファイルを減らせるメリットがあります。

birds_controller.rb

...
  def create
    # private下に定義したbird_paramで指定したパラメータを受け取り、保存する。
    Bird.create(bird_param)
  end

  private
  def bird_param
    # params.require(:モデル名).permit(:カラム名,:カラム名,......)
    params.require(:bird).permit(:name, :pic)
  end
...

create.html.erb作成

app/views/birds/create.html.erb

<h3>投稿完了！</h3>
<a href="/birds">一覧へ</a>

今のままだと、何も入力しないで登録ができてしまいます。そこでバリデーションチェックするための記述をします。

app/models/birds.rb

class Bird < ApplicationRecord
  # 入力必須にしたいカラム名を書きます。
  validates :name, presence: true
  validates :pic, presence: true
end

これでからのデータを登録できなくなりました！！

削除機能

routes.rb

...
resources :birds, only: [:index, :new, :create, :destroy]
...

削除機能へのリンクの調べかたは、まずコマンドで

rails routes

とします。
すると、以下の出力がされます。
Prefixの値に「_path」をつけると、URIに記載されているURLが出力されます。

今回は削除なので、VerbにDELETEと描かれている行に注目します。Prefixは「bird」となっているので、「bird_path」とすればいいですね。メソッドは、「Verb」に「DELETE」とあるので「delete」とすれば良いですね。あとは、idも渡します！

index.html.erb

...
<%= bird.name %><%=link_to "削除", bird_path(bird.id), method: :delete%>
...

リンクが表示されました。

bird_controller.rb

...
  def destroy
    # 今回は抽出したデータをどこにも送らないので、@をつけません。
    bird = Bird.find(params[:id])
    bird.destroy
  end
...

destroy.html.erb

<a href="/birds">一覧画面</a>

つのめどりがちゃんと削除されています！