More than 3 years have passed since last update.

GoogleMap がブラウザをリロードしないと表示されない件

Posted at 2020-12-20

ポートフォリオでGoogleMapを取り入れた時に、ページ遷移では動作しない現象が起きました。
その解決法を調べたのでまとめました。

原因

ずばり、Turbolinksが原因です。
Turbolinksを有効にしたままページ遷移した場合、遷移先にJSの動作があるのに発火しないという状況になってしまいます。

そもそもJSやjQueryには動作を効かせるためのイベントがあります。Turbolinksは最初のページ読み込み時にこれらのイベントを発火しますが、ページ遷移したときは発火しません。

app/assets/javascripts/application.jsに記述してある//= require turbolinksの行を消すことで解決します。
他の方法での解決策もあるそうです。

この問題を解決するに当たってTurbolinksについて調べました。

Turbolinksとは、Rails4から正式導入された画面遷移を高速化させるライブラリです。Turbolinks自体はJavaScriptのライブラリとして提供されていますが、Railsでは利用しやすいようにGemとしてデフォルトで組み込まれています。

①gem ‘turbolinks’を Gemfile に記述
②bundle install
③app/assets/javascripts/application.js に //= require turbolinks と記述

※ Rails4以降ではrails newで自動的にTurbolinksについて記述済

①リンクのクリックイベントが発火
②画面遷移を阻害し、非同期でリクエストを送る
③HTMLをレスポンスとして返す
④現在のページと一致しているかチェック
⑤画面遷移が起きたように見せかける

Turbolinksは同じドメイン内のaタグを監視しており、クリックされることでTurbolinksの仕組みが動き出します。

※ ドメイン = インターネット上の住所

Turbolinksはリンクがクリックされたことによる画面遷移を阻害し、History APIを用いた非同期のリクエストを送ります。

※ History API = ブラウザのページ遷移履歴を管理・操作するためのAPI
※ API = アプリケーションをプログラミングするためのインターフェース
※ インターフェイス = コンピュータ用語で「何か」と「何か」をつなぐものという意味

リクエストを受けたサーバーは、HTMLをレスポンスとして返します。

レスポンスとして返ってきたHTMLにあるheadタグ内のJSとCSSが現在のページと一致しているかチェックしています。これは次の動作である置き換えを行うための準備に当たります。

Turbolinksは現在のbodyタグを置き換え、headタグの中身はマージします。そして、あたかも画面遷移が起きたように見せています。