Railsでメモアプリを作る(入門)

# ここで使用している環境
OS: `Windows10`
IDE: `RubyMine 2020.2.3`
Rails: `6.1.0`

```shell:Ruby
> C:\\Ruby30\\bin\\ruby.exe -v
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [i386-mingw32]
```

# 注意

- 一部、分かりやすくするために冗長な説明をしている箇所があります。
- `アクション`を`関数`と呼んでいます。
- IDEにRubyMineを使用することを前提としています。

※ただし、やっていることは他エディタ/IDEでも同じなので参考にはなるかもしれません。

以上の点について、ご理解ください。

# プロジェクト作成
1. `New Project`画面を開く
2. `Rails`->`Application`を選択
3. `Location`に好きなディレクトリ(プロジェクト名になる)を指定
4. `Ruby SDK`で使用するRubyを選択
5. `Rails Version`でRailsバージョンを選択
6. `Create`をクリック

`Create`をクリックした後、少し処理に時間が掛かるのでしばらく待ちます。

※この解説ではディレクトリ(プロジェクト名)に`RailsTestApp`を使用します。

![screenshot_20210223_160126.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/00707c85-e940-5ab9-bbff-f82c873bdc16.png)

## 手順4で使いたいRubyが無い場合
1. `Ruby SDK`ドロップダウンから`Add Ruby SDK`を選択
2. 追加したい`ruby.exe`を指定する(`C:\Ruby30\bin\ruby.exe`など)
![screenshot_20210223_155625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/daf1e96d-bf9f-17b0-5bc1-eac58f93e0d7.png)

## 手順5で使いたいRailsバージョンが無い場合
1. `Rails Version`ドロップダウンから`Install Rails Gem...`を選択
2. 少し待って出てきた画面の`Version to install`で好きなバージョンを選択して`Install`(今回は`6.1.0`を使用)

![screenshot_20210223_155739.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/6081067c-5e78-9414-b783-35ddcb5ab197.png)

## LoadError: cannot load such file -- rexml/document

1. `Gemfile`の一番下に、`gem 'rexml'`を追加する
2. `Tools`->`Bundler`->`Install`をクリック
3. `Run`をクリック

![screenshot_20210223_233422.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/8c7eef74-9464-e1bf-84ca-1b99a2e50998.png)
![screenshot_20210223_233604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/9c254406-b0d8-433c-f1d8-8657a89e827b.png)

# ポートを変更する(任意)

1. 右上のドロップダウンから`Edit Configurations...`を選択
2. `Port`に好きなポートを入力する

![screenshot_20210224_013522.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/364598b0-d64a-e5ee-4459-10333bb8a1b2.png)
![screenshot_20210224_013624.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/118b6480-870c-97d3-816f-efe1e588458b.png)

# 早速起動する
1. 右上の再生ボタンのようなものをクリック

`Listening on http://127.0.0.1:3000`と表示されたら起動完了です。

![screenshot_20210223_160933.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/5930757c-b141-6557-6d75-47263280cb92.png)
![screenshot_20210223_161042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/77c99804-e905-1331-e460-7b7c116283ad.png)

## エラーで起動できない場合の対処
- A server is already running. Check path/to/app/tmp/pids/server.pid.

`/tmp/pids/server.pid`を削除して再度起動します。

# サイトにアクセスしてみる
1. ブラウザで`localhost:3000`にアクセスする

以下のようなページが表示されたら成功です。
![screenshot_20210223_161316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/372bf05b-85f4-0a4b-b26a-21c0324a3c54.png)

# Routing・Model・View・Controllerの役割
Routing: リクエストから使用するコントローラを決定する
Model: データの塊(オブジェクト)
View: 見た目を制御する処理(主にHTMLなど)
Controller: 必要なModelをViewに渡す、受け取ったパラメータからModelを作成する、などの内部的な処理

例えば、全てのメモを表示する場合の全体的な順序としては
1. Routingによって適切なControllerの関数を呼び出し
2. ControllerでメモのModelを全て取得してViewに渡す
3. Viewでそれらのデータを視覚的に表示する
といった感じです。`MVC`などで調べてみると面白いかもしれません。

恐らく、書いているうちに理解できると思います。

# とりあえず適当なページを作ってみる
※ここではあえてジェネレータを使用していません。

ここでは、`localhost:3000/hello`にアクセスしたら<font color="red">Home</font>コントローラの<font color="blue">index</font>関数が呼ばれ、app/views/<font color="red">home</font>/<font color="blue">index</font>.html.erbが表示されるようにしてみます。

## コントローラ作成
<font color="red">Home</font>コントローラを作成したいため、コントローラのクラス名は<font color="red">Home</font>Controllerとなります。

1. `app/controllers`ディレクトリを右クリック
2. `New`->`Ruby File/Class`をクリック
3. `HomeController`と入力
4. `Class`を選択
5. `Enter`

これで`app/controllers/home_controller.rb`が作成されました。

![screenshot_20210223_164214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/a0695444-0a71-ed67-65e2-2bf53bc6eb4f.png)
![screenshot_20210223_164313.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/db58fa4b-9828-4bca-e181-ed85de500a7f.png)

## コントローラ編集
1. `app/controllers/home_controller.rb`の`class HomeController`の行に`< ApplicationController`を追加してApplicationControllerを継承する
2. 空の`index`関数を作成

```Ruby:app/controllers/home_controller.rb
class HomeController < ApplicationController
  def index
  end
end
```

## View作成
<font color="red">Home</font>コントローラの<font color="blue">index</font>関数に対応するViewを作成したいので、app/views/<font color="red">home</font>/<font color="blue">index</font>.html.erbを作成します。
1. `app/views`ディレクトリを右クリック
2. `New`->`ERB File`をクリック
3. `home/index.html`と入力
4. `Enter`

これで`app/views/home/index.html.erb`が作成されました。

![screenshot_20210223_164934.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/c8db3bd2-77cf-1b79-a7ce-4ecb35ec9dec.png)
![screenshot_20210223_170919.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/eff4425a-eccb-1250-14da-a273b505aeda.png)

## View編集
1. `app/views/home/index.html.erb`に適当な内容を書く

拡張子が`.erb`ですが普通のHTMLです。

```erb:app/views/home/index.html.erb
<h1>index.html.erb</h1>
<p>Hello, world!</p>
```

## ルーティング編集
localhost:3000/<font color="orange">hello</font>への<font color="deepskyblue">GET</font>リクエストを受けたら<font color="red">Home</font>コントローラの<font color="blue">index</font>関数を呼ぶように設定します。
そのため、必要なルーティングは<font color="deepskyblue">get</font> '<font color="orange">hello</font>' => '<font color="red">home</font>#<font color="blue">index</font>'となります。

※GETというのはHTTPメソッドの一種で、ブラウザで普通にアクセスした場合はGETになります。

1. `config/routes.rb`に`get 'hello' => 'home#index'`を追加

```rb:config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  get 'hello' => 'home#index'
end
```

### ブラウザで確認
1. ブラウザで`localhost:3000/hello`にアクセスする

`app/views/home/index.html.erb`の内容が表示されます。

※Railsの再起動は不要です。

![screenshot_20210223_171344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/5e3db784-e951-38b8-4dd7-fcfc2a5e4f43.png)

## 作ったページをrootに割り当てる
localhost:3000<font color="lightgreen">/</font>へのGETリクエストを受けたら<font color="red">Home</font>コントローラの<font color="blue">index</font>関数を呼ぶように設定します。
そのため、必要なルーティングは<font color="lightgreen">root</font> '<font color="red">home</font>#<font color="blue">index</font>'となります。
やっていることはget '<font color="lightgreen">/</font>' => '<font color="red">home</font>#<font color="blue">index</font>'とほぼ同じですが、`root`を使用することで、それがルートであることを明示することができます。

1. `config/routes.rb`に`root 'home#index'`を追加

```rb:config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  get 'hello' => 'home#index'

  root 'home#index'
end
```

### ブラウザで確認
1. ブラウザで`localhost:3000/`にアクセスする

`localhost:3000/`でも`localhost:3000/hello`でも同じ内容が表示されていることが分かります。

※お好みで`localhost:3000/hello`へのルーティング(`get 'hello' => 'home#index'`)を削除しても良いです。

# メモを投稿できる機能を作る
モデルは`Memo`、コントローラは`MemosController`、テーブル名は`memos`、メモの内容を入れるカラム名は`content`とし、以下の通りに使用出来るようにします。

| コントローラ関数名 | パス | 内容 |
| ---- | ---- | --- |
| index | GET /memos | メモの一覧を表示する |
| show | GET /memos/:id | IDが`:id`のメモを表示する |
| new | GET /memos/new | メモを作成するためのフォームを表示する |
| create | POST /memos | メモを作成するためのフォームの送信先(ここでメモが追加される) |

