「active_link_to」で表示中のページのリンクへ動的にclassを付与する方法

f:id:ryoutaku_jo:20190604174328p:plain

【結論】

・active_link_toとは、Railsのgemの一種。link_toと同じように、リンクを生成する「active_link_to」メソッドを利用できるようになる

・「active_link_to」メソッドは、リンク先のページを開いていると、リンクに「class=“active”」を付与する

・サイドバーをハイライトさせたり、リンクを無効化させる際に利用できる

【目次】

【本題】

サイドバーなどを制作する際、リンク先のページを開いている際には、該当リンクの背景色などを濃くしたりして、強調したい場合があります。

※参考例(Qiita) f:id:ryoutaku_jo:20190604174344p:plain f:id:ryoutaku_jo:20190604174357p:plain

Qiitaの場合、どの様にこれを実装しているのかデベロッパーツールで確認してみると、該当リンクに「p-home_menuItem-active」というクラスを付与している様です。

f:id:ryoutaku_jo:20190604174411p:plain f:id:ryoutaku_jo:20190604174422p:plain

この様に動的にclassを付与したい場合、Railsでは「active_link_to」というgemを利用する方法があります。

「active_link_to」とは、Railsのgemの一種です。

これを導入すると、link_toと同じように、リンクを生成する「active_link_to」メソッドを利用できるようになります。

「active_link_to」メソッドでリンクを生成すると、リンク先を開いている時は、そのリンクに「class=“active”」を付与する事ができます。

後は、この「class=“active”」に対して、CSSを設定することで、リンクをハイライトさせたり、無効化させたりする事が可能となります。

実装方法

まずはgemを導入します。

gem 'active_link_to'

後は、link_toと同じ要領で、「active_link_to」を利用するだけで、動的にactiveクラスを付与できるリンクが生成されます。

active_link_to 'Users', '/users'
# => <a href="/users" class="active">Users</a>

参考情報

GitHub - comfy/active_link_to: Rails view helper to manage "active" state of a link

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

テストケースを作る過程で、自身が実装した箇所で、やや冗長な箇所や完全に無駄なコードがいくつか見つかった。クリティカルな問題では無かったが、実装した段階で気付けるには、どの様に取り組むべきか考える必要があると感じた。時間が経過した事で、客観的な視点でチェック出来たのが大きいが、RubyMineの機能などツールのチェック機能で防げるものもあった。RubyMineの機能は完全に把握し切れていないので、そちらの理解を深めて、コードの品質を高めていきたい。

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

残り・・・「8276時間!」