【リンクの作成!】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
赤い枠で囲った部分がルーティングの名前です。
例えば、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を元にリンク先を設定してくれます。
実際に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へのリンクが表示されたと思います。
起動した画面で右クリックしてソースを表示してみよう。どうなっているかな?
<a>タグが作成されて、Googleへのリンクが貼られているのが分かりますね!
次はルーティングの名前で指定してみよう。先ほどrake routesで調べた情報をもとに、新規ユーザー作成画面へリンクを作成してみるよ。
ルーティングの名前でリンク先を指定してみよう
次は、ルーティングの名前でリンク先を指定する方法を試していきます。
サンプルアプリケーションで「New User」リンクをクリックして適当にユーザーデータを一つ作ります。
作成したユーザーデータの「Show」リンクを押してユーザーの個別ページに行きます。
この段階では次のような画面になっていると思います。
この画面にユーザー作成ページへのリンクを貼りたいと思います。
「app/views/users/show.html.erb」を開いて一番最後の行に次のコードを書いてブラウザをリロードしてみます。
<%= link_to 'ユーザー作成', new_user_path %>
「ユーザー作成」というリンクが表示されました。リンクをクリックしてみると
「ユーザー作成」ページへ移動することができました。
以上、link_toメソッドの説明でした。
ルーティングの名前で指定した場合の例だよ。
こうするとアプリ内での移動が可能なんですね。
link_toメソッドはアプリケーションを作成する際に必ず使うといってもいいほどの機能なので、しっかりと使い方を覚えておこう。
そうですね、復習しておきます。ありがとうございました!
[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。