【Ruby on Rails】AWSのcloud9（無料利用枠）でRuby on Railsを使う方法

#【Ruby on Rails】AWSのcloud9（無料利用枠）でRuby on Railsを使う方法

個人用メモです。

Ruby on Railsの基本知識から、アプリケーションの作成まで。
サーバーはAWSのcould9を無料枠内で使用。


##目次

1. [Ruby on Railsの設計思想](#ruby-on-railsの設計思想)
    2. [MVCアーキテクチャ](#mvcアーキテクチャ)
    3. [CoC](#coc)
    4. [DRY](#dry)
    5. [RESTful](#restful)
5. [AWS事前準備](#aws事前準備)
    6. [AWS cloud9とは？](#aws-cloud9とは)
    7. [cloud9の料金目安](#cloud9の料金目安)
    8. [AWSの注意事項](#awsの注意事項)
    9. [IAMの設定](#iamの設定)
    10. [ルートユーザーとIAMユザーの違い](#ルートユーザーとiamユザーの違い)
    11. [IAMの設定手順](#iamの設定手順)
    12. [請求アラートの設定](#請求アラートの設定)
13. [cloud9のセットアップ](#cloud9のセットアップ)
14. [Ruby on Railsでプロジェクト作成](#ruby-on-railsでプロジェクト作成)
15. [No connection poolエラー発生した場合の対応](#no-connection-poolエラー発生した場合の対応)
16. [画面にhello worldを表示する](#画面にhello-worldを表示する)
17. [電話帳アプリの開発](#電話帳アプリの開発)
    18. [電話帳アプリの機能](#電話帳アプリの機能)
    19. [アプリ用プロジェクトの作成](#アプリ用プロジェクトの作成)
    20. [modelの作成とmigrate](#modelの作成とmigrate)
    21. [migrateファイルとは?](#migrateファイルとは)
    22. [controllerの作成](#controllerの作成)
    23. [アクションとは？](#アクションとは)
    24. [routeファイルの編集](#routeファイルの編集)
    25. [`resources : users`の中身](#resources-usersの中身)
    26. [ページの作成](#ページの作成)
    27. [users一覧表示画面の作成](#users一覧表示画面の作成)
    28. [変数の前のアットマークの役割は？](#変数の前のアットマークの役割は)
    29. [`<% %>`と`<%= %>`の違い](#-と-の違い)
    30. [ユーザー新規登録ページの作成](#ユーザー新規登録ページの作成)
    31. [form_forとは？](#form_forとは)
    32. [link_toとは？](#link_toとは)
    33. [バリデーション機能の作成](#バリデーション機能の作成)
    34. [編集機能の追加](#編集機能の追加)
    35. [詳細ページの作成](#詳細ページの作成)
    36. [共通の処理をまとめる](#共通の処理をまとめる)




<br>
##Ruby on Railsの設計思想

1. MVCアーキテクチャ
2. CoC
3. DRY
4. RESTful

###MVCアーキテクチャ
ソフトウェア開発の設計思想の一つ。

・Model：データ操作（DBとの連携）
DBは通常SQLで操作するが、RailsではRubyで操作する。
DB-SQLの関係をDB-rubyに読み替えたものがmodel。DBの構造を表すため設計書として解説されている。


・View：画面表示
最終的に画面に表示するファイル。


・Controller：ModelとViewの仲介
ユーザーからのリクエストを受け取り、内容に応じてmodelやviewを操作する。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5136b67b-f96e-6d18-d1e7-10cb0dfc420e.png)



<br>
＜MVCを用いた代表的なフレームワーク＞
Ruby on Rails(Ruby)
Laravel(PHP)
Cake PHP(PHP)



###CoC
Convention over Configuration
「設定より規約」という設計思想。

通常必要なフレームワークの設定を、決められたルールに則って行うことで面倒な作業を省く。



###DRY
Don't Repeat Yourself.
同じ記述を繰り返さないという、コーディング時の思想。

- 重複は無駄
- 関連記述は一箇所にまとめる



###RESTful
ルーティングで用いられる考え方の一つ。

RESTな設計思想に基づいたWEBサービスのこと。

**RESTとは？**

- REpresentational State Transferの略。
- 同じURLやパラメータの組み合わせから、常に同じ結果が返る。
- システムの状態やセッションに依存しない。





<br>
##AWS事前準備
AWSのcloud9を使用するための予備知識および、事前設定について。

###AWS cloud9とは？
https://aws.amazon.com/jp/cloud9/

- クラウドベースの統合開発環境 (IDE)
- ブラウザのみでコードを記述、実行、デバッグできる
- コードエディタ、デバッガー、ターミナルが含まれrる
- JavaScript、Python、PHP などの一般的なプログラム言語に不可欠なツールがあらかじめパッケージ化済み
- ファイルをインストールしたり、開発マシンを設定したりする必要がない。


###cloud9の料金目安
無料枠内の利用では１年間、750時間分が対象。
無料期間終了後の目安はデフォルト設定で、月約200円。

- 30分間の自動休止状態。
- １ヶ月に20日間、１日あたり４時間IDEを実行する場合。
- 上記条件で90時間の使用を想定。



###AWSの注意事項
**▼アカウント管理**

- アカウント情報は厳重管理
- ID、PW、secret key
- 不正利用されると高額請求がくる場合がある


**▼課金**

- 利用しなくなったサーバーは停止する
- 従量課金サービス
- ログインしていなくても、サーバーが停止していなければ料金が発生する
- Cloud9は30分間利用しないと自動OFFになる設定がデフォルト
- 請求アラートの設定をしておく
- 無料期間は７５０時間


<br>
###IAMの設定
####IAM(アイアム)とは？

- AWS Identity and Access Managementの略
- 安全にアクセスするためのサービス
- ユーザーのアクセス権限管理


####ルートユーザーとIAMユザーの違い

・ルートユーザー
すべてのリソースへのアクセス権限をもつため、日常的に利用しない。
請求書周りの確認はルートユーザーで行う。

・IAMユーザー
IAMで権限が制限されたユーザー。日常的に使う。




###IAMの設定手順

1) AWSにサインインし、検索窓でIAMを検索。
2) ユーザー　→ ユーザーを追加


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5d98f512-d975-931f-60a8-3937be52b59d.png)


3) ユーザー名、AWSマネジメントコンソールへのアクセス、コンソールのPWは自動生成、パスワードのリセットにチェック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/47e23902-83da-4137-596f-6127591295a3.png)


4) グループの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/91a470cd-b073-1db7-2733-10deaf8b9d24.png)


5) グループ名（任意）を設定し、AdministratorAccessにチェック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/0f3cf231-6377-cfeb-42e5-ba767aa40037.png)


6) 次のステップ：タグをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/a05b8920-c14f-c380-67bc-137e4dec0ca5.png)


7) タグの追加オプション
未入力で次のステップ：確認をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f76dbed2-ad78-974e-ba91-5898424c56fc.png)


8) 内容を確認し、ユーザーの作成をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/65d1b907-b139-de25-1bc2-2746ba95a330.png)


9) csvのダウンロード
認証情報をダウンロードする。Eメール送信も可能。
DLなしで次の画面に遷移してしまうと、現在のユーザーで二度とログインできなくなってしまうので注意。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/69952efd-26ed-9b49-5b8a-bdc0a6d43b29.png)


10)DLしたファイルを表計算ソフトで開く
ExcelやVScode（Excel Viewer）など。

- user name
- password
- Console login link(URL)


11) IAMでコンソールにログインする。
URLをクリックし、user nameとPWを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/e0bf8b7a-fc95-6c02-c0d7-a2dd38507abd.png)

※アカウントIDは入力済み。


11) IAMユーザーでコンソールにログイン完了
アカウント名が設定したIAMユーザー名になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/726c6b8e-b658-90b3-72d9-691b105699cf.png)





<br>
##請求アラートの設定
1) ルートアカウントでAWSコンソールにログイン。
2) billingにアクセスする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/210fe47e-8249-c861-0030-495484412f63.png)

3) billingの設定をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/38647315-6359-71ab-8436-c8cb25390649.png)

4) 「無料利用枠の使用アラート受信」と「請求アラートを受け取る」にチェックを入れる

・PDF請求書の受け取り：任意
・Eメールアドレス：任意（アドレス追加したい場合に入力）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6c24acd6-0385-28e0-281c-ac6df761e9ed.png)

5) 設定の保存で完了



<br>
##cloud9のセットアップ
1) IAMユーザーでログイン
2) could9を検索しクリック

※下記エラーが出る場合は、IAMグループ（またはユーザー）に正しく権限が付与されていない。

対処方法：ルートユーザーでログインしIAMを設定し直す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7ed35e73-fb17-ae0e-31cc-15c5f7512677.png)




3) create environmentを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/17004447-9ff2-4455-2faa-b6fc51dc2c49.png)

※ルートユーザーでのcloud9作成は非推奨


4) Could9の名前（任意）を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ae3b7da0-40cc-3003-98b6-f15eecd323fa.png)


