3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-19

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

Ruby on rails を初心者向けに解説①

頑張っていきましょう。

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

例えば、/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

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

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

以下のようなファイル構造になっています。
image.png

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

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

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

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

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

image.png

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

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

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

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

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

image.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

###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

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

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

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

Ruby on rails を初心者向けに解説③ ~データベースの作成~

Ruby on rails を初心者向けに解説④ ~命名規則とform_Tagの使い方について~

Ruby on rails を初心者向けに解説⑤ ~データベースの編集と削除~

Ruby on rails を初心者向けに解説⑥ ~バリデーションの作成~

Ruby on rails を初心者向けに解説⑦ ~フラッシュの実装~

3
0
0

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
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?