search
LoginSignup
26

More than 3 years have passed since last update.

posted at

【ルーティング設計】1つのアクションで複数のビューを切り替えて表示する方法

背景(今回の実装内容)

今回実装していたのは、DBに登録したユーザーや商品の情報を編集する機能です。
編集画面が複数に分かれている場合(住所、メール/パスワード、支払い方法など)、
複数のビューをeditアクション1つで管理するルーティング設計についてまとめておきます。

ルーティングはできるだけ7つのアクションにまとめましょう

Ruby on Railsでは、むやみやたらとactionやcontorollerを作成するのはよくありません。
生成するルーティングが多いと、それだけアプリへ負荷がかかります。
そのため、resourcesで生成される7つのアクションにまとめるのが基本です。

問題: 1つのアクションに複数のビューを収めるにはどうしたら…

この原則に則って、1つのルーティングにつき、1つのアクション、1つのビューという形をとっていましたが、編集画面が複数ある場合はeditアクション1つにまとめるなんてことができるのでしょうか…?

答え: paramsと部分テンプレートを使いましょう!

大まかな流れとしては以下の通りです。

  1. ビュー(部分テンプレート)ファイルを用意する
  2. パスにparamsのキーを設定する
  3. リクエスト送信時にparamsの値(ここでは部分テンプレートのファイル名)を一緒に送る
  4. コントローラーでparamsの値を受け取り、renderで部分テンプレートを表示させる。

ビュー(部分テンプレート)を用意して、まずはルーティングから見ていきましょう!

ルーティング(Before)

最初は途方に暮れてアクションをズラーッと追加していました。

config/routes.rb
Rails.application.routes.draw do

  resource :users, only: [:show] do
    member do
      # 商品情報の編集
      get :listing
      get :in_progress
      get :completed
      #ユーザー情報の編集 
      get :profile 
      get :deliver_address 
      get :card 
      get :email_password 
      get :identification 
      get :sms_confirmation 
      get :logout 
    end 
  end

end

ルーティング(After)

なんとeditアクション1つに収めることができます!

config/routes.rb
Rails.application.routes.draw do

    get 'users/:name', controller: 'users', action: 'edit'

end

users/:nameの部分で、paramsのキーを設定しています。
リクエスト送信時に表示させたいビュー(部分テンプレート)のファイル名を値としてparamsに渡します。

parameters: { "name" => "部分テンプレートのファイル名" }

リクエストの送信

プロフィールのリンクをクリックした際に、第2引数のパスへリクエストを送信します。
第2引数ではusersコントローラーのeditアクションを動かして!というリクエストと一緒に
ビュー(部分テンプレート)のファイル名params[:name]に代入して送信します!

views/users/show.haml
= link_to "プロフィール", {controller: "users", action: "edit", name: "profile"}, class: "side-nav__list__content"

コントローラー

リクエストによって呼び出されたeditアクションでは、送られてきたparams[:name] = ビュー(部分テンプレート)のファイル名をrenderメソッドの引数のパスで利用します。
これで1つのアクションで、リクエストの際に送るparamsの値によってビューを切り替えて表示することができます!

controllers/users_controller
  def edit
    render "users/#{params[:name]}", locals: {user: current_user }
  end

処理の流れまとめ

今回のプロフィール編集画面を呼び出す場合

リンクで"users/profile"のリクエストが送信される

usersコントローラーのeditアクションが呼び出される

renderメソッドでviews/users/profile.hamlの部分テンプレートを表示させる

最後に

わかりづらい部分や間違っているところ、気になるところがありましたら、ぜひぜひご指摘いただけると幸いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
26