5) デフォルト設定で次へをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/33c9e925-4d72-d2aa-66ae-ac41f456a7f9.png)


6) 内容を確認し、create environmentをクリック

- t2.micro(無料利用枠のサーバー性能）
- After 30 minutes(自動シャットダウン設定）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b679b2e5-4420-d924-ac02-d322b42666d9.png)


7) cloud9セットアップ完了（約２分）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/a9ebdd32-838d-61ce-3282-644029ce934e.png)

画面の色やレイアウトはViewから変更可能。


8) rubyのバージョン確認
ターミナルで`ruby -v`を実行。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/721d7cc3-2eaa-d5df-3ca7-c62ff5fc5714.png)


9) cloud9の終了
タブを閉じれば、30分後に自動終了になる。


10) cloud9の再開
検索窓でcould9を検索＆クリックし、Open IDEをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/e24c47ce-3049-c376-19ae-f8518dfa8f34.png)




<br>
##Ruby on Railsでプロジェクト作成
1)「hello」というプロジェクトを作成する。

`rails new プロジェクト名`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c837bc2f-f99d-3ced-c1e9-4553f83f932c.png)
 

2) 作成したプロジェクトに移動
`cd プロジェクト名`

3) フォルダの内容を確認する
`ls`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ed9d71c6-0b03-a7f9-7135-d43e279c74ee.png)


