はじめに
今は業務で主にphpを使っているのですが、今回自主学習でRailsを使用して何か成果物を作成したいと思い学習をはじめました。何かアドバイスや修正箇所があればコメントよろしくお願いします。
開発環境
- Docker
- ruby 2.3.7
- Rails 5.2.4.4
- MySQL 5.7.32
前提
Railsの開発環境の構築を行い、新規投稿機能の実装まで完了が終わっていることが前提です。
新規投稿機能は前回の記事を参考に実装してみてください。
・Ruby on Rails 初心者向け！！新規投稿機能まとめ
投稿一覧表示機能実装
コントローラーにアクションを追加
まずは投稿一覧機能を実装していきます。一覧表示機能は基本的にはindexアクションを使います。
前回作成した、postコントローラーにindexアクションを追加していきます。
def index
end
ルーティング設定
次にルーティング設定です。
config/routes.rbに下記の記述を追加します。
Rails.application.routes.draw do
get 'posts/new' => 'posts#new'
# ここから
get 'posts' => 'posts#index'
# ここまで追加
post 'posts' => 'posts#create'
end
これで「GETメソッドでpostsパスにアクセスするとpostsコントローラーのindexアクションにアクセスする」という設定ができます。
ターミナルからも設定を確かめてみましょう。
以下のコマンドでルーティングの設定を確認できます。
# rails routes
posts GET /posts(.:format) posts#index
これでルーティング設定は完了です。
コントローラー設定
次はindexアクションの中身は書いていきます。
def index
@posts = Post.all
end
投稿一覧情報を取得するには、postモデルに対してallメソッドを使います。これでインスタンス変数@postsの中には、投稿されたデータ一覧が配列で格納されます。代入する変数名は複数形にしておきます。
ビュー設定
次はビューで先ほど取得した投稿データの表示を行います。
まずは、index.html.erbファイルを新規作成し、中身は書いていきます。
<h1>投稿一覧</h1>
<% @posts.each do |post| %>
<p>タイトル</p>
<span><%= post.title %></span>
<% end %>
<% @posts.each do |post| %>は、繰り返し処理で、先ほどコントローラーで定義した投稿一覧が格納されたインスタンス変数@postsを一つずつ取り出して、ブロック変数のpostに格納しているという意味です。
これにより、each文の中で投稿の一つ一つが格納されたブロック変数postが使用できるようになります。
<%= post.title %>の記述は、ブロック変数postのタイトルカラムを一つずつ表示しています。「変数名.カラム名」で表示するカラムが指定できます。
これで「/posts」のURLにアクセスすると投稿のタイトル一覧が表示されていると思います。
リンクの作成
次に新規投稿画面から、投稿一覧画面に遷移するリンクを設定していきます。
リンクの実装には、link_toメソッドを使用します。
新規投稿画面のビューに以下を記述していきます。
# ここから
<span>
<%= link_to "投稿一覧", "/posts" %>
</span>
# ここまで追加
<h1>投稿フォーム</h1>
<%= form_for(@post, url: '/posts') do |f| %>
<h3>タイトル</h3>
<%= f.text_field :title %>
<h3>本文</h3>
<%= f.text_area :body %>
<%= f.submit '投稿' %>
<% end %>
linl_toメソッドは、
<%= link_to 表示させるテキスト , "リンク先URL" [,オプション] %>
のように使う記述します。
これで投稿一覧ページへの遷移するテキストが投稿フォームの上に表示されていると思います。
これで投稿一覧表示機能の実装ができました。
投稿詳細表示機能実装
コントローラーにアクションを追加
次に投稿詳細機能の実装をしていきます。詳細表示機能にはshowアクションを使用します。
実装の流れは一覧表示機能と同じです。
ではpostsコントローラーにshowアクションを定義していきます。
def show
end
ルーティング設定
次にルーティング設定です。
Rails.application.routes.draw do
get 'posts/new' => 'posts#new'
get 'posts' => 'posts#index'
# ここから
get 'posts/:id' => 'postss#show'
# ここまで追加
post 'posts' => 'posts#create'
end
詳細表示のURLはどの詳細データか識別するために末尾にidがつきます。
IDが1の投稿の場合は、「posts/1」のようなURLになります。
コロン(:)idで設定することができます。
コントローラー設定
showアクションの中身を記述していきます。
def show
@post = Post.find(params[:id])
end
アクション内にparams[:id]と記述することで、先ほどルーティングで設定したURLの末尾のIDを取得することができます。findメソッドをしようすることで、idが1の場合、「IDが1のレコードを一件取得する」という意味になります。
ビュー設定
次に詳細表示画面のビューを作成します。
show.html.erbを作成し、中身を編集します。
<h2>タイトル</h2>
<p><%= @post.title %></p>
<h2>本文</h2>
<p><%= @post.body %></p>
showアクションの中に定義したインスタンス変数.カラム名でそのカラムのデータを表示することができます。今回はtitleとbodyを表示します。
これでURLが「posts/1」にアクセスすると以下のようにid=1のデータが表示されます。
リンクの作成
最後に投稿一覧画面から、詳細画面へのリンクを設定していきます。
投稿一覧画面のviewを以下のうように書き換えます。
<h1>投稿一覧</h1>
<% @posts.each do |post| %>
<p>タイトル</p>
<span><%= link_to post.title, "/post/#{post.id}" %></span>
<% end %>
これで一つ一つの投稿のタイトルをクリックするとその投稿の詳細ページへ遷移することができるようになりました。
まとめ
- 投稿一覧表示機能はindexアクション、詳細表示機能はshowアクションを使用する。
- DBからデータ一覧を取得するにはモデルに対してallメソッドを使用する。特定のデータを取得するにはfindメソッドでidを指定して取得する。
- 画面遷移のリンクを作成するには、link_toメソッドを使用する。