さらにメモの内容は空にできなく、最大1000文字までとします。

## モデル作成
「メモ」というデータの塊(オブジェクト)を扱うために、「モデル」と呼ばれるものを作成する必要があります。
ここでは、`Memo`というモデルを作成します。

モデル名が<font color="cornflowerblue">Memo</font>で<font color="purple">Text</font>型の<font color="green">content</font>カラムを作成したいので、`Generator arguments`は<font color="cornflowerblue">Memo</font> <font color="green">content</font>:<font color="purple">text</font>となります。
ここで`memos`というテーブル名を入力していない理由は、モデル名の<font color="cornflowerblue">Memo</font>から自動的に推測されるためです。

1. `Ctrl+Alt+G`もしくは`Tools`->`Run Rails Generator...`をクリック
2. `rails g model`を選択して`Enter`
3. `Generator arguments`に`Memo content:text`を入力
4. `OK`をクリック

※`Ctrl2回`->`Run Anything`起動->`rails g model`でもOKです

![screenshot_20210223_161941.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/a9cfab00-35c9-5dd6-5496-ea424b6bd095.png)
![screenshot_20210223_175426.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/579a2a98-0e13-62c1-3a3b-6dc95e98a0fe.png)
![screenshot_20210223_175252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/0fdb72ac-6505-ebf0-56ca-e57b49e7c1fe.png)

## マイグレーションファイル編集
テーブルを作成したり、カラムを追加するための「マイグレーション」と呼ばれる仕組みがあります。
これは、どんな名前のテーブルを作るのか、どんなカラムを作るのか、を定義するものです。

このファイルはモデルを作成するときの`rails g model`コマンドによって自動的に生成されています。
ここでは、これを編集して`content`カラムを`null`にできないようにします。

1. `db/migrate/xxxxxxxx_create_memos.rb`を開く
2. `t.text :content`の行に`null: false`を追加する

```rb:db/migrate/xxxxxxxx_create_memos.rb
class CreateMemos < ActiveRecord::Migration[6.1]
  def change
    # memosテーブルを作成する
    create_table :memos do |t|
      # Text型のcontentカラムを作成する
      t.text :content, null: false

      # created_at(作成日時)、updated_at(更新日時)のカラムを作成する(デフォルト)
      t.timestamps
    end
  end
end
```

## マイグレーション実行
1. `Ctrl2回`->`Run Anything`起動->`db:migrate`を選択する
2. `Enter`

※選択肢に`db:migrate`が無い場合は、入力欄に`db:migrate`と入力する。

![screenshot_20210223_194956.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/919c042f-a3c9-ce6e-8669-967ba5fbaa78.png)

## モデル編集
contentを空に出来ないように、そして文字数を1000文字までであることを検証するようにします。

1. `app/models/memo.rb`を開く

```rb:app/models/memo.rb
class Memo < ApplicationRecord
  # contentカラムのバリデーションを設定する
  # presence: true - 空に出来ない
  # lenght: {maximum: 1000} - 長さは最大1000文字
  validates :content, presence: true, length: {maximum: 1000}
end
```

## コントローラ作成
`Home`コントローラを作成するときは分かりやすくするため手動でファイルを作成しましたが、今回はモデルの時のように`rails g`コマンドを使用して生成します。
`Controller name`は、基本的にモデル名の複数形にします。
`Actions`にはコントローラ関数名の一覧をスペース区切りで入れます。

1. `Ctrl+Alt+G`もしくは`Tools`->`Run Rails Generator...`をクリック
2. `rails g controller`を選択して`Enter`
3. `Controller name`に`Memos`を入力
4. `Actions`に`index show new create`を入力
5. `OK`をクリック

![screenshot_20210223_184038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/1a5cd41a-48c4-00e6-1137-1bdffdc8f67e.png)

