86769


※[他質問サイト](https://teratail.com/questions/jk5yzgfjbmj4aj)でも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。

### 前提・実現したいこと

rails、bootstrapでメニューバーを作成しています。  
現在表示しているページのリンクを自動でアクティブな状態にしたいです。

### 発生している問題・エラーメッセージ

アクティブな状態が実装できません。  
以下記事を参考に作成しました。  
[サイドメニューのアクティブ・非アクティブ化](https://study-
diary.hatenadiary.jp/entry/2020/09/05/190836)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-02/3bf47758-5836-4094-a458-57f460e8b19b.png)

### 該当のソースコード

[code]

    app/helpers/application_helper.rb
    
    module ApplicationHelper
    （省略）
      def active_if(path)
        path == controller_path ? 'active' : ''
      end
    end
    
[/code]

[code]

    app/views/users/_sidebar.html.erb
    
    <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-light">
      <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
        <ul class="nav nav-pills nav-fill flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
          <li class="nav-item">
    
    <!-- 該当のコード -->
            <%= link_to mypage_path, class: "nav-link align-middle px-0 #{active_if('mypage')}" do %>
              <i class="fa-solid fa-house"></i><span class="ms-1 d-none d-sm-inline">マイページ</span>
            <% end %>
          </li>
          <li class="nav-item">
            <%= link_to profile_path, class: "nav-link align-middle px-0 #{active_if('profile')}" do %>
              <i class="fa-solid fa-user"></i><span class="ms-1 d-none d-sm-inline">プロフィール</span>
            <% end %>
          </li>
        </ul>
      </div>
    </div>
    
[/code]

[code]

    routes.rb
    
    Rails.application.routes.draw do
      get 'mypage', to: 'users#mypage'
    （省略）
      resource :profile
    （省略）
    end
    
    
[/code]

### 試したこと

classに手動でactiveを付与するとアクティブな状態になるため、  
ヘルパーに問題があると思いますが、  
参考記事と同じコードを使用しているのに実装できない原因がわかりません。  
恐れ入りますがよろしくお願いいたします。

### 補足情報（FW/ツールのバージョンなど）

ruby: 3.0.2  
rails: 6.0.4  
Bootstrap: 5.0


CC BY-SA 4.0
2022-03-09T02:34:00.950
86765
2022-03-09T05:27:45.703
51475
question
ruby-on-rails ruby bootstrap
メニューバーのリンクが自動でアクティブ化しない


`get 'mypage', to:
'users#mypage'`というroutesの場合`/mypage`の時`controller_path`は`users`を返すので`class:
"nav-link align-middle px-0 #{active_if('users')}"`だと`active`が付与されると思います。

こう言った時は`binding.pry`で覗いてみるとすぐ問題点がわかります。

[code]

      def active_if(path)
        binding.pry
        path == controller_path ? 'active' : ''
      end
    
[/code]

本題とはそれますがコントローラーだけで判断するのは余計な時にも`active`がついちゃいそうなので、私は以前、こんな感じのヘルパーを作ったことがあります。

[code]

    def current_page?(arg)
      arg.keys.all? {|key| params[key] == arg[key] }
    end
    
[/code]

使う時はこんな感じ

[code]

    current_page?(controller: 'users', action: 'mypage')
    
[/code]

(このコード動かしてないのでダメだったら適当に修正お願いします)

あと、手前味噌ですがHTMLのclassを動的に付与する場合[classnames-rails-
view](https://github.com/gomo/classnames-rails-
view)を使うと便利ですよ。jsで有名な[classnames](https://github.com/JedWatson/classnames)のマネですけど。

これを使えばこんな感じになります。

[code]

    <%= link_to mypage_path, class: class_names('nav-link align-middle px-0', 'active': current_page?(controller: 'users', action: 'mypage')) do %>
      <i class="fa-solid fa-house"></i><span class="ms-1 d-none d-sm-inline">マイページ</span>
    <% end %>
    
[/code]


CC BY-SA 4.0
2022-03-09T05:27:45.703
86769
2022-03-09T05:27:45.703
15048
86765
answer