4) Railsサーバーの立ち上げ
`rails s -b 0.0.0.0`


5) Preview→ Preview　Running Applicationをクリック 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ba2ec396-1466-ed38-fd2a-a32b3cc7209c.png)


***
### No connection poolエラー発生した場合の対応
下記エラーが発生した場合は、Gemのsqliteの設定を明示する必要がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/2520602c-c549-493e-41c6-c1c3b3860e1c.png)

5-1) Gemfileを開く
Gemfile: rubyのライブラリ（gem)を管理しているファイル。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/dafce6f6-c8d4-4f72-ed4e-7835075e2cf5.png)


5-2) gem sqliteに追記し、保存する。

```rb:
# gem 'sqlite3' 元の状態
gem 'sqlite3', '~> 1.3.6'
```

5-3) ターミナルで`bundle update`を実行する。
サーバーが立ち上がってる場合は`ctrl+c`でストップ。


5-4) ターミナルでdbを立ち上げる`rails db:create`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7c180d4e-67bd-2310-8d30-572df7565503.png)

***

6) 表示されたURLをコピーし、Chromeの新しいタブに貼り付け
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/823b93a9-f248-02fd-53a0-93fbdd35eb4c.png)

cloud9上のブラウザでは接続が拒否されましたと出るが、別ウィンドウで開くと接続できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5c2bcdd7-045a-269c-7fcd-e67a083d1720.png)




