はじめてのRailsアプリケーション開発　メモ｜Chopesu Blog - 文系・未経験でエンジニアに転身した元営業マンのエンジニアライフ

Railsアプリケーションの簡単な開発の流れをすぐに思い出せるように、メモ書きとして残しておこう。

Contents

開発環境
新規アプリケーション作成
データベース作成
モデル・テーブル作成
- モデル作成
- テーブル作成
ルーティングの設定
コントローラの作成
ビューの作成
レイアウトファイル（views/layouts/application.html.erb）
- データをWeb上に表示する
機能の追加（例：createメソッド）

開発環境

Ruby2.3以上
Rails5.0以上
DB：MySQL5.7
GUIツール：Sequel Pro
開発環境：development

新規アプリケーション作成

ターミナルを起動して、「rails new」コマンドを入力

rails new アプリケーション名 -d mysql
#-d はデータベースのこと、-d mysqlでMySQLをDBに指定

1 2	rails new アプリケーション名 -d mysql #-d はデータベースのこと、-d mysqlでMySQLをDBに指定

gemを追加したい場合は、Gemfileへ移動してgemを追加して、インストールする

#ターミナル
bundle install

1 2	#ターミナル bundle install

新米ながら、当時使っていたgemをまとめてみた

#group :development
gem 'haml-rails'
gem 'erb2haml'
gem "font-awesome-rails"

gem 'devise'
gem 'kaminari'
gem 'pry-rails'

gem 'rails-i18n'
gem 'carrierwave'
gem 'mini_magick'
gem 'annotate'

#deviseでユーザー認証を作らない場合
gem 'bcrypt', '~> 3.1.7'

#group :development, :test
gem 'rails-flog', require: 'flog'
gem 'rspec-rails'
gem 'factory_bot_rails'
gem 'faker'
gem 'rubocop-rspec'
gem "rails-controller-testing"

#group :development

gem 'haml-rails'

gem 'erb2haml'

gem "font-awesome-rails"

gem 'devise'

gem 'kaminari'

gem 'pry-rails'

gem 'rails-i18n'

gem 'carrierwave'

gem 'mini_magick'

gem 'annotate'

#deviseでユーザー認証を作らない場合

gem 'bcrypt', '~> 3.1.7'

#group :development, :test

gem 'rails-flog', require: 'flog'

gem 'rspec-rails'

gem 'factory_bot_rails'

gem 'faker'

gem 'rubocop-rspec'

gem "rails-controller-testing"

データベース作成

#ターミナル
bundle exec rake db:create

1 2	#ターミナル bundle exec rake db:create

Sequel Proでデータベースの中身を確認
※ソケット接続が失敗しました！とエラーが出た場合は、下記をターミナルでコマンドし、MySQLを再起動

cd ~
mysql.server start
starting MySQL
.. SUCCESS!

cd ~

mysql.server start

starting MySQL

.. SUCCESS!

#ターミナル
bundle exec rake db:migrate

1 2	#ターミナル bundle exec rake db:migrate

モデル・テーブル作成

モデル作成

まずはモデルを作成

#ターミナル
rails g model モデル名

1 2	#ターミナル rails g model モデル名

モデルやテーブルには命名規則があるので、モデルを作成する際はモデル名に注意する。

【モデルの命名規則】

種類	概要	名前
モデルクラス名	先頭は大文字、単数形	Tweet
モデルクラスのファイル名	先頭は小文字、単数形	tweet.rb
テーブル名	先頭は小文字、複数形	tweets

モデルを作成すると、migrationファイル（テーブルの設計図）が生成される。

テーブル作成

■migrationファイル：テーブルの設計図。ここに必要なデータの属性等を定義する。

  class CreateTweets < ActiveRecord::Migration[5.2]
    def change
      create_table :tweets do |t|
        t.string      :name
        t.text        :text
        t.text        :image
        t.timestamps
      end
    end
  end

class CreateTweets < ActiveRecord::Migration[5.2]

def change

create_table :tweets do |t|

t.string :name

t.text :text

t.text :image

t.timestamps

end

【データ型一覧】

データ型	役割
string	文字列型
text	テキスト型（複数行に渡る長文に適している）
integer	整数型
float	浮動小数点型
decimal	固定長整数型
datetime	日時型
date	日付型
time	時刻型
binary	バイナリ文字列型（テキストデータ以外のデータ） https://wa3.i-3-i.info/word1146.html
boolean	真偽値型
references	外部キー

定義付けが完了したら、下記コマンドでmigrationファイルを実行する。

#ターミナル
bundle exec rake db:migrate

1 2	#ターミナル bundle exec rake db:migrate

これでテーブルが完成

マイグレーションファイルの記述が間違えてしまった場合は、下記コマンドでmigrationの実行前に戻す。

#ターミナル
bundle exec rake db:rollback

1 2	#ターミナル bundle exec rake db:rollback

ファイルを実行前に戻した上で、ファイルを編集し、「(bundle exec )rake db:migrate」をすればOK

ルーティングの設定

