この記事の目的
railsを用いた、CRUD機能をもったwebアプリケーションの作成手順です。鳥の写真と名前を投稿できるサイト(birdtweet)です。
railsアプリケーションの作成
railsのバージョン6.0.0を指定。-dの後ろに使用するDB（今回はmysql)を指定。
rails _6.0.0_ new birdtweet -d mysql
設定変更。
...
# encoding: utf8mb4
encoding: utf8
...
DB作成
cd birdtweet
rails db:create
Gemfileの編集
プロジェクト直下にあるGemfileを開く
# gem 'mysql2', '>= 0.4.4'
gem 'mysql2', '>= 0.5.3'
........
(ファイル最下行)
gem 'pry-rails'
ターミナルで設定内容の更新
bundle update
modelの作成
ターミナルにて
rails g model bird
カラムを追記
...
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オプションで使うものだけを指定する。
# resourcesの後ろは、モデル名の複数形
resources :birds, only: :index
...
def index
# インスタンス変数にBirdモデルのデータを格納します。
@birds = Bird.all
end
...
index.html.erbファイル作成
ビュー内でインスタンス変数を、eachメソッドを使って全て表示します。
<% @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）なので、一連の流れを二回やります！
Rails.application.routes.draw do
# resourcesの後ろは、モデル名の複数形
# アクションが複数あるときは、配列の形にしてあげます
resources :birds, only: [:index, :new]
end
<%=link_to '新規投稿', new_bird_path, method: :get%>
...
...
def new
# Birdモデルのインスタンス化したものを、インスタンス変数に格納します。
@bird = Bird.new
end
...
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
にアクセスすると投稿画面ができてます！
次は、入力情報を登録する機能です。
Rails.application.routes.draw do
# resourcesの後ろは、モデル名の複数形
# アクションが複数あるときは、配列の形にしてあげます
resources :birds, only: [:index, :new, :create]
end
birds_controller.rb
formからのハッシュの形でデータが送られてきます。
全てのデータを受け取るのは危険です！
名前と写真のURLだけでいいのに、ログイン情報のキーを悪意で追加されて、他人のログイン情報を勝手に変更し乗っ取るということができてしまいます。
そこで、ストロングパラメータを使います。
また、privateを記述した行より下は、他のファイルから呼び出せないメソッドとなります。メソッドが増えたときに、見るべきファイルを減らせるメリットがあります。
...
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作成
<h3>投稿完了！</h3>
<a href="/birds">一覧へ</a>
今のままだと、何も入力しないで登録ができてしまいます。そこでバリデーションチェックするための記述をします。
class Bird < ApplicationRecord
# 入力必須にしたいカラム名を書きます。
validates :name, presence: true
validates :pic, presence: true
end
これでからのデータを登録できなくなりました！！
削除機能
...
resources :birds, only: [:index, :new, :create, :destroy]
...
削除機能へのリンクの調べかたは、まずコマンドで
rails routes
とします。
すると、以下の出力がされます。
Prefixの値に「_path」をつけると、URIに記載されているURLが出力されます。
今回は削除なので、VerbにDELETEと描かれている行に注目します。Prefixは「bird」となっているので、「bird_path」とすればいいですね。メソッドは、「Verb」に「DELETE」とあるので「delete」とすれば良いですね。あとは、idも渡します！
...
<%= bird.name %><%=link_to "削除", bird_path(bird.id), method: :delete%>
...
リンクが表示されました。
...
def destroy
# 今回は抽出したデータをどこにも送らないので、@をつけません。
bird = Bird.find(params[:id])
bird.destroy
end
...
<a href="/birds">一覧画面</a>
つのめどりがちゃんと削除されています！