##Ruby on Railsの主要ファイル

1. controllers
2. models
3. views
4. routing

[公式ページのフォルダ構造の説明](https://railsdoc.com/page/folder_structure)


###1. controllers

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/063fbbac-f5fb-043d-30d8-f295d83e7aa0.png)



###1. models
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f0cbbafc-c91c-8780-8876-0c794293522d.png)


###2. views
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/00fe4813-3a3c-384b-78e1-7b8121af9225.png)


###3. routing

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/00cca874-d411-d9ce-7be7-1b11baa8f40d.png)



<br>
##画面にhello worldを表示する
applicationのアクションを使って、画面上に指定したテキストを表示する。

MVCモデルのMC動作確認用。（この段階でViewは未使用）


1) controllersのapplication_controller.rbを開く
2) helloアクションを定義する

`render plain:"文字列"`

```rb:
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  #追記
  def hello
    #   render text: "hello world" 直近のバージョンで「render text:」廃止。
      render plain: "hello world"
  end
  #
  
end
```


3) routingの設定をする。
config > routes.rbを開く

`root 'application#hello'`
rootのURLでアクセスした場合に、applicationコントローラーのhelloアクションを呼び出す。

```rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  
  #追記
  root 'application#hello'
  #
end
```


4) ページ更新
hello worldと表示されたらOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/af16aa6a-a527-e34f-406c-e95194a9be44.png)




<br>
##電話帳アプリの開発
###電話帳アプリの機能
DBに情報を登録する。使える機能は下記５つ。

1. 一覧表示
2. 新規登録
3. 編集
4. 詳細
5. 削除



##アプリ用プロジェクトの作成
1) プロジェクトを作成する
cloud9のターミナルで下記を実行。

```
rails new address_book
```


<br>
2) PJのディレクトリに移動

```
cd address_book
```


<br>
3) DBとしてsqlite3のバージョンを明示する。

3-1) Gemfileを開く
Gemfile: rubyのライブラリ（gem)を管理しているファイル。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/dafce6f6-c8d4-4f72-ed4e-7835075e2cf5.png)


3-2) gem sqliteに追記し、保存する。

```rb:
# gem 'sqlite3' 元の状態
gem 'sqlite3', '~> 1.3.6'
```

3-3) ターミナルで`bundle update`を実行する。

```
bundle update
```
サーバーが立ち上がってる場合は`ctrl+c`でストップ。


3-4) ターミナルでdbを作成する

```
rails db:create
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7c180d4e-67bd-2310-8d30-572df7565503.png)



<br>
####modelの作成とmigrate
4) modelの作成
modelとmigrateファイルを作成する。

- モデル名：User
- カラム：name, phone (いずれも文字列)


`rails g model モデル名`
　┗ g: generateの略
　┗ モデル名：頭文字大文字
　┗ 末尾で「カラム名:カラムの型」を指定できる 
　　（型の指定がない場合はstringになる）

```
rails g model User name:string phone:string 
```

下記２ファイルが作成される
・modelsフォルダの中に、user.rb
・dbファイルの中に、日付\_create\_モデル名.rb


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6ec52e20-610b-1882-5907-fdb315ed8a89.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/e691ed3a-28a0-84db-76a3-66fea500c59b.png)


####migrateファイルとは?
DBの設計図。

DBは通常SQL言語で操作を行うが、ruby on railsでは、rubyにより操作できるようにする。

・通常：　SQL -> DB
・Rials：　Ruby -> (SQL) -> DB

rubyでSQLを操作するために、DBの構造をrubyがわかる状態にする必要がある。それがmigrateファイル。

作成したmigrateファイルの内容は、dbに反映させる必要がある。
（migrateファイルに変更があった場合は、つど反映が必要）


<br>
5) migrateファイルをdbと紐づける。

```
rake db:migrate
```

migrateフォルダにschema.rbが作成されれば（既存の場合は内容更新）反映完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/39bb046e-7c73-3400-490a-02c61f793276.png)

 
####rakeコマンドとは？
Ruby-makeの略。Linuxのmakeコマンドを模したもの。
Rubyでよく使う処理をパッケージ化し、まとめたライブラリ。

`rake タスク名`で実行できる。



<br>
####controllerの作成
6) controllerの作成

`rails g controller コントローラー名 アクション名`
　┗ コントローラー名は頭文字大文字
　┗ アクション：指定したアクションを作成できる（※中身は空）

```
rails g controller Users index new edit update show
```

下記３つの変更がなされる。
①controllersフォルダの中に、コントローラー名_controller.rbができる。
②configフォルダの中の、routes.rbに`get 'コントローラー名/アクション名'`が追記される。
③viewsフォルダにusersフォルダ作成され、アクション名\_html.erbが作成される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b9369742-25da-a3ab-c0bd-ea00762f2630.png)

```ruby:users_controller.rb 
class UsersController < ApplicationController
  def index
  end

  def new
  end

  def edit
  end

  def update
  end

  def show
  end