■ルーティング：ブラウザから送られてきたHTTPリクエストを、コントローラに送ることで、サーバー側での処理メソッド（アクション）を指定して、実行するよう促す。
⇒　HTTPについては、HTTPの仕組みで確認

routes.rbでリクエストに対するコントローラとアクションを指定

#routes.rb
Rails.application.routes.draw do
#mypageのパス経由で送られてきたgetメソッドを、usersコントローラーに送り、me（メソッド）の処理を実行する
  get 'mypage', 　　to: 'users#me'

  post 'login', 　　to: 'sessions#create'
  delete 'logout', to: 'sessions#destroy'

#リソースベースルーティング。resources :コントローラー名で7つのメソッドを全て扱えるようになる。
  root 'home#index'
  resources :users,    only: %i[new create]
  resources :boards
  resources :comments, only: %i[create destroy]

end

#routes.rb

Rails.application.routes.draw do

#mypageのパス経由で送られてきたgetメソッドを、usersコントローラーに送り、me（メソッド）の処理を実行する

get 'mypage', 　　to: 'users#me'

post 'login', 　　to: 'sessions#create'

delete 'logout', to: 'sessions#destroy'

#リソースベースルーティング。resources :コントローラー名で7つのメソッドを全て扱えるようになる。

root 'home#index'

resources :users, only: %i[new create]

resources :boards

resources :comments, only: %i[create destroy]

end

Railsでは、基本的に7つのアクション（処理）を使用する。このアクションの処理方法（メソッド定義）はコントローラーで行う。
HTTPリクエストを処理するということもあり、HTTPメソッドとアクションの役割が似ている。
https://qiita.com/r_fukuma/items/a9e8d18467fe3e04068e

【7つのアクション】

