オーダーメイドコース
icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

事前準備

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] 未経験からWebエンジニアを目指す方法とは

実際に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

 

田島悠介

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

大石ゆかり

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

田島悠介

次はルーティングの名前で指定してみよう。先ほど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メソッドの説明でした。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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