end
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/675151bc-e24c-ea62-b884-517f61c3a1db.png)

```ruby:routes.rb
Rails.application.routes.draw do
  get 'users/index'

  get 'users/new'

  get 'users/edit'

  get 'users/update'

  get 'users/show'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/15d236ef-6d37-a6b7-f534-8fca9db1be8a.png)

```erb:index.html.erb
<h1>Users#index</h1>
<p>Find me in app/views/users/index.html.erb</p>
```



####アクションとは？
controllerに記述する実行内容（action)。




<br>
####routeファイルの編集
7) routeファイルの編集
既存の内容を削除し、下記を記述。
RESTfulなルーティングが設定される。


```ruby:routes.rb
Rails.application.routes.draw do
  resources :users
end
```

####▼`resources : users`の中身
rake routesコマンドで確認できる。

```ruby:
user1:~/environment/address_book $ rake routes

   Prefix Verb   URI Pattern               Controller#Action
    users GET    /users(.:format)          users#index
          POST   /users(.:format)          users#create
 new_user GET    /users/new(.:format)      users#new
edit_user GET    /users/:id/edit(.:format) users#edit
     user GET    /users/:id(.:format)      users#show
          PATCH  /users/:id(.:format)      users#update
          PUT    /users/:id(.:format)      users#update
          DELETE /users/:id(.:format)      users#destroy
```

デフォルト設定されている基本の7アクションを呼び出せる。

| アクション名 | ルーティング名 | HTTPメソッド | 概要 | URLパターン |
|:-:|:-:|:-:|:-:|:-:|
| index  | users | get | 一覧表示  | /コントローラー名  |
| create  |  | post  |  詳細表示 | /コントローラー名  |
| new  | new_user |  get | 新規表示  | /コントローラー名/new  |
| edit  | edit_user | get  | 登録  | /コントローラー名/:id/edit  |
| show  | user | get  | 編集  | /コントローラー名/:id  |
| update  |  | patch/put(post)  | 更新  | /コントローラー名/:id  |
| destroy  |  | delete(post)  |  削除 |  /コントローラー名/:id |


<br>
8) サーバーの起動
下記コマンドでサーバーを起動し、URLコピーし別タブで開く。

```
rails s -b 0.0.0.0
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/aff95566-348b-df44-e7e5-d8104ddce86e.png)


###`-b 0.0.0.0`とは?
サーバー起動時のオプション。外部サイトからも見れるようにしている。

通常はローカルの3000番ポートで http://localhost:3000 からのアクセスのみのところ、0.0.0.0とバインド(-b)することで仮想マシンが持っているipアドレスからアクセスできるようにしている。

AWSを使っているため、外部サイトからアクセスすることができるようになる。