## ルーティング編集
先ほどの`rails g controller`によってルーティングが生成されています。
自動で生成されたルーティングを削除し、以下のように編集します。
ルーティングの意味が分からない場合は前述の[ルーティング編集](#ルーティング編集)を参照してください。

1. `config/routes.rb`を開く
2. 以下のように編集する

```rb:config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  get 'hello' => 'home#index'

  resources 'memos', only: %i[index show new create]

  root 'home#index'
end
```

`resources`は、RESTfulなルーティングをいい感じに作ってくれるやつです。
今回は`index`、`show`、`new`、`create`しか使用しないので、onlyでシンボルの配列を指定しています。

上記のルーティングは、以下とほぼ同じです。

`/memos/:id`というルーティングが出てきますが、これは`:id`の部分に任意の値が入るという意味です。
例えば`/memos/1`にアクセスした場合、変数`params[:id]`に1が入ります。この変数はコントローラやViewで使用することができます。

ルーティングの優先順位は上からです。そのため、`get 'memos/:id' => 'memos#show'`より下に`get 'memos/new' => 'memos#new'`を配置すると、`memos#show`の`id=new`としてルーティングされてしまいます。

```rb:config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  get 'hello' => 'home#index'

  # GET /memos
  get 'memos' => 'memos#index'
  # GET /memos/new
  get 'memos/new' => 'memos#new'
  # GET /memos/:id
  get 'memos/:id' => 'memos#show'
  # POST /memos
  post 'memos' => 'memos#create'

  root 'home#index'
end
```

## コントローラ編集
コントローラでは、主に必要なモデルを取得する処理をします。
`@`を付けた変数をコントローラで定義することによって後述するViewで使用することができるようになります。

1. `app/controllers/memos_controller.rb`を以下のように編集します。

```rb:app/controllers/memos_controller.rb
class MemosController < ApplicationController
  def index
    # すべてのメモを取得する
    @memos = Memo.all
  end

  def show
    # :idのメモを取得する
    memo_id = params[:id]
    @memo = Memo.find(memo_id)
  end

  def new
    # 空のメモを作成する
    @memo = Memo.new
  end

  def create
    # 受け入れるパラメータを定義
    # requireにはモデル名、permitにはカラム名
    memo_param = params.require(:memo).permit(:content)
    # メモの中身を埋めて作成
    @memo = Memo.new(memo_param)
    # セーブする(データベースに書き込む)
    if @memo.save
      # 成功した場合はメモ一覧にリダイレクト
      redirect_to(@memo)
    else
      # エラーが発生した場合はnew(フォーム)を再表示する
      render :new
    end
  end
end
```

## View編集
以下のように編集します。

これは`erb`ファイルなので、中にRubyの文を埋め込むことができます。
Rubyのifやeachなどは`<% %>`で囲います。
変数の中身などの結果を表示したい場合は`<%= %>`で囲います。
コメントを書きたい場合は`<%# %>`で囲います。
HTMLの`<!-- -->`も使用可能ですが、こちらはブラウザの「ページのソースを表示」などから見ることができます。

`<%= link_to('戻る', :back) %>`は、リンクを生成する関数です。
第二引数に入れている`:back`は前のページのパスを指しています。

`link_to`に`memo`を入れていますが、これはメモのパス(`/memos/:id`)として機能します。

### index
```erb:app/views/memos/index.html.erb
<h1>メモ一覧</h1>

<ul>
  <% @memos.each do |memo| %>
    <%= link_to memo do %>
      <li><%= memo.content %></li>
    <% end %>
  <% end %>
</ul>

<%= link_to('新規作成', new_memo_path) %>
<%= link_to('戻る', :back) %>
```

### show

```erb:app/views/memos/show.html.erb
<h1>メモ閲覧</h1>

<pre><%= @memo.content %></pre>

<%= link_to('戻る', :back) %>
```

### new

```erb:app/views/memos/new.html.erb
<h1>メモ作成</h1>

<%# エラーがあったら表示する %>
<% if @memo.errors.any? %>
  <ul>
    <% @memo.errors.full_messages.each do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
<% end %>

<%# modelにはコントローラで作った空のメモを指定する %>
<%= form_with(model: @memo, local: true) do |form| %>
  <div class="field">
    <%# メモ内容を入力するテキストエリア(labelはその説明) %>
    <%= form.label :content %><br>
    <%= form.text_area :content %>
  </div>
  <div class="actions">
    <%# 送信ボタン %>
    <%= form.submit %>
  </div>
<% end %>

<%= link_to('戻る', :back) %>
```

### create
`app/views/memos/create.html.erb`は使用しないため削除する。

1. `create.html.erb`ファイルを右クリック
2. `Delete`をクリック
3. `OK`をクリック

※これはお好みの方法でOK

![screenshot_20210223_193748.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/f16b3478-56b7-60b5-817f-842fe48fb049.png)
![screenshot_20210223_193759.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/159b9151-21ae-f0b2-297a-3d714e5abb0e.png)

## 動作を確認する
ブラウザで`localhost:3000/memos`にアクセスして、正常に動作するか確認します。

# 日本語に対応させる
デフォルトでは、このようにメッセージやボタンなどが英語になっています。
![screenshot_20210223_232128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/6820f595-e17c-f8a1-535e-a29bf1f04329.png)

## `rails-i18n`gemを入れる
1. `Gemfile`の一番下に、`gem 'rails-i18n'`を追加する
2. `Tools`->`Bundler`->`Install`をクリック
3. `Run`をクリック

![screenshot_20210223_233422.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/8c7eef74-9464-e1bf-84ca-1b99a2e50998.png)
![screenshot_20210223_233604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/9c254406-b0d8-433c-f1d8-8657a89e827b.png)

## 日本語に設定する
1. `config/application.rb`を以下のように書き換える。

```rb:config/application.rb
require_relative "boot"

require "rails/all"

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module RailsTestApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.1

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")

    # タイムゾーンを日本に設定
    config.time_zone = 'Tokyo'
    config.active_record.default_timezone = :local
    # デフォルトのロケールを日本語に設定
    config.i18n.default_locale = :ja
    # 使用可能なロケールに日本語を設定
    config.i18n.available_locales = %i[ja]
  end
end
```

## モデルの日本語表記を作成
1. `config/locale/ja.yml`を作成して以下のように編集

```yaml:config/locale/ja.yml
ja:
  activerecord:
    models:
      # モデル名: モデルの日本語表記
      memo: メモ
    attributes:
      # モデル名
      memo:
        # カラム名: カラムの日本語表記
        content: メモ内容
```

このように書くことによって、Viewに書いてある`<%= form.label :content %>`だけでいい感じに置き換わってくれます。

## 日本語化出来ているか確認

1. Railsを再起動する(停止ボタン->再生ボタン)
2. `localhost:3000/memos/new`でエラーを出して日本語化出来ているか確認する

![screenshot_20210224_015843.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/c9fa19cd-3832-4e44-8bc0-cbb6df24e300.png)

# メモにタイトルを設定できるようにする

## マイグレーションファイル作成
[メモを投稿できる機能を作る/マイグレーションファイル編集](#マイグレーションファイル編集)で編集したファイルを書き換えたくなりますが、一旦マイグレーションを行ったマイグレーションファイルを編集することはしてはいけません。そうすると、マイグレーションの意味が無くなってしまいます。

そのため、タイトルカラムを追加するマイグレーションを作成する必要があります。

今回はモデルの作成は不要なので、マイグレーションファイルのみを作成するコマンドを使用します。

<font color="cornflowerblue">memos</font>テーブルに<font color="purple">String</font>型の<font color="green">Title</font>カラムを追加したいので、`Generator arguments`はAdd<font color="green">Title</font>To<font color="cornflowerblue">Memos</font> <font color="green">title</font>:<font color="purple">string</font>となります。

ここで、`Text`型ではなく`String`型を使う理由は、タイトルは255文字を超えないからです。

1. `Ctrl+Alt+G`もしくは`Tools`->`Run Rails Generator...`をクリック
2. `rails g migration`を選択して`Enter`
3. `Genetaror arguments`に`AddTitleToMemos title:string`を入力
4. `OK`をクリック

![screenshot_20210224_004411.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/39e2bf91-c53b-7250-4048-9ac69a6ef76d.png)

## マイグレーションファイル確認
`db/migrate/xxxxxxxx_add_title_to_memos.rb`というマイグレーションファイルが作成されているので、見てみます。

```rb:db/migrate/xxxxxxxx_add_title_to_memos.rb
class AddTitleToMemos < ActiveRecord::Migration[6.1]
  def change
    add_column :memos, :title, :string
  end
end
```
今回は特に変更したい箇所は無いので変更しません。
ここで`null: false`によって`null`を禁止しない理由は、後から`null`を許可しないカラムを追加することは少しだけ難しいからです。
というのも、すでにレコードがある場合に必然的に`title`カラムが`null`になってしまいます。
そのため、`null`を許可しない場合はデフォルト値を設定するなどをする必要があります。
今回はi18nの問題もあり、表示側で`null`であったら設定されていない旨の表示をすることにします。

## マイグレーション実行
[メモを投稿できる機能を作る/マイグレーション実行](#マイグレーション実行)参照

## モデル編集
タイトルの文字数上限を50文字にします。

1. `app/models/memo.rb`に`validates :title, length: {maximum: 50}`を追記する

以下のようになっていればOKです。

```rb:app/models/memo.rb
class Memo < ApplicationRecord
  # contentカラムのバリデーションを設定する
  # presence: true - 空に出来ない
  # lenght: {maximum: 1000} - 長さは最大1000文字
  validates :content, presence: true, length: {maximum: 1000}

  # titleカラムのバリデーションを設定する
  # lenght: {maximum: 50} - 長さは最大50文字
  validates :title, length: {maximum: 50}
end
```

## コントローラ編集
カラム`title`の編集を許可する。

1. `app/controllers/memos_controller.rb`を開く
2. 21行目、`~permit(:content)`を`~permit(:content, :title)`に変更する

以下のようになっていればOKです。

```rb:app/controllers/memos_controller.rb
class MemosController < ApplicationController
  def index
    # すべてのメモを取得する
    @memos = Memo.all
  end

  def show
    # :idのメモを取得する
    memo_id = params[:id]
    @memo = Memo.find(memo_id)
  end

  def new
    # 空のメモを作成する
    @memo = Memo.new
  end

  def create
    # 受け入れるパラメータを定義
    # requireにはモデル名、permitにはカラム名
    memo_param = params.require(:memo).permit(:content, :title)
    # メモの中身を埋めて作成
    @memo = Memo.new(memo_param)
    # セーブする(データベースに書き込む)
    if @memo.save
      # 成功した場合はメモ一覧にリダイレクト
      redirect_to(memos_path)
    else
      # エラーが発生した場合はnew(フォーム)を再表示する
      render :new
    end
  end
end
```

## View書き換え
以下のように編集します。

### index
タイトルを表示するようにする。

```erb:app/views/memos/index.html.erb
<h1>メモ一覧</h1>

<ul>
  <% @memos.each do |memo| %>
    <%= link_to memo do %>
      <li><%= memo.title.blank? ? 'タイトルなし' : memo.title %>: <%= memo.content %></li>
    <% end %>
  <% end %>
</ul>

<%= link_to('新規作成', new_memo_path) %>
<%= link_to('戻る', :back) %>
```

### show
タイトルを表示するようにする。

```erb:app/views/memos/show.html.erb
<h1>メモ閲覧</h1>

<h2><%= @memo.title.blank? ? 'タイトルなし' : memo.title %></h2>

<pre><%= @memo.content %></pre>

<%= link_to('戻る', :back) %>
```

### new
タイトルの入力フィールドを追加する。

```erb:app/views/memos/new.html.erb
<h1>メモ作成</h1>

<%# エラーがあったら表示する %>
<% if @memo.errors.any? %>
  <ul>
    <% @memo.errors.full_messages.each do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
<% end %>

<%# modelにはコントローラで作った空のメモを指定する %>
<%= form_with(model: @memo, local: true) do |form| %>
  <div class="field">
    <%# タイトルを入力するテキストフィールド(labelはその説明) %>
    <%= form.label :title %><br>
    <%= form.text_field :title %>
  </div>
  <div class="field">
    <%# メモ内容を入力するテキストエリア(labelはその説明) %>
    <%= form.label :content %><br>
    <%= form.text_area :content %>
  </div>
  <div class="actions">
    <%# 送信ボタン %>
    <%= form.submit %>
  </div>
<% end %>

<%= link_to('戻る', :back) %>
```

## モデルの日本語表記を作成
1. `config/locale/ja.yml`を以下のように編集

`title: タイトル`を追加しています。

```yaml:config/locale/ja.yml
ja:
  activerecord:
    models:
      # モデル名: モデルの日本語表記
      memo: メモ
    attributes:
      # モデル名
      memo:
        # カラム名: カラムの日本語表記
        content: メモ内容
        title: タイトル
```

## ブラウザで確認
1. ブラウザで`localhost:3000/memos`にアクセスする

メモのタイトルが表示されていて、タイトル付きのメモを新規作成できるようになっています。

![screenshot_20210224_012612.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620130/3d2f3ece-bed8-bc9d-fb18-320bd520a5f8.png)

# 完成！
お疲れさまでした！
もし間違っている所や指摘がありましたら伝えて頂けるとありがたいです。
あとよろしければLGTMもよろしくお願いします！
時間があれば、編集や削除機能の付け方やテストの書き方の記事なども作成するかもしれません。