パーシャルを使ったビューの整理

パーシャルを使ったビューの整理

吉田先生

パーシャル化してコードを整理すると誰が見てもわかりやすいコードになります。

• パーシャルを使ったビューの整理

パーシャルを使ったビューの整理

ここまでで皆さんは、新しい記事を投稿するフォームを作成し、フォームからデータを送って記事を保存。

保存した記事を一覧として表示し、各画面をリンクでつなげることができるようになりました。

また、記事の更新や、削除のリンクを作成し、データの上書きや削除も実行できるようになりました。

CRUD処理の一連の流れを理解できたかと思います。

最後に、これまで書いてきたコードを整理しましょう。

将来Railsを使用してアプリ開発などを行う際、1人ではなく複数チームで開発することも考えられます。

また、自分1人で開発を進める場合も、コードはみやすくまとまっている方が便利です。

1.重複したコードをまとめる

ここまでのコードでnew.html.erbとedit.html.erbのコードはほぼ同じです。

この２つのファイルのコードの違いは、form_withのオプション部分です。

【new.html.erb】

<%= form_with scope: :article, url: articles_path, local: true do |form| %>

【edit.html.erb】

<%= form_with(model: @article, local: true) do |form| %>

しかし、form_withの項目で解説した通り、form_withというヘルパーメソッドを使用すれば@articleの中身からページの飛び先を予想してくれる為、

【new.html.erb】ファイルのコードもと置き換えても問題ありません。

つまり、２つのファイルのコードは全く同じコードということになります。

このような場合、重複したコード（今回はコード丸ごと）を新しく1つのファイルにまとめます。

重複したコードをカット

app/viewsに新しくファイルを作成し、カットしたコードを張り付けます。

このときファイル名は必ず＿（アンダーバー）から始まる名前にします。

あとで、ファイルを呼び出す時に、＿（アンダーバー）で始まるファイルを探しにいく為ファイル名をつける時は注意しましょう。

今回は_form.html.erbとします。

2.コードをまとめたファイルを呼び出す

Railsにはファイルを呼び出す為のrenderというメソッドがあります。

【new.html.erb】と【edit.html.erb】の2つのファイルには_from.html.erbのコードを呼び出すようにrenderメソッドを追加します。

ブラウザを更新してみてください。

コードをまとめる前と変わらず新規記事作成のページも、編集リンクを押した先の編集用のフォームも表示されています。

このように重複したコードをまとめたファイルをパーシャルファイルと呼びます。

今回はほぼファイル丸ごとのコードをパーシャルファイルにまとめましたが、例えばWebサイトを作成する場合、headerとfooterは必ずどのページでも必要なコードです。

そういった場合は、ヘッダーを_header.html.erb、フッターをfooter.html.erbとしてパーシャルファイルとしてまとめ、他の各ファイルにはと呼び出すことができコードも見やすくまとまります。

まとめ

今回の教程６までで、CRUD処理の一連の流れは終了です。

お疲れ様でした。

教程６では、以下の項目を勉強しました。

• リンクの作成 ```   ```

  というメソッドを使う

  • バリデーションの追加

    指定した条件をクリアしているか検証し、エラーメッセージを表示させる

    • 記事の更新

      editアクションからupdateアクションへの流れ

      form_withメソッドについて

      • 記事の削除

        HTTPメソッドとは？

        DELETEメソッドの指定の仕方

        • パーシャルファイル

          重複したコードは1つのファイルにまとめて、そのファイルを呼び出す

教程７以降は、投稿した記事にコメントをつける方法などより具体的な内容になっていきます。