Search

検索したいワードを入力してください

2019年04月10日

Railsのlink_toの書き方と実践的な使い方

Railsのlink_toメソッドは、Rubyのプログラムからリンクを作成できます。サイト間のリンクをWebサイトに掲載するのは、不可欠ともいえる機能です。ぜひともRailsのlink_toの使い方を覚え、アプリケーション中に使いやすいリンクを作成しましょう。

link_toとは

Webサイトを閲覧していると、クリックすると別サイトを読み込んだり、ブラウザーを新たに開いたうえで別サイトを表示したりする「リンク」機能が多用されています。このリンク機能をRuby on Rails(以下Railsと表記)のプログラムコードとして実現させるのが、link_toメソッドです。

link_toメソッドは、別サイトへ遷移させる「外部リンク」にも、内部移動である「内部リンク」作成にも使えます。

link_toの書き方

link_toメソッドを使ったプログラムコードは、オプションを指定する方法など、用途に応じていくつかの書き方があります。link_toを使う際に知っているべき基本構文をご紹介します。

【link_toの基本構文】
link_to(文字列, パス [, オプション, HTMLオプション])

オプションとHTMLオプションについては、link_toメソッドの必須引数ではないので、指定しないこともできます。

パスの指定

Railsのlink_toメソッドは、第1引数としてリンク機能として表示するテキスト文字列を指定します。第2引数として、リンク先となるパスやURLを指定します。自分のブログ(URL:www.mypage-xxx.com)へのリンクやトップページへのリンクを作成する場合は、以下のように記述します。

【コード記述例】
・URLの指定
<%= link_to “本日のブログ”, “http://www.mypage-xxx.com/” %>
・パスの指定
<%= link_to “TOP", root_path %>

オプションの指定

Railsのlink_toメソッドの第3引数には、ハッシュでオプションや属性を指定できます。オプションとして以下の3つが指定可能です。その他、HTMLオプションの指定も可能です。

【link_toのオプション】
・DATA要素[:data]
・HTTPメソッド(:get, :post, :put, :delete)の指定 [:method]
・Ajaxでリンクを処理[:remote]

【オプション指定する記述例】
<%= link_to “削除”, member_path(params[:id]), method: :delete %>

属性の指定

Railsのlink_toメソッド第3引数として属性を指定する場合は、以下のように記述します。第3引数に属性を指定する場合は、HTMLの<a>タグ記述をイメージすると良いでしょう。

【属性を指定する記述例】
<%= link_to “TOP”, root_path, class: “menu” %>

この記述例は、HTML<a>タグを使って、<a href=”/” class=”menu”>と記述するイメージです。

link_toの実践的な使い方

link_toメソッドの基本的な使い方を覚えたところで、実際にリンクを埋め込むプログラムコードを記述してみましょう。

まず、Railsのscaffoldを使ってlink_toメソッドを組み込むサンプルWEBアプリケーションを作成しましょう。ターミナルで以下のコマンドを実行します。以下のコマンドの「sample_app」部分には、任意のサンプルアプリケーション名を指定します。

実行コード
rails new sample_app
cd sample_app
rails g scaffold Member name:string email:string
rake db:migrate

サンプルアプリケーションを起動してみる

sample_appとして作成した「メンバー新規作成」のぺージを表示させてみましょう。まず、サーバーを起動させるため、以下のコマンドをターミナルから実行します。

【実行コード】
rails server

メンバー新規作成のページ「app/views/member/new.html.erb」を表示させます。ブラウザにURL「http://localhost:3000/members/new」を入力します。

アクションのパスを調べる

表示されたぺージに、メンバー一覧のぺージへのリンクを作成します。メンバー一覧ページのパスをlink_toメソッドに指定します。パスを指定するために、メンバー一覧ページ「app/views/member/index.html.erb」のindexアクションのパスを調べてみましょう。

アクションのパスは、「rake routes」というコマンドで調べます。ターミナルで実行してみましょう。

アクションパス確認時の注意点

「rake routes」はサーバーが停止した状態で実行します。アプリケーションページ確認のため、サーバーが起動したままになっている環境では、「control+C」の2キーを使ってサーバー停止してから、「rake routes」を実行してください。

「rake routes」を実行した結果の、一番左側(Prefix)の列に表示されている文字列に「_path」を追記すると、アクションパスになります。

アクションパスの判断