<br>
9) ルーティングの確認
URLの末尾に`users`を付与し、下記ページが表示されればOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/811e5442-008d-d519-e235-1b4ea494d45b.png)




###ページの作成
###users一覧表示画面の作成

10) Userコントローラーのindexを編集する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/763a2476-abad-b280-0b9c-99a82b639cea.png)

`@users = User.all`
すべてのユーザーを取得して、インスタンス変数`@users`に代入する。

```rb:
class UsersController < ApplicationController
  def index
    @users = User.all
  end

#~省略~

end
```


####変数の前のアットマークの役割は？
変数に＠をつけることで、コントローラーからビューに値を渡すことができる。



11) index.html.erbの編集
viewsフォルダのindex.html.erbファイルを編集する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/97d138f4-ce19-f7b2-aa28-f21c0d87e888.png)

```erb:
<h1>ユーザー一覧</h1>
<% @users.each do |u| %>
<p>
    <%= u.id %>
    <%= u.name %>
    <%= u.phone %>
</p>
<% end %>
```

ブラウザでルートURL/usersを開き、下記画面が表示されたらOK。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/8d839618-400a-e054-ab38-04da7356ef7c.png)|
|:--|


####`<% %>`と`<%= %>`の違い
rubyをテンプレートファイル(.erb)で使うための記述。

**■`<% %>`**
 - 画面上に表示しない。
 - 記述された式を実行したり、データを呼び出す時に使う。


**■`<%= %>`**
画面上にデータを表示する


<br>
###ユーザー新規登録ページの作成
12) viewsフォルダのnew.html.erbファイルを開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/88a8b758-7b50-a0b3-09b1-988b32795685.png)


```erb:new.html.erb
<h1>新規登録</h1>
<%= form_for (@user) do |f| %>
    <p>
        <%= f.label :name %><br>
        <%= f.text_field :name %>
    </p>
    <p>
        <%= f.label :phone %><br>
        <%= f.text_field :phone %>
    </p>
    <p>
        <%= f.submit %>
    </p>
<% end %>
```


####form_forとは？
railsでformタグを簡単に記述するためのメソッド。

```erb:form_for
<%= form_for (モデル, [オプション]) do |f| %>
   formの中身
<% end %>
```

- モデル：@userや@postなどのモデルオブジェクト
- オプション：送信先urlやタグの設定など（基本不要）


```erb:form_forの中身
#カラム名のlabelタグを作成
   <%= f.label :カラム名 %>

#カラム名のテキストボックスを作成
   <%= f.text_field :カラム名 %>

#送信ボタン
   <%= f.submit  "ボタンの表示内容" %>
```


<br>
13) newアクションを編集
コントローラーを編集する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/172b734c-58cd-7fbe-0863-b957a6aa63b0.png)


`@user = User.new`
Userというインスタンスを生成し、変数userに格納する。
@をつけることで、viewにデータを受けわたす。

```rb:
class UsersController < ApplicationController
  def new
    @user = User.new
  end

#~省略~

end
```


<br>
14) createアクションの作成
Userのコントローラーに下記を追記する。
DBは不正な更新を防ぐため、指定されたカラムのみ更新可能できる設定にする。

```rb:
class UsersController < ApplicationController
  def create
    @user = User.new(user_params)
    @user.save
      redirect_to users_path
  end

  private
  def user_params
    params[:user].permit(:name, :phone)
  end

#~省略~

end
```

<br>
**▼createの処理**

- 送信されてきたパラメータ(user_params)を使って、インスタンスを生成し、変数@userに格納する。
- 格納されたデータを保存(.save)する。
- ユーザー一覧画面(users_path)にリダイレクトする。



<br>
**▼user_paramasの設定理由**
不正なデータでDBが更新されるのを防ぐ。
`.permit(:name, :phone)`：nameとphoneのみ更新を許可。

＜不正の例＞
DBにユーザー課金の状態を表すデータがあるがある場合に、不正に更新し支払い済みの状態にするなど。



