作って学ぶRuby on Rails Vol.17 ユーザー画面を整えよう!


作って学ぶRuby on Rails Vol.17 ユーザー画面を整えよう!
目次
  1. ユーザーの詳細情報を表示
  2. URLの記述方式

ユーザーの詳細情報を表示

前項に引き続き、ユーザーの詳細情報ページを作成していきます。

ユーザー一覧ページから、詳細情報ページに遷移するにはaタグを用いてリンクを作成しなければなりません。

Ruby on Railsではaタグを作成するにはlink_toメソッドを使用します。

link_toメソッドの例

<%= link_to  "ユーザー一覧", users_path %>

上記の例は、ユーザー一覧へのリンク( aタグ )を生成する例です。

第1引数が、ブラウザで表示させる文字列です。第2引数は、リンク先のURL( aタグのhrefの部分 )です。よって、上記の例のlink_toメソッドで生成されるタグは下記になります。

link_toメソッドで生成されるタグ

<a href="/users">ユーザー一覧</a>

第1引数が、aタグで囲まれているのでブラウザで実際に表示される文字列情報となります。第2引数は、users_pathと指定することで、/usersというURLが生成されています。第2引数の部分はRuby on Rails独特の記述になりますので、解説いたします。

まず、config/routes.rb を開いて下さい。

Ruby_on_Rails_ユーザー2-1

現在このように記述されているかと思います。

config/routes.rbには3行記述されており、それぞれ

  • root
  • get
  • resources

と指定されています。

このルーティングにより、link_toメソッドの第2引数で指定する値が異なります。

link_toメソッドの例

<%= link_to  "Topページへ", root_path %>

上記の例により、生成されるタグは下記になります。

<a href="/">Topページへ</a>

続いて、getと指定されている場合のURL方式ですが、場合により異なります。

現状だと、 get "top/profile" と記述されているので、この場合だと top_profile_path と記述できます。

例として、

get  "top/contact"

と記述されている場合は、 top_contact_path になります。もし、get "test/debug" だった場合は、test_debug_pathです。

つまり、指定されたActionのスラッシュの部分をアンダースコア(アンダーバー)に置き換え、後ろに_path を付加した形で表されます。最後に、resourcesと指定した場合ですが、少しややこしくなりますので下記に表としてまとめます。

URLの記述方式

指定 Action 記述
root “top/profile” root_path
get “top/profile” top_profile_path
post “top/profile” top_profile_path
:method => :post
resources :users ( index ) users_path
resources :users ( show ) user_path(引数必須)
resources :users ( new ) new_user_path
resources :users ( edit ) edit_user_path(引数必須)
resources :users ( create ) user_path(引数必須
:method => :push
resources :users ( update ) user_path(引数必須)
:method => :put
resources :users ( destroy ) user_path(引数必須)
:method => :delete

※引数必須の項目や、:method に関しては後述します。

今回は、ユーザー一覧へのリンクではなく、ユーザーの詳細情報ページへのリンクを作成するので、link_toメソッドは下記の記述になります。

<%= link_to user.name, user_path(引数) %>

ユーザーの詳細情報を表示するには、どのユーザーを対象とするのかを指定しなければならないので、引数の箇所には、user (またはuser.id) と指定します。

※引数を指定しない場合はエラーになります。

<h1>ユーザー一覧</h1>
 <div class="profile_list">
   <table>
     <theader>
       <tr>
         <th>名前</th><th>性別</th><th>生年月日</th><th>出身</th>
       </tr>
     </theader>
     <tbody>
       <% @users.each do |user| %>
         <tr>
           <td>
             <%= link_to user.name, user_path(user) %>
           </td>
           <td>
             <%= user.gender %>
           </td>
           <td>
             <%= user.birthday %>
           </td>
           <td>
             <%= user.hometown %>
           </td>
         </tr>
       <% end %>
     </tbody>
   </table>
</div>

現状では、ユーザーの詳細情報ページに関するActionやViewを作り込んでいないので何も表示されませんが、アクセスができれば成功です。

続いて、ユーザーの詳細情報ページを作成していきます。

app/controller/users_controller.rb を開き、showというActionに下記の1行を追記して下さい。

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

Ruby_on_Rails_ユーザー2-2

app/controller/users_controller.rb ``` class UsersController < ApplicationController # 初期表示 def index @users = User.all end # データを閲覧する画面を表示するためのAction def show @user = User.find(params[:id]) end # データを作成する画面を表示するためのAction def new @user = User.new end # データを更新する画面を表示するためのAction def edit end # データを作成するためのAction def create @user = User.new(user_params) @user.save redirect_to @user end # データを更新するためのAction def update end # データを削除するためのAction def destroy end

def user_params params.require(:user).permit(:name, :gender, :birthday, :hometown, :remarks) end end ```

コードの意味としては、パラメータとして受け取った値を元に、UserというModelを利用してusersテーブルを検索し、対象となったユーザー情報を @userというインスタンス変数へ格納するという内容です。

※ここでのパラメータとは、ユーザー一覧ページのlink_toメソッドの第2引数で指定された、ユーザー情報を表します。

次に、表示するViewを作成します。

app/views/users/show.html.erb を開いてください。以前、app/views/top/profile.html.erb というファイルを作成しましたが、そちらを参考に作り込みを行っていきましょう。

app/views/top/profile.html.erbは、ほぼ静的なページなのと不要な項目が含まれているので、適切な形に直さなければなりません。

Try show.html.erbを作成しよう

app/controller/users_controller.rb にて、@userというインスタンス変数へユーザー情報を代入したので、View側で@userを使用してユーザーの詳細情報ページを作成してみて下さい。

※ 以前作成した、app/views/top/profile.html.erbを参考にして下さい。

Ruby_on_Rails_ユーザー2-3

NEXT LESSON ☛ ユーザー登録画面を作り込もう!

PREV LESSON ☛ ユーザーを表示しよう!

目次 - Ruby & Ruby on Rails テキスト目次 -


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp