トップ > link_toのちょっと使えるオプション（Rails）

link_toのちょっと使えるオプション（Rails）

【結論】

・data-confirmを指定すると、リンクにアクセスする前に、確認用のポップアップを表示させる事が出来る

・target: :_blankを指定すると、リンクを別タブで開く様になる

・link_to_unless_currentメソッドを利用すると、現在のページのリンクのパスが同一の場合、リンクを生成せず、テキストを出力させる事が出来る

【目次】

【本題】

Railsでは、リンクを簡単に生成出来るlink_toメソッドというヘルパーメソッドが存在します。

link_to(文字列, パス [, オプション, HTMLオプション])

上記の様に記述する事でリンクを生成します。

今回は、このlink_toの少し使えるオプションを紹介します。

確認用のポップアップを表示させるdata-confirm

まず最初はdata-confirmです。

こちらは、 確認用のポップアップを表示させるオプションです。

以下がサンプルコードです。

<%= link_to '記事を投稿', new_post_path, data: { confirm: '本当に開きますか？' } %>

この様にポップアップが表示され、「OK」を選択する事でページが遷移します。

なお、このlink_toによって生成されるリンクは以下の様なHTMLになります。

<a data-confirm="本当に開きますか？" href="/posts/new">記事を投稿</a>

data: { confirm: '***' }がdata-confirm="***"に変わっているのが分かります。

Railsのヘルパーメソッドのオプションを書くときは、Hashを利用するのが一般的ですが、Hashのキーをシンボルにする場合、-(ハイフン)が使えないという欠点があります。

なので、こういった場合には、初めのサンプルコードの様にハッシュを階層化することで、自動的に「-」区切りしてくれるようになっています。

これはHamlで記述した場合も同様です（以下Hamlのサンプルコード）

= link_to '記事を投稿', new_post_path, data: { confirm: '本当に開きますか？' }

リンクを別タブで開くtarget: :_blank

次は、target: :_blankです。

こちらは、リンクを別タブで開く為のオプションです。

<%= link_to '記事を投稿', new_post_path, target: :_blank %>

この様に利便性の向上に欠かせないtarget: :_blankですが、遷移先のJavaScriptで元ページを不正に操作したり、パフォーマンスに悪影響を与えるといった脆弱性が存在します。

自サイトへのリンクであればリスクは低いでしょうが、外部リンクで利用する場合は、rel属性にnoopener noreferrerオプションを付与する対策が必要です。

<%= link_to '記事を投稿', new_post_path, target: :_blank, rel: :noopener %>

最後は、link_toのオプションではありませんが、link_toの派生メソッドであるlink_to_unless_currentメソッドを紹介します。

こちらのメソッドも、link_to同様にリンクを生成するヘルパーメソッドです。

違いは、現在表示中のページのURLと、リンクのパスが一致する場合、リンクを生成せずテキストを出力するという点です。

例えば、以下のようなにコードを記述したとします。

<%= link_to_unless_current '記事を投稿', new_post_path %>

この様にnew_post_path以外のページを表示している時は、リンクが生成され、クリックするとnew_post_pathにアクセス出来ます。

しかしnew_post_pathを表示している場合は、このコードはリンクを生成せず、記事を投稿というテキストだけを出力します。

メニューバーなどで、現在表示中のページを明確に示したい場合などに活用出来ます。

参考情報

http://railsdoc.com/references/link_to_unless_current

http://railsdoc.com/references/link_to_unless_current

セキュリティ対策のため、target="_blank"のa タグに "noopener noreferrer"のrel属性を自動で付与するjavascript文 - Qiita

HTML 本当は怖い target="_blank" 。rel="noopener" ってなに？ - かもメモ

リンクのtarget=_blankには「rel=noopener」でセキュリティ対策 | design Edge

http://rails.takayukikoyama.com/rails4-1/link_to-confirm-abolition/

[Rails 5][Rails 4] ‘link_to’ APIドキュメント完全翻訳｜TechRacho by BPS株式会社