リンクを追加する (2)

吉田先生

どのページへリンクをはる場合もrake routesでURIを調べることができます。

• リンクを追加する (2)
• 戻るリンクを張る (2)

リンクを追加する (2)

1.articles#showにリンクを張る

続けて、記事の詳細ページとして表示されるshow.html.erbにもリンクを作成してみましょう。

1つの記事を読み終わったら、また一覧ページへ戻れるように記事一覧へリンクをはります。

まずは記事一覧から、詳細へのリンクを作成しましょう。

$ rake routesの右側Controller#Actionからリンクを張りたいコントローラ名＃アクションを見つけます。

articles#showに対応するパスはarticle GETとなっているのでarticle_pathだとわかります。

<%= link_to "詳細を見る", article_path %>

のコードをarticles/index.html.erbへ追加してファイルを保存し、記事一覧画面を表示していたブラウザを更新してください。

ActionController::UrlGenerationError in Articles#index

とエラーが表示されてしまいました。

No route matches {:action=>"show", :controller=>"articles"}, missing required keys: [:id]

とエラーコードが表示されています。

[:id]が見つからないので、アクセスするルートがないよとのメッセージです。

これはどういうことなのでしょうか。

先ほど確認した$ rake routesを見てみると、Prefixはarticleで間違いはなさそうです。

最初にリンクを張った時の、ブラウザの裏のHTMLを思い出してください。

link_toメソッドの裏にはというHTMLが隠れています。 そして、HTMLで指定するリンク先は$rake routes のURIでした。

今回指定したarticles#showのURIは/articles/:idです。

記事詳細へ飛ぶには、たくさんある記事のどのidの記事の詳細へ飛ぶかを指定しなければいけない、ということです。

このような場合はリンクの飛び先に引数（何らかの関数で使用される値）を使います。

<%= link_to "詳細を見る", article_path(article) %>

この(article)はどこからきたのでしょうか。

articles/index.html.erbファイルのコードを見てみましょう。

<meta charset="utf-8">
&lt;h1>記事一覧&lt;/h1>

&lt;table>

   &lt;tr>

   &lt;th>タイトル&lt;/th>

   &lt;th>本文&lt;/th>

   &lt;/tr>

   &lt;% @articles.each do |article| %>

       &lt;tr>

       &lt;td>&lt;%= article.title %>&lt;/td>

       &lt;td>&lt;%= article.text %>&lt;/td>

       &lt;/tr>

   &lt;% end %>

&lt;/table>

となっています。

このarticles/index.html.erbファイルには投稿記事を一覧表示する為に、each.doの繰り返し処理のコードがあります。

の部分ですね。

ここでは@artcilesというインスタンス変数に入っている複数の記事が|article|で1つずつarticleという変数に代入された値として渡されています。

<%= link_to "詳細を見る", article_path(article) %>の（article）はこの繰り返し処理のarticleという変数からきています。

その為、<%= link_to "詳細を見る", article_path(article) %>は<% @articles.each do |article| %>～＜％ end ％＞内でしかきちんと機能しないので注意しましょう。

2.表示を整える

このように各記事ごとに詳細リンクを作るにはtableタグで列を1列追加する必要があります。

そこで

<meta charset="utf-8">

&lt;% @articles.each do |article| %>

       &lt;tr>

       &lt;td>&lt;%=article.title %>&lt;/td>

       &lt;td>&lt;%= article.text %>&lt;/td>
       &lt;td>&lt;

%= link_to "記事詳細", article_path(article) %>&lt;/td>

       &lt;/tr>

   &lt;% end %>

のようにリンクもtableタグの列として加えます。 コードを保存したら、ブラウザを更新してみましょう。

記事詳細のリンクを表示させることに成功しました。

3.articles#newにリンクを張る

記事一覧画面から新規記事作成画面へのリンクを作成します。

とび先はarticles#newにあたる部分なので、パスはnew_article_pathですね。

<%= link_to "新規記事", new_article_path %>

のコードをarticles/index.html.erbに追加して保存したら、ブラウザを更新してください。

新規記事というリンクができています。 繰り返しになりますが、このリンクの裏側のHTMLを確認すると$ rake routesのURIがとび先として指定されていることがわかります。

戻るリンクを張る

ここまでで、記事一覧（index.html.erb）から、記事詳細（show.html.erb）と新規記事（new.html.erb）へのリンクができました。

しかし、記事詳細（show.html.erb）と新規記事（new.html.erb）へ戻るリンクがなく一方通行の状態です。

ow.html.erb）と新規記事（new.html.erb）から記事一覧（index.html.erb）へのリンクを追加します。

articles#indexへのリンクなのでパスはarticles_pathですね。

一覧へのリンクのコードは

<%= link_to "記事一覧に戻る",articles_path %>

となります。

これで各ページ動詞をつなげるリンクができました。