24_トップページのBootstrapの修正

[great084]

概要

「24_トップページのBootstrapの修正」のチケットを実施
トップページのハンバーガーメニューが正常に動作していないため、機能する様にBootstrapを修正する。

ブランチ名

feature/improve_bootstrap

実施内容

トップページのハンバーガーメニューが正常に動作していない原因を確認した上で、対応方法を検討実施する

現象

bootstrapのナビゲーションバーを使用して作成した、ハンバーガメニューがクリックしても動作しない。
トップページのハンバーガーメニューを押下した際、chrome検証ツールのコンソールに、以下のエラーが出力されている。

bootstrap.js:1498 Uncaught TypeError: Cannot convert object to primitive value
    at RegExp.test (<anonymous>)
    at HTMLDivElement.<anonymous> (bootstrap.js:1498)
    at Function.each (jquery.js:325)
    at jQuery.fn.init.each (jquery.js:165)
    at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1492)
    at HTMLDivElement.<anonymous> (bootstrap.js:1552)
    at Function.each (jquery.js:325)
    at jQuery.fn.init.each (jquery.js:165)
    at HTMLButtonElement.<anonymous> (bootstrap.js:1547)
    at HTMLDocument.dispatch (jquery.js:4670)
(anonymous) @ bootstrap.js:1498
each @ jquery.js:325
each @ jquery.js:165
_jQueryInterface @ bootstrap.js:1492
(anonymous) @ bootstrap.js:1552
each @ jquery.js:325
each @ jquery.js:165
(anonymous) @ bootstrap.js:1547
dispatch @ jquery.js:4670
elemData.handle @ jquery.js:4490

原因

検索した記事より、
2020/4/10にアップデートされたjquery 3.5.0に伴い顕在化した不具合（と想定される）

対処方法

jqueryを3.5.0から3.4.1にダウングレードする
Rails6でwebpackerを使用しているため、pakage.jsonのjqueryのバージョンを3.4.1に書き換え、yarn installを実施
→ ハンバーガメニューが動作することを確認。

なお、根本的な修正はBootstrap 4.4.2版で適用される模様

参考

Bootstrap data-toggle for collapse failing · Issue #2147 · LD4P/sinopia_editor

Bootstrap v4.4.1 collapse doesn't work with jQuery v3.5.0 · Issue #30553 · twbs/bootstrap

package.json のチルダ(~) とキャレット(^) - Qiita