実行結果の最右(Controller#Action)列のAction名を確認して、アクションパスを判断します。「index」のアクションパスは、最右列に「index」と表示されている行のPrefix列の文字列を参照しす。

Prefix列に「xxxx」と記載されていれば、アクションパスは「xxxx_path」になります。

【コード記述例】
<%= link_to “一覧”, xxxx_path %>

Scaffoldでlink_to_demoアプリを作成する

Railsのlink_toメソッドの動作確認を行うため、link_to_demoディレクトリを作成し、お試し用のアプリケーションをこのディレクトリ配下に作成していきましょう。Railsをインストールした環境配下にlink_to_demoディレクトリを作成します。

【link_to_demo作成パス】
app/(自分の実行環境)/link_to_demo

確認環境の作成

次のコマンドを実行して、link_to確認環境を構築します。前項で作成したSampleアプリをそのまま使用しても構いません。

【実行コード】
bin/rails generate scaffold Point name:string description:text
bin/rake db:migrate
bin/rails server


これらのコードを実行すると、Pointテーブルが作成され、サーバが起動されます。

作成したテーブルの確認とデータ入力

ブラウザで「http://localhost:3000/point」にアクセスし、データを入力しておきましょう。「name」列と「description」列が生成されているので、それぞれに適当な値を設定しておきます。

基本的なリンクを作成する

link_toメソッドを使ったリンク作成のプログラムコードには、基本の書き方だけでも、外部リンクと内部リンクの指定という2種類があります。

外部リンクの場合は、以下の基本構文で「パス」の部分にURLを記述します。内部リンクの場合は、Railsで開発中のサイト内へのパスを記述します。

【link_toの基本構文】
link_to(文字列, パス)

内部リンクを作成する

内部リンクは、Railsで開発中のサイト(ここまでの例ではPoint)のページを表示させるリンクです。確認環境(Point)で、データを登録するページや、登録済みのデータを削除するページを表示させるリンクが「内部リンク」と呼ばれます。

Railsのlink_toで内部リンクを生成する際は、先にご紹介した「アクションパス」を確認し、link_toメソッドのパス引数に指定します。

外部リンクを作成する

外部リンクは、一般的にはURLで指定する外部サイトに向けたリンクですが、内部リンク以外のリンクの総称として使われています。

開発中のRails以外のシステムで動作しているサイトに向けたリンクは、すべて外部リンクです。

【コード記述例】
<%= link_to 'link_toリファレンス', "http://railsdoc.com/references/link_to" %>

classやtargetを指定する

link_toで作成したリンクは、HTMLの<a>タグと同じ動作をします。<a>タグでは、classやtarget=”_blank”を指定することができます。link_toでも、以下のように記述すると、classやtargetを指定できます。

オプションコード記述例

以下の記述例では、classとtargetを指定しています。同様の方法で、idも指定可能なので、試してみて下さい。

【コード記述例】
<%= link_to 'link_toリファレンス', "http://railsdoc.com/references/link_to" , { :class => "outer", :target => "_blank"} %>

パラメータを指定したリンクを作成する

link_toメソッドを使って、<td><a href="/points/1/edit">Edit</a></td>の「/1/」の部分のように、リンクタグの中に特定の値を埋め込むことができます。

この値をlink_toメソッドに認識させる方法が、「パラメータの指定」になります。

link_toによるパラメータの指定

Railsのlink_toを使って、<td><a href="/points/1/edit">Edit</a></td>と同様のリンクを作成する際は、以下のように記述します。

【コード記述例】
<td><%= link_to 'Edit', edit_point_path(point) %></td>

パラメータの内容

edit_point_path(point)のカッコの中の「point」がパラメータで、変数@pointsの内容を1つ取り出したPointオブジェクトです。app/views/points/index.html.erbを参照してみましょう。

<% @points.each do |point| %>という記述があり、指定したパラメータpoint専用のリンクが作成されます。

データを削除するリンクを作成する

データを削除するリンクも、link_toメソッドを使って簡単に作成することができます。app/views/points/index.html.erbファイルに、データ削除のリンクを作成する記述があるので参照してみましょう。

データ削除リンクの作成コードと生成されるHTML
【コード記述例】
<%= link_to 'Destroy', point, method: :delete, data: { confirm: 'Are you sure?' } %>
【作成されるHTML】
<a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/points/1">Destroy</a>

Railsのlink_toメソッドでリンクを作成してみよう!

Railsのlink_toメソッドは、書き方は複数種類あるものの、特に考え方や扱い方が難しいメソッドではありません。外部リンクと内部リンクとの違いを理解し、まずは、リンク先のURLまたはパスのみ指定するリンク記述から慣れていきましょう。

link_toの使い方をしっかり理解したら、オプションやパラメータなども指定し、使いやすいリンクをソースに埋め込んでいきましょう。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related