Ruby on rails を初心者向けに解説②　~リンクの作成~

#はじめに
今回は前回の記事の続きになります。

[Ruby on rails を初心者向けに解説①](https://qiita.com/renesisu727/items/c81e29c619dbd4b5ea76)

頑張っていきましょう。


#ルーティングの変更
ルーティングは自分の好きなように設定することができます。

例えば、`/pocomaru`と書いたときに、`home#top`(homeコントローラーのtopアクション)が行われるようにしましょう。

ルーティングを以下のように変更します。

```routes.rb
Rails.application.routes.draw do
  get "pocomaru" => "home#top"
end
```

この状態で、以下のようにURLを打ちます。

```
http://localhost:3000/pocomaru
```

このようにすると、`http://localhost:3000/pocomaru`というURLは`home#top`(homeコントローラーのtopアクション)という命令に置き換えられます。

ルーティングは、localhost:3000以降のURLに対して行います。

実行すると、以下の画面になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/70042bca-3616-069e-3d6f-f1a22a30eeaf.png)

#リンクの作成
それでは、リンクを作成していきましょう。

top.html.erbというファイルに、test.html.erbファイルへのリンクを張ります。

以下のようなファイル構造になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/22e500e7-7e3c-6005-8346-115f3c414a26.png)

test.html.erbファイルの中身は次のようにします。

```test.html.erb
<h1>テスト</h1>
```

このファイルへのリンクを作成していきましょう。

###リンクをクリックすると別のファイルになぜ飛ぶか
しかし、リンクをクリックして、それがユーザーに送られるとはどういうことでしょうか。

一度、何が起きているのかを考えてみましょう。以下の図をみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/d57adb7a-55bc-9075-5555-62a62229a33f.png)

リンクをクリックして別のファイルに飛ぶということは、上の図の赤く囲った部分の話になります。

ユーザーがURLをサーバーに送り、そのURLに応じてコントローラーがviewファイルを探し出し、アクションに書いてある処理をした後、viewファイルをユーザーに送ります。

このように、ユーザーがサーバーにviewファイルを要求することを`getリクエストを送る`と呼びます。

ユーザーがURLをサーバーに送る動作は様々です。リンクが貼られている文字をクリックしたり、IDを打ち込んだ後に`送信`などと書かれたボタンを押したりする、などがあります。

そのようなURLが送られてきた後、サーバーはルーティングにより翻訳を行うのでしたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/5e566704-a0d3-bb7f-bb05-87faafea6df8.png)

ルーティングにより、どのコントローラーのどのアクションを行うかを指定します。

また、これらのアクションは、viewファイルに対応しています。

例えば、ルーティングにより`homeコントローラーのtopアクション`が呼ばれると、app >> views 配下のhomeディレクトリのtop.html.erbファイルが呼ばれます。

つまり、何故リンクをクリックすると別ファイルに飛ぶのかを考えると以下のように答えることができます。

`リンクをクリックすると、URLがルーティングにより変換され、どのコントローラーのどのアクションを行うかが指定され、そのアクションに応じたviewsファイルがユーザーに送られてくるから`

##実際にリンクを作成
Ruby on railsのリンクの作成方法は大きく分けて以下の２つがあります。

+ htmlのaタグのhrefで指定する
+ Railsのlink_toメソッドを使う

せっかくなので、２つの方法で実装してみましょう。

top.html.erbファイルを以下のように書き換えました。

```top.html.erb
<h1>Hello World</h1>
<a href="test">test by href</a>
<%= link_to("test by link_to", "test") %>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/f7b478b9-608c-6178-842f-93109be2246d.png)


二行目のリンクの書き方は、典型的なhtmlのリンクの書き方ですね。

三行目の書き方に注目してください。

`<%= %>`という形で囲むと、`これはRubyのコードだよ！`と伝えることになります。link_toを使ったコードは、htmlのコードではなくRubyのコードなので、このように囲む必要があります。

ちなみに、`<% %>`で囲っても、Railsのコードであると伝えることになります。

<%%>で囲むのか、<%=%>で囲むのかについて解説と、link_toの使い方の解説を以下で行います。

###<%= %>と<% %>の違い


実は.html.erbのerbとは`Embedded RuBy`の略称になります。つまり、Rubyを埋め込んだhtmlファイルであるという意味です。

つまり、このhtml.erbファイルの内部にはRubyのスクリプトを埋め込むことができます。

<%= %>と<% %>の２つは、html.erbファイルにおいてrubyのコードを書くときに使うことになります。

しかし、htmlファイルにrubyスクリプトを埋め込むときに、別にブラウザに表示する必要がない処理を行う場合があります。

そのようなときに、この２つを使い分ける必要があります。ざっくりと以下のように覚えてください。

+ ブラウザに表示させたいときは`<%= %>`を使う
+ ブラウザに表示させたくないときは`<% %>`を使う

###link_toの使い方
link_toはRubyのコードであるので、`<% %>`か`<%= %>`で囲む必要があります。 

今回はクリックしたらどこかに飛ぶリンクを作成したいので、当然ブラウザに表示する必要があります。

`<%= %>`で囲みましょう。

link_toは、第一引数に`ブラウザに表示する文字`を取り、第二引数に`URL`を取ります。

今回は、`test`というURLを取ることにしました。

ここからは、ユーザーからリンクがクリックされた、つまりURLが送られてきたときに、test.html.erbファイルを送る方法について解説します。

まず、最初にルーティングを変更しましょう。


##ルーティングを変更
以下のようにルーティングを変更してください。

```routes.rb
Rails.application.routes.draw do
  get "pocomaru" => "home#top"
  get "test" => "home#test"
end
```

新しく、`test`とうURLが送られてきた場合に`home#top`というルーティングに変換するコードを追記しました。

つまり、ユーザーからtestというURLがクリックされると、homeコントローラーのtopアクションが実行されるようになります。

次は、homeコントローラーにtopアクションを追記しましょう。

##コントローラーにアクションを追記
homeコントローラにtestアクションを追記しましょう。

```hoem_controller.rb
class HomeController < ApplicationController
    def top
    end
    
    def test
    end
end
```

このようなコードが追記されることで、ユーザーから`home#test`というルーティングが呼ばれたときに、homeコントローラーのtestアクションを行い、view >> home >> test.html.erbファイルをユーザに送り返すことができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/baa50027-a492-babb-700a-7286e1ea5ff6.png)


#終わりに
今回はここまでになります。

ここまでお付き合い頂きありがとうございました。

よろしければ以下の記事も御覧ください。


[Ruby on rails を初心者向けに解説③　~データベースの作成~](https://qiita.com/renesisu727/items/c647582a59cfd7bf0a98)

[Ruby on rails を初心者向けに解説④ ~命名規則とform_Tagの使い方について~](https://qiita.com/renesisu727/items/f0f3de5377358f8768ed)

[Ruby on rails を初心者向けに解説⑤ ~データベースの編集と削除~](https://qiita.com/renesisu727/items/8f3a4b7c52c888b52be1)

[Ruby on rails を初心者向けに解説⑥　~バリデーションの作成~](https://qiita.com/renesisu727/items/cee8bbea1147ff78b72d)

[Ruby on rails を初心者向けに解説⑦　~フラッシュの実装~](https://qiita.com/drafts/fd36234d669283c87048/edit)