アクション	役割	扱いたいデータとインスタンス変数（Tweetテーブルを例に）
index	リソースの一覧を表示する。	@tweets = Tweet.で一覧表示するデータを複数代入
show	リソースの内容を表示する。	@tweet = Tweet.find(params[:id])　で表示したいリソースをピンポイントで（idを指定して）取得
new	リソースを追加する。	@tweet = Tweet.new これはビュー表示によって変わるが、場合によってはなくても良い
create	リソースを追加し、作成する。	Tweet.create(image: tweet_params[:image], text: tweet_params[:text], user_id: current_user.id　など、変数に代入する形ではなく、「.create」メソッドを使用することで、リソースの生成と保存まで完結させてしまう。
edit	リソースを更新するためのフォームを表示する。	@tweet = Tweet.find(params[:id])　で編集したいリソースをピンポイントで（idを指定して）取得
update	リソースを更新する。	editと同様に、tweet = Tweet.find(params[:id])で更新したデータを取得。条件分岐は自由だが、「.update」メソッドを使用して更新する。
destroy	リソースを削除する。	editと同様に、tweet = Tweet.find(params[:id])で削除したいデータを取得し、.deleteで削除。

コントローラの作成

■コントローラ：ルーティングから受けたリクエストに基づき、サーバーで処理を実行。

#ターミナル
#作成
rails g controller コントローラー名
#削除
rails d controller コントローラー名

#ターミナル

#作成

rails g controller コントローラー名

#削除

rails d controller コントローラー名

コントローラはApplicationControllerを継承したクラスである。ここではコントローラのクラスに対するインスタンスメソッドを定義していくことになる。これが俗に言われる「アクション」である。

ビューの作成

■ビュー：サーバーで処理した内容をもとに、レスポンスでクライアントに返すHTMLファイルを作成する。つまり、ここにHTMLを記述していく。ユーザー目線で言うと、リクエストを出した後に画面に表れる表示がビュー。

ビューファイルはapp/views/コントローラー名/で新しいファイルを自分で作成する。
→ビューファイルは「コントローラと同じ名前のフォルダ」内にある「アクション名と同じファイル名」のものが適用されるというのがRailsのルールなので作成場所・ファイル名のスペルミスには注意。

レイアウトファイル（views/layouts/application.html.erb）

ビューファイルの中でも一番先に読み込まれるファイル。ヘッダー・フッター・メタデータなど、全てのビューファイルで共通して使用する記述をここで定義しておくことで、同じコードを省略することができる。

  <!DOCTYPE html>
  <html>
    <head>
      <title>PicTweet</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
    </head>
    <body>

    <%= yield %>

    </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>PicTweet</title>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

<%= csrf_meta_tags %>

</head>

<body>

<%= yield %>

</body>

</html>

<%= yield %>
これはこの部分をlayout以外のディレクトリで記述したビューファイルの内容に置き換えるという意味。

ここまで出来たらrails sでサーバー機動して、動作確認。この状態ではまだHTMLを記述していないので、何もブラウザには出てこないはず。

データをWeb上に表示する

コントローラにビューに表示したい情報を定義する。
→コントローラでよくインスタンス変数（＠変数名）が使われるが、これは紐づくモデルクラス・テーブルの中にあるデータ・情報を変数として抽出するために使う特殊な変数。この変数をビューファイルで表示させる際は、HTMLの記述の際に、Rubyタグ（<%= %>）を使って記述する。

【indexアクション（メソッド）のインスタンス変数】

def index
    @tweet = Tweet.all  #テーブル内の全てのデータを取得
end

def index

@tweet = Tweet.all #テーブル内の全てのデータを取得

end

ここでallメソッドが使えるのは、TweetというActiveRecordクラスを継承したモデルクラスに対して
使用するインスタンスメソッドだから。当たり前だが、find/new/save/createといった他のメソッドもTweetというモデルクラスに対してしか使えないメソッド。

【Rubyタグの記述例】

  <div class="contents row" >
    <p><%= @tweet.text %></p>
  </div>

</div>

■プロパティ値
＝各カラムに保存されている値
「変数.カラム名」でそのインスタンスのプロパティ値を取り出すことができる
上の例でいうと、@tweetというTweetモデルのインスタンスのうち、textカラムに保存されているプロパティ値を取り出している。

複数のデータをビューで表示したい時は、eachメソッドを使って繰り返し処理を行う。

<div class="contents row" >
  <% @tweets.each do |tweet| %>
    <p><%= tweet.text %></p>
  <% end %>
</div>

<% @tweets.each do |tweet| %>

<% end %>

</div>

このようにすると、eachメソッドのdoとend（ブロック）で囲まれた<%= tweet.text %>の部分を、@tweetsのレコード（インスタンス）の数だけ繰り返し表示するようになる。

機能の追加（例：createメソッド）

作成手順

①ルーティングの設定
②コントローラで新しくアクション名を定義
③ビューファイルを作って表示させる。

＜例（投稿機能の実装）＞
①ルーティングの設定

ブラウザからサーバーに入力情報を送信する＝postメソッド

  Rails.application.routes.draw do
    get   'tweets'      =>  'tweets#index'     #ツイート一覧画面
    get   'tweets/new'  =>  'tweets#new'       #ツイート投稿画面
    post  'tweets'      =>  'tweets#create'    #ツイート投稿機能
  end

Rails.application.routes.draw do

get 'tweets' => 'tweets#index' #ツイート一覧画面

get 'tweets/new' => 'tweets#new' #ツイート投稿画面

post 'tweets' => 'tweets#create' #ツイート投稿機能

end

②コントローラで新しくアクション名を定義
投稿機能＝ユーザーがフォームで入力した情報をレコードとして作成し、テーブルに送り、保存する
作成＆保存＝＝createメソッド

def create
  Tweet.create(name: "", image: "", text: "")
end

def create

Tweet.create(name: "", image: "", text: "")

end

これでTweetモデルクラスのインスタンス（レコード）を生成している。
ちなみにインスタンス（レコード）はハッシュの形をしているので、引数にキーと値がそれぞれ入っている

＜ポイント＞
ユーザーがフォームに入力した値は、コントロール内では「params」という変数に入っている。
ちなみにparamsはハッシュ型のオブジェクト。ゆえにハッシュ型と同様に[:キー名]で値を取得できる。

params[:name]
=>"abe"
params[:text]
=>"hello"

params[:name]

=>"abe"

params[:text]

=>"hello"

このparamsのキーは、ビューファイルで記入したinputタグ中のname属性で定義されている。
また、入力された値はパラメーターと、名前を変えてキーと一緒にparamsに入る。

<div class="contents row">
  <%= form_tag('/tweets', method: :post) do %>
    <h3>
      投稿する
    </h3>
    <input placeholder="Nickname" type="text" name="name">
    <input placeholder="Image Url" type="text" name="image">
    <textarea cols="30" name="text" placeholder="text" rows="10"></textarea>
    <input type="submit" value="SENT">
  <% end %>
</div>

<%= form_tag('/tweets', method: :post) do %>

<h3>

投稿する

</h3>

<% end %>

</div>

パラメーターを受け取っているparamsから適切なキーを取り出すことで、ユーザーが入力する値をテーブルに保存することができる。

def create
      Tweet.create(name: params[:name], image: params[:image], text: params[:text])
    end

def create

Tweet.create(name: params[:name], image: params[:image], text: params[:text])

end

ストロングパラメータ

def test_params
  params.permit(:キー名, :キー名)
end

def test_params

params.permit(:キー名, :キー名)

end

ストロングパラメーターとは、指定したキーを持つパラメーターのみを受け取るようにするもの。
これを指定することで、保存したくないデータは保存されなくなる。セキュリティの観点でもストロングパラメータを使用しなければ、アプリケーションに必要ない、余計なデータを保存してしまうことになるので、良くない。permitメソッドで指定のキー名とそのバリューだけを残した新たなハッシュを作っている。

ストロングパラメータを使って、フォームに入力された情報をもとにインスタンス（レコード）を作成し、
テーブルに保存する。

def create
  Tweet.create(tweet_params) #引数にストロングパラメータの値を取っている。
end

private
def tweet_params
  params.require(tweet).permit(:name, :image, :text) #name,image,textカラムのデータのみ保存
end