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

Railsのメソッドであるlink_toの使い方について解説していきます。今回は、link_toを実際にブラウザでの表示を確認しながら解説していきます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

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

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

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

 

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

 

20163020-2

 

今回はRuby on Railsでlink_toを使ってみよう。

 

20160620

 

田島メンター!!link_toは何をするんですか~?

 

20163020-2

 

link_toメソッドは外部へのリンクを作成したり、アプリ内での移動に使ったりするんだ。HTMLの<a>タグを作るものだと考えると分かりやすいかもしれないね。

 

20160620

 

なるほど、よく使うことになりそうですね。お願いします!

 

 

事前準備

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

rake_routes-620x194

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

例えば、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] プログラミングで挫折しない学習方法を動画で公開中

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

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

rails server

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

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

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

sample_app_index1-620x225

 

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

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

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

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

link_to_google-620x216

 

20163020-2

 

起動した画面で右クリックしてソースを表示してみよう。どうなっているかな?

 

20160620

 

<a>タグが作成されて、Googleへのリンクが貼られているのが分かりますね!

 

20163020-2

 

次はルーティングの名前で指定してみよう。先ほどrake routesで調べた情報をもとに、新規ユーザー作成画面へリンクを作成してみるよ。

 

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

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

sample_app_index2-620x216

 

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

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

before_user_show-620x157

 

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

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

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

after_user_show-620x152

 

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

link_to_result-620x241

 

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

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

 

20163020-2

 

ルーティングの名前で指定した場合の例だよ。

 

20160620

 

こうするとアプリ内での移動が可能なんですね。

 

20163020-2

 

link_toメソッドはアプリケーションを作成する際に必ず使うといってもいいほどの機能なので、しっかりと使い方を覚えておこう。

 

20160620

 

そうですね、復習しておきます。ありがとうございました!

 

 

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