非同期通信(Ajax)ができない場合の対処法

はじめに

rails + jQueryでフォロー機能の非同期をする際、
フォローボタンをクリックしても画面が切り替わらず、試行錯誤したため、その対処法の一部を紹介します。

完成図

↑↓フォローボタンを押すと非同期で反映されます

到達点

以下の1点を達成する
・対処法を学ぶ

流れ

① rails s でログを確認する
② デベロッパーツールを活用する

① rails s でログを確認する

rails sすると、以下のようなログが表示されます。

最後の行が500 Internal Server Errorなどの表示であれば、エラーの原因が表示されますので、ログをしっかり確認しましょう。

今回は問題ありませんでした。

② デベロッパーツールを活用する

デベロッパーツールのコンソールで原因がわかる場合があります。

デベロッパーツールのコンソールの開き方

1. Chromeを立ち上げます
2. ブラウザの右上にある三つの点アイコンをクリックします
3. 「その他のツール」＞「デベロッパーツール」を選択します
4. コンソールタブをクリックします

コンソールで確認する

何やらUncaught ReferenceError: $ is not definedというエラー表示があります。
ググってみると、application.html.erbに以下の記述がなくjQueryが使えなかったことが原因のようでした。

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

エラー対処は、ログやコンソールからエラー文が出ていることがあるので、確認すると、対処の糸口が見つかるかもしれません。