Railsをガイドに沿って基礎から学ぶ③

<h1>はじめに</h1>
この記事はスキルアップを目的とした記録です。
分からない部分を自分なりに補足して書いてます。
前回はデータベースとのやり取りを実現しました。

https://qiita.com/HybridKotaro/items/cee9fb2689d08ecb5d68

今回はCRUD操作について学習していきます。

<h1>CRUD操作</h1>
CRUD操作とは、データベースに対する作成、読込、更新、削除の事を指します。アプリケーションを作成する上で非常に非常に重要な部分になります。

<h3>１．記事を表示する</h3>
前回の学習では、すべての記事を表示するように作成しました。
ここでは全ての記事1件毎に対応した画面(タイトルと本文を表示させる）を作成します。
新しい画面を用意するために、controller、routesを編集してviewを追加します。

```rb:C：\blog\app\controllers\articles_controller.rb
class ArticlesController < ApplicationController
    def index
        <省略>
    end

    def show
        @article = Article.find(params[:id])
    end
end

```

アクションメソッド(show）を追加しました。
これでshowが呼び出されたときにArticlesテーブルから一意であるidカラムを元にデータを取得し、article変数に格納しています。

Controllerにアクションの追加をしたら次はルーティングの設定です。

```rb:C：\blog\config\routes.rb
Rails.application.routes.draw do
  root "articles#index"
  get "/articles" , to: "articles#index"
  get "/articles/:id" , to: "articles#show"
end
```

ここで注意すべきはパスの末尾に[:id]が追加されているところです。
これはルーティングのパラメーターを指定します。
ルーティングのパラメーターはリクエストのパスに含まれる特定の値を取得して、その値をparamsというハッシュに保存する。

次にViewです。

```rb:C：\blog\app\views\articles\show.html.erb
<h1><%= @article.title %></h1>

<p><%= @article.body %></p>
```

ここではcontrollerで作成したarticle変数を使用して、記事に対するタイトルと本文を表示するようになっています。

これで、 http://localhost:3000/articles/1 を開くと記事を閲覧することが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1600683/adc144cd-033f-a1fe-2a7e-5e55dd8c70d6.png)

このように上にタイトル、下に本文が表示されていれば成功です。

<h3>２．リソースフルルーティング</h3>
ここまでにCRUD操作のREADを行いました。
ここではRailsのresourcesメソッドを使用してルーティングを書き直します。

```rb:C：\blog\config\routes.rb
Rails.application.routes.draw do
  root "articles#index"

  resources :articles
end
```

先ほどはアクション名毎にルーティングの設定をしていましたが、このresourcesメソッドを使用すると簡単にアクショ名とURLを紐づけることが出来ます。
ルーティングを表示するには以下のコマンドを実行します。

```
$rails routes
```

↓結果

```
      Prefix Verb   URI Pattern                  Controller#Action
        root GET    /                            articles#index
    articles GET    /articles(.:format)          articles#index
 new_article GET    /articles/new(.:format)      articles#new
     article GET    /articles/:id(.:format)      articles#show
             POST   /articles(.:format)          articles#create
edit_article GET    /articles/:id/edit(.:format) articles#edit
             PATCH  /articles/:id(.:format)      articles#update
             DELETE /articles/:id(.:format)      articles#destro
<以下省略>
```

様々なURIパターンとアクションが紐づいていることがわかります。
簡潔に書ける上にルールに従って生成されるため、ルールを覚えれば非常にわかりやすいですね。

更にresourceメソッドで宣言したルーティングにはパスヘルパーメソッドというものも設定します。
パスヘルパーとはPrefixに記している文字列に「_path」などを追加した形で利用ができ、それに紐づいたURLを返します。
このパスヘルパーを用いてindexからshow:idに飛べるようにリンクを張ります。

```rb:C：\blog\app\views\articles\index.html.erb
<h1>Articles</h1>

<ul>
  <% @articles.each do |article| %>
    <li>
      <%= link_to article.title, article %>
    </li>
  <% end %>
</ul>
```

<%= link_to ariticle.title, article %>の部分で第1引数に表示する文字列、第2引数にリンク先を指定できます。

<h3>1.3記事を作成する</h3>
次はCRUDのCです。
Railsアプリケーションでは新しくデータを作る際にはnewアクションとcreateアクションを組み合わせて扱うため、2つのアクションをコントローラーに追加します。

```rb:C：\blog\app\controllers\articles_controller.rb
class ArticlesController < ApplicationController
    <省略>
    def new
      @article = Article.new
    end
  
    def create
      @article = Article.new(title: "...", body: "...")
  
      if @article.save
        redirect_to @article
      else
        render :new
      end
    end
end
```

それぞれのメソッドについて、newアクションは新しい記事を1件インスタンス化しますがデータベースには保存しません。
createアクションは新しい記事を1件データベースに保存をします。

<h3>1.4フォームビルダーを使う</h3>
ここではフォームビルダーという機能を使います。
フォームビルダーを使えば最小限のコードで設定がすべてできたフォームを表示することが出来る上に、Railsの規約に沿ったものが出来上がります。

先ほどコントローラーにアクションを追加したnewについて書いていきます。

```erb:C：\blog\app\views\articles\new.html.erb
<h1>New Article</h1>

<%= form_with model: @article do |form| %>
  <div>
    <%= form.label :title %><br>
    <%= form.text_field :title %>
  </div>

  <div>
    <%= form.label :body %><br>
    <%= form.text_area :body %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>
```

form_withを利用してarticlesテーブルに対するフォームを生成しました。
http://localhost:3000/articles/new にアクセスすると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1600683/cb25b661-d845-e04b-d599-3c18b2af13ed.png)

このように入力フォームが出来上がります。