link_toのちょっと使えるオプション(Rails)

f:id:ryoutaku_jo:20190730005544p:plain

【結論】

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: '本当に開きますか?' } %>

f:id:ryoutaku_jo:20190730005906g:plain

この様にポップアップが表示され、「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 %>

f:id:ryoutaku_jo:20190730004414g:plain

この様に利便性の向上に欠かせない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 %>

f:id:ryoutaku_jo:20190730013017g:plain

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

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

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

参考情報

link_to_unless_current - リファレンス - - Railsドキュメント

link_to_unless_current - リファレンス - - Railsドキュメント

セキュリティ対策のため、target=&quot;_blank&quot;のa タグに &quot;noopener noreferrer&quot;の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ドキュメント完全翻訳

《今日の学習進捗(3年以内に10000時間に向けて)》

久しぶりにjQueryを触ったが、かなり苦戦した・・・

エディタにテンプレートを挿入する為に、jQueryで外部のHTMLファイルを読み込む処理を実装しているが、jQueryを触る事自体が非常に久しぶりかつ、そこまで理解していない分野なので、中々思った様に実装が出来ない。

自分の取り組んでいる方向性が正しいかすら判断が付かない状態で作業を進めているので、かなり進んだ段階で実装困難な方法だと気付いて大きく手戻りが発生するといったことを繰り返している。

こういった未知の機能の開発に対して、工数見積もりの精度を高め、手戻りを最小限にする事が現状の課題だと考えている。

事前にどの様に実装するのか要件を固める事で、ある程度回避できる問題かもしれないが、過去に実装した事が無い未知の機能だと、実際に試してみないと実現可能か判断が難しく、効果的な対策が取れていない。

地道に経験を積む事で解消される問題なのかもしれないが、他に良い方法が無いか模索していきたい。

学習開始からの期間 :234日
今日までの合計時間:2245h
一日あたりの平均学習時間:9.6h
今日までに到達すべき目標時間:2137h
目標との解離:108h
「10,000時間」まで、

残り・・・「7755時間!」