【リンクの作成！】Ruby on Railsでのlink_toの使い方

開発していると別のページやサイトに移動させることが多々あります。

そういった際にRubyのフレームワークのRuby on Railsでは、link_toというメソッドを使います。

今回は、link_toを実際にブラウザでの表示を確認しながら解説していきます。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

 

 

事前準備

link_toメソッドとはビューでリンク（htmlのaタグ）を表示するためのメソッドです。

ここでは、railsのscaffoldという機能を使ってサンプルアプリケーションを作成してからlink_toについて説明してきます。

まずは次のコマンドを実行してサンプルアプリケーションを作成しておきます。

rails new sample_app
cd sample_app
rails generate scaffold User name:string
rake db:migrate

 

link_toメソッドとは

link_toメソッドとはビューで使用するActionView::Helpers::UrlHelperクラスで定義されているhelperメソッドです。
名前の通りリンクを表示させたい時に使用し、htmlのaタグを生成してくれます。

link_toメソッドにリンクとして表示する文字列とリンク先を引数として渡すことで、リンクを表示させることができます。

基本的な書式は次の通りです。

link_to 'リンク文字列', リンク先のパス（URL）

それでは、リンク先の指定方法について説明していきたいと思います。

URLやパスを指定する方法

外部のサイトのURLや同じアプリケーション内のパスを指定するときは次のように書きます。

<%= link_to 'Yahoo', 'http://www.yahoo.co.jp/' %>
<%= link_to 'ユーザー一覧’, ‘/users/index’ %>

ルーティングの名前でリンク先を指定する

こちらが最も一般的で基本的な使い方です。同じアプリケーション内へのリンクを作成する場合はこれから紹介する方法を使いましょう。

「config/routes.rb」で設定しているルーティングの名前に「_path」をつけたものをリンク先として指定します。

ルーティングの名前を確認するときは次のコマンドを使うと便利です。作成したサンプルアプリケーションで実行してみてください。

rake routes

赤い枠で囲った部分がルーティングの名前です。

例えば、users_controllerのnewアクション（新規作成画面）にリンクを貼りたいときは

<%= link_to '新規作成’, new_user_path %>

と書きます。

 

また、「app/views/users/index.html.erb」の中身を見てみると、編集画面へリンクを指定している部分に

<%= link_to 'Edit', edit_user_path(user) %>

という記述があります。「(user)」という引数があると思いますが、これはどの「user」についての編集画面にリンクを設定するのかというのを表しています。

「edit_user_path」にuser変数を引数としてわたすことで、user変数に入っているユーザーデータのidを元にリンク先を設定してくれます。

 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

実際にlink_toメソッドを使ってみよう

先ほど作成したサンプルアプリケーションを次のコマンドを実行して起動させましょう。

rails server

URLやパスを指定する方法を使ってみよう

外部のサイトのURLや同じアプリケーション内のパスを指定する方法を試していきます。

サンプルアプリケーションの「http://localhost:3000/users」を開くと次のような画面になっていると思います。

 

ここにGoogleへのリンクを表示させたいと思います。

「app/views/users/index.html.erb」を開いて一番最後の行に次のコードを書いてみるます。

<%= link_to 'Google', 'https://www.google.co.jp/' %>

ファイルを保存したらブラウザをリロードしみます。すると次のようにGoogleへのリンクが表示されたと思います。

 

 

ルーティングの名前でリンク先を指定してみよう

次は、ルーティングの名前でリンク先を指定する方法を試していきます。
サンプルアプリケーションで「New User」リンクをクリックして適当にユーザーデータを一つ作ります。

 

作成したユーザーデータの「Show」リンクを押してユーザーの個別ページに行きます。

この段階では次のような画面になっていると思います。

 

この画面にユーザー作成ページへのリンクを貼りたいと思います。

「app/views/users/show.html.erb」を開いて一番最後の行に次のコードを書いてブラウザをリロードしてみます。

<%= link_to 'ユーザー作成', new_user_path %>

 

「ユーザー作成」というリンクが表示されました。リンクをクリックしてみると

 

「ユーザー作成」ページへ移動することができました。

以上、link_toメソッドの説明でした。

 

 

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。