js-cookieを使ってリロードしても継続的に同じタブメニューを開く方法

はじめに

タブメニューを使用したページでは、リロードするとトップのタブに戻ってしまいます...
タブメニュー上で作業をしている場合、少し不便ですよね...

いくつか方法がありますが、今回はjs-cookieを使用して、リロードしても開いていたタブを開くことのできるページを実装していきます

開発環境

• Ruby 3.0.0
• Rails 6.1.3
• bootstrap 4.6.0
• js-cookie 2.2.1

準備

railsアプリケーションの作成

本記事ではRails6を使用していきますので、Rails6のアプリケーションをご準備ください！

bootstrapのインストール

rails6でのパッケージインストール方法はrails5と異なるため注意が必要です。
こちらの記事が非常にわかりやすいため、参考にされるとよろしいかと思います。
Rails 6にjQueryとBootstrapを入れる

js-cookieのインストール

js-cookieの記事はあまり多くなく、新タイプと旧タイプ両方の記事が混在しているため、間違えないように注意しましょう！
まずはjs-cookieのパッケージをインストールします。

$ yarn add js-cookie

package.jsonに追加されていれば完了です。

"js-cookie": "^2.2.1"

タブメニューの作成

bootstrapを使用してタブメニューを作成していきます。
公式ドキュメントを参考にします。

<!-- 選択タブ -->
<ul class="nav nav-tabs">
  <li class="nav-item active">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>
  </li>
</ul>

<!-- 表示させるコンテンツ -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

ここまでくるとタブメニューの実装ができたかと思います！

js-cookieの設定

次にjs-cookieの設定を行っていきます。

window.Cookies = require("js-cookie")

$(document).on('turbolinks:load', function() {
  $(function() {

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
      var tabName = e.target.href;
      var items = tabName.split("#");
      Cookies.set("openTag",items[1], { expires: 1/24 });
    });

    if(Cookies.get("openTag")){
      $('a[data-toggle="tab"]').parent().removeClass('active');
      $('a[href="#' + Cookies.get("openTag") +'"]').click();
    }
  });
});

• window.Cookies = require("js-cookie")でviewファイルでjs-cookieを使用できるようにしています。

• $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { ... では選択タブを押したときの動作を示しています。
  開いているタブの href を参照し、# を分離します。そしてCookies.set("openTag",items[1], { expires: 1/24 })でopenTagに先ほど分離した値をvalueとしてcookieをセットします。
  expires:ではcookieの持続時間を設定できます！単位は"日"なので1/24では1時間ということになります。

• if(Cookies.get("openTag")){... ではopenTagにcookieが存在するときの動作を示します。 一度 liタグ につけられた active をすべて外します。そののちに、格納されていたopenTagのcookieを参照してclickイベントを発生させ、元々開いていたタブを開きます。

このように設定することで、リロードをした際にも、保存されたcookieを参照し、開いていたもとのタブメニューを自動で開くことができます！

留意点

js-cookieは大幅アップデートにより、旧タイプと新タイプそれぞれのgithubが存在しています。同様にしてネットの記事でもそれらが混在しております。旧タイプではcookieを参照する際に

$.cookie("")

としますが、これを新タイプで記述をすると、$.cookie is not a functionと怒られてしまうので注意が必要です。
くれぐれもお気を付けください！