<br>
15) 一覧画面に新規登録画面へのリンクを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5e28f037-a066-5080-dba2-241d44256113.png)


```erb:
<h1>ユーザー一覧</h1>
<% @users.each do |u| %>
<p>
    <%= u.id %>
    <%= u.name %>
    <%= u.phone %>
</p>
<% end %>

<!--新規登録ページへのリンク-->
<p>
    <%= link_to "新規登録", new_user_path %>
</p>
```


####link_toとは？
viewテンプレートでaタグを設置するヘルパー。

・`<%= link_to "アンカーテキスト", "URL" %>`
・`<%= link_to "アンカーテキスト", ルーティング名_path %>`
・`<%= link_to "アンカーテキスト", ルーティング名_path(引数) %>`
　┗ 引数で user.idなどパラメータを指定し、リンク先にデータを渡す。




<br>
16) 表示の確認
サーバーを起動し、ページを確認する。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/8d71cddd-0e5e-a9c1-460b-fc3987feb9f5.png)|
|:--|

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5f33cccc-eaec-ef83-9f2b-53f6c5d4260d.png)|
|:--|

▼登録できるか確認

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/0a6c556e-ed60-bc5e-4033-1d8ad04a8f28.png)|
|:--|



###バリデーション機能の作成
現状の新規登録では、名前や電話番号が空でも登録されてしまう。
必要事項が入力されていない場合はエラーを表示し、登録できないようにする。

①modelでnameカラムが空の場合にエラーメッセージを表示する処理を記述する。
②controllerのcreateアクションに、nameが空の場合にトップページに遷移せず、新規登録ページを表示する処理を追加する。
③viewsのnewファイルにvalidationエラーがあった場合にメッセージを表示する処理を記述。



<br>
**①modelでnameカラムが空の場合にエラーメッセージを表示する処理を記述**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/4543ee9e-dcc8-244a-46ab-34b703cf693b.png)

```rb:uer.rb
class User < ApplicationRecord
    validates :name, 
               presence: {message: "名前を入力してください。"}
end
```

・`validates: カラム, 処理`
・`presence`: 空白の時falseになる
・`presence: true`: 空白の時エラーになる
・`presence: {message: "テキスト"}`
・`uniquness: true`: 重複する場合エラー
・`length: { minimum: 整数}`]：最低文字数


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f6724f60-a9cc-8eef-4d32-85bff4291f0a.png)



<br>
**②controllerのcreateアクションに、nameが空の場合にトップページに遷移せず、新規登録ページを表示する処理を追加**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/78c9da15-2e59-f8cc-1b98-3085f6c50869.png)

```rb:users_controller.rb
  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to users_path
    else
      render 'new'
    end
  end
```



<br>
**③viewsのnewファイルにvalidationエラーがあった場合にメッセージを表示する処理を記述**

```erb:new.html.erb
<h1>新規登録</h1>
<%= form_for (@user) do |f| %>
    <p>
        <%= f.label :name %><br>
        <%= f.text_field :name %>
        
        <!--validationエラーの場合の表示-->
        <% if @user.errors.any? %>
            <%= @user.errors.messages[:name][0] %>
        <% end %>
    </p>
    <p>
        <%= f.label :phone %><br>
        <%= f.text_field :phone %>
    </p>
    <p>
        <%= f.submit %>
    </p>
<% end %>
```


`<% if @user.errors.any? %><% end %>`
指定したオブジェクトでエラーが発生している場合の処理。




<br>
###編集機能の追加
1) viewテンプレートの作成。
新規追加ページとほぼ同じ（タイトル以外）のため、コピペする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/2eb9e59d-58d0-5ee4-8c7f-5e1975697eb2.png)

```erb:edit.html.erb
<h1>編集</h1>
<%= form_for (@user) do |f| %>
    <p>
        <%= f.label :name %><br>
        <%= f.text_field :name %>
        
        <!--validationエラーの場合の表示-->
        <% if @user.errors.any? %>
            <%= @user.errors.messages[:name][0] %>
        <% end %>
    </p>
    <p>
        <%= f.label :phone %><br>
        <%= f.text_field :phone %>
    </p>
    <p>
        <%= f.submit %>
    </p>
<% end %>
```


