【rails】Ajax(JavaScript)でviewを切り替える（2）

Ajaxを使えるようにする

関連記事：【rails】Ajax(JavaScript)でviewを切り替える（1）

Ajaxのリクエストを送るときに、axiosというライブラリを使うと簡単である

まず以下のコードを実行する

yarn add axios

app/javascript/paacks/application.jsを開く

import axios from 'axios'

Ajaxにはhtmlと同じように、get・post・put・deleteリクエストがある

getリクエストを送ってみる

article_titleをclickしたらgetリクエストroot_path(‘/’)を送る
then(うまくいったら)、responseをコンソールログに表示する

document.addEventListener('DOMContentLoaded', () => {
  $('.article_title').on('click', () => {
    axios.get('/')
      .then((response) => {
        console.log(response)
      })
  })
})

article_titleをクリックしたら、検証ツールのConsole画面にresponseが表示されている

article_titleを押しても画面はリロードされていないことがポイント

このように、リロードしなくても画面表示が切り替わるようにしたい

真っ赤な長文エラーが発生

中身をちゃんと読んでいないけど、webpackerのバージョンが古いとか書いてあった

確認したところ、先ほどyarnしたaxiosのバージョンはもちろん最新だった

なのでaxiosのバージョンを落とした

// axiosを削除
yarn remove axios

// バージョン指定して再インストール
yarn add axios@0.19.2

// サーバー再起動
bin/webpack-dev-server

バージョンを講義のものとあわせたら、エラー解消された！

リロードしないとJavaScriptが動かないとき

railsにはTurbolinksというライブラリがあり、これがページ遷移を高速化してくれている

DOMContentLoadedは、ページをリロードしたときに動く

この動きがTurbolinksと相性があまりよくなかったりする(らしい)

[

参考

【Rails / JavaScript】ターボリンクとは

Zenn

](https://zenn.dev/ganmo3/articles/d234583bdc876f)

なので、railsが用意してくれているturbolinks:loadを使うようにする

document.addEventListener('turbolinks:load', () => {
  $('.article_title').on('click', () => {
    axios.get('/')
      .then((response) => {
        console.log(response)
      })
  })
})

#DAY5