「商品カートに追加する」ボタンがときどき無反応になる謎現象が起きました。
発生条件は、キャッシュをクリアしたあと問題のページに遷移した直後に発生。2回目以降のアクセス時には発生しない。
何やらコンソールエラーも出ていました。
Uncaught TypeError: Cannot read property 'replace' of undefined
こちらのエラーの発生箇所を見ると、フレームワークの深層部分のようなところに行き着き、全然わからない……。
環境
Ruby 2.4
Rails 5.0
ボタンの実装
ボタンはaタグで実装されており、javaScriptのclickイベントでカートへの追加処理をしていました。ボタン押下後は商品件数の表示を増やすだけでページ遷移はありません。
<a class="btn">商品カートに追加！</a>$('.btn').click(function() {
// カートに追加する処理
});原因はturbolinks？
原因はturbolinksでした。rails初学者の私はナニソレ状態だったのですが、大先輩が教えてくれました。
turbolinksは、リンクする時にページ遷移せずにjsを利用してbodyの書き換えを行い、速く表示されるように見せかける技術だそうで。これを使っているとjsの問題は起きやすいそうです。
turbolinksはaタグのhrefを監視してhrefの書き換えを行います。しかし今回のボタンは、aタグですがページ遷移しないのでhrefがありませんでした。そのためにturbolinksがhrefのreplaceができないというjsのコンソールエラーになっていたわけですね。
対策はaタグをやめる
対策は簡単で、aタグをやめてdivにしました。これで即解決。でもマークアップ的にはページ遷移のないクリッカブルな要素はbuttonタグが最適です。しかし、buttonタグはブラウザデフォルトのスタイルが強く、リセットCSSが面倒だったので、divにしておきました。
そもそも
turbolinksはオフにした方がいろいろ安心かも。あとページ遷移ない時はaタグ使わないこと。