2) editアクション、updateアクションの編集
コントローラーのアクションを編集する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/ff58b18a-a59e-6d53-c2e1-3b41e4924053.png)


```rb:users_controller.rb
  def edit
    @user = User.find(params[:id])
  end

  def update
    @user = User.find(params[:id])
    if @user.update(user_pramas)
      redirect_to users_path
    else
      render 'edit'
    end
  end
```


3) 一覧画面に編集ページへのリンクを設置

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/3a0e76a3-b9e1-5cf3-afd9-6903966276aa.png)

```erb:index.html.erb
<h1>ユーザー一覧</h1>
<% @users.each do |u| %>
<p>
    <%= u.id %>
    <%= u.name %>
    <%= u.phone %>
    <%= link_to "[編集]", edit_user_path(u.id) %>
</p>
<% end %>

<!--新規登録ページへのリンク-->
<p>
    <%= link_to "新規登録", new_user_path %>
</p>
```

`<%= link_to "[編集]", edit_user_path(u.id) %>`
　┗ ルート名「edit_user」に遷移
　┗ リンク先のページにデータ(u.id)を渡す



<br>
###詳細ページの作成
1) controllerのshowアクションを編集

```rb:users_controller.rb
 def show
    @user = User.find(params[:id])
 end
```


<br>
2) viewファイルを編集
views > users > show.html.erb

```rb:show.html.erb
<h1>詳細</h1>
<p>
    名前：<%= @user.name %>
</p>
<p>
    電話番号：<%= @user.phone %>
</p>
```


<br>
3) ユーザー一覧画面に詳細ページへのリンク追加




<br>
##削除機能
1) コントローラーにdestroyアクションを追加

```rb:
  def destroy
    @user = User.find(params[:id])
    @user.destroy
      redirect_to users_path
  end
```

・.findでデータを取り出す。
・データは[:id]で指定。
・.destroyで取り出したデータを削除。



<br>
2) viewファイルに削除ボタンを追加
削除ボタン（リンク）クリックで、アラートを表示し、OKを押すとデータを削除する。


```erb:index.html.erb
<h1>ユーザー一覧</h1>
<% @users.each do |u| %>
<p>
    <%= u.id %>
    <%= u.name %>
    <%= u.phone %>
    <%= link_to "[詳細]", user_path(u.id) %>
    <%= link_to "[編集]", edit_user_path(u.id) %>
    <%= link_to "[削除]", user_path(u.id), method: :delete, data:{ confirm: "削除してもいいですか？"} %>
</p>
<% end %>

<!--新規登録ページへのリンク-->
<p>
    <%= link_to "新規登録", new_user_path %>
</p>
``` 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5cc67b65-ce95-6881-7ace-3fa215f121c6.png)


<br>
###共通の処理をまとめる
dry原則に則り、controllersで共通している処理を簡略化する。

`before_action :①アクション名, only: [:②アクション名, :アクション名,,,]`
　┗ before_action:　各アクションを実行する前に適用する
　┗ ①共通化する処理を記述したアクション名
　┗ ②適用するアクション名（カンマでつなぐ）

※適用するアクション内の共通部は削除でOK（指定した①アクション名に置き換える必要はない）


```rb:users_controller.rb
class UsersController < ApplicationController
  before_action :set_user, only: [:edit, :update, :show, :destroy]
  
 #~省略~

  def edit
  end

  def update
    if @user.update(user_params)
      redirect_to users_path
    else
      render 'edit'
    end
  end

  def show
  end
  
  def destroy
    @user.destroy
      redirect_to users_path
  end
  
  private
  def user_params
  end

  def set_user
    @user = User.find(params[:id])
  end

end

```

<br>
以上で完了。