重複したコードを綺麗にリファクタリングしてみた

#今回の内容
作成していたポートフォリオがやっと形になり、メンターの方にコードレビューをしてもらったときの気付きを備忘録も兼ねて紹介しています。

#該当箇所の画面
![527e45fe1a0464890f4c66be9f41d89c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1131643/7bb4c58b-5b58-1428-aa08-8ee84825702e.gif)

#環境
`macOS Big Sur 11.2.3`
`ruby: 2.7.2`
`rails: 6.1.3`
`テンプレートエンジン: slim`
`レイアウト: bootstrap4`

#前提

- bootstarpの導入は省いています

#リファクタリング前のコード
`bootstap4`の`class`を使用してページ毎にボタンの色を変更しています。 

`btn-primary`： 青色
`btn-light`：   灰色

```app/views/users/travel_records.html.slim
.user-detail.p-4
  = render 'profile_detail', user: @user
  .btn-group.btn-group-lg.d-flex.mb-4
    = link_to travel_records_user_path(@user.id), class: 'btn btn-block btn-primary text-white flex-fill'
      | はなたび記録
    = link_to favorites_user_path(@user.id), class: 'btn btn-block btn-light flex-fill'
      | お気に入り
    = link_to likes_user_path(@user.id), class: 'btn btn-block btn-light flex-fill'
      | いいね記録
    = link_to followings_user_path(@user.id), class: 'btn btn-block btn-light flex-fill'
      | フォロー
    = link_to followers_user_path(@user.id), class: 'btn btn-block btn-light flex-fill'
      | フォロワー
  .px-3
    .user-detail__info
     | はなたび記録 (#{@user.travel_records.count})
```
上記では、`はなたび記録ページ`を表示しているため、**該当リンク**に`btn-primary`を付与し、ボタンの色を`青色`に、**その他リンク**には`btn-light`を付与し、`灰色`にしています。

他ページでも同様のコードを記述しており、**差異**は`ボタンの色を変えるために付与しているclassのみ`となっています。

#リファクタリングの手順

- 重複コードをパーシャル化

- 部分テンプレートのローカル変数に値を付与

#パーシャル化
**ファイル名**は分かりやすく`_menu`としています。

```app/views/users/_menu.html.slim
.btn-group.btn-group-lg.d-flex.mb-4
  = link_to travel_records_user_path(@user.id), class: "btn btn-block btn-#{ active == 'travel_record' ? 'primary' : 'light' } flex-fill"
    | はなたび記録
  = link_to favorites_user_path(@user.id), class: "btn btn-block btn-#{ active == 'favorite' ? 'primary' : 'light' } flex-fill"
    | お気に入り
  = link_to likes_user_path(@user.id), class: "btn btn-block btn-#{ active == 'like' ? 'primary' : 'light' } flex-fill"
    | いいね記録
  = link_to followings_user_path(@user.id), class: "btn btn-block btn-#{ active == 'follow' ? 'primary' : 'light' } flex-fill"
    | フォロー
  = link_to followers_user_path(@user.id), class: "btn btn-block btn-#{ active == 'unfollow' ? 'primary' : 'light' } flex-fill"
    | フォロワー
```

今回は、**条件演算子（三項演算子）**を使用することで条件式の結果によって**画面の切り替え**を行なっております。

`{ パーシャルに渡す変数 == 変数の値 ? 真の時の値 : 偽の時の値 }`

```
class: "btn btn-block btn-#{ active == 'travel_record' ? 'primary' : 'light' } flex-fill"
```

上記を例に説明すると、`パーシャルに渡す引数の値`が**'travel_record'**の場合は`'primary'`という文字列を渡し、`そうでない場合`は**'light'**という文字列を渡すといった感じです。

※ **式展開**を使用するため、classは`ダブルコーテーション("")`で囲い、**付与する値**は`シングルコーテーション('')`で囲っています。

#リファクタリング後のコード

**部分テンプレート**の**ローカル変数(active)**に`'travel_record'`という**文字列**を渡すことで、calssに`btn-primary`が付与され、スタイルが適用されるようになります。

```app/views/users/travel_records.html.slim
.user-detail.p-4
  = render 'users/profile_detail', user: @user
  = render 'users/menu', active: 'travel_record'
  .px-3
    .user-detail__info
     | はなたび記録 (#{@user.travel_records.count})
```

※ **お気に入りページ**の場合、ローカル変数の値は`'favorite'`に変更します。

#最後に
以上が重複したコードのリファクタリングでした。
初めてコードレビューをしてもらい、終始**「こんな記述方法が、、あるのか、」**とワクワク状態が続いていました笑
他にも色々と助言してもらい、多くの学びを得ることができ、今後に活かしていきたいと感じた今日この頃です！

間違っている箇所や分かりづらい箇所が多々あるかと思います。
その際は、気軽にコメントいただけれると幸いです。

最後までご覧いただき、ありがとうございました!