【rails】axiosでgetリクエストを送る方法

AjaxにはAPIが必要

APIとは、Application　Programming　Interface　の略

不特定多数のいろいろな言語（ソースコード）を使うときにAPIが使われる

別のサーバーじゃなくても、自分のサーバーでも同じように使うことができる（難しい）

サーバーにリクエストを投げる（JavaScriptのソースコード）
サーバーで処理をおこなう（rubyのソースコード）
処理結果のデータ（Ajax）だけを渡す

JavaScriptはブラウザ、rubyはサーバーでそれぞれ動いている

APIは、プログラム同士のつなぎこみをしてくれる

APIを作る

json（ハッシュのようなデータ）

例えば、「記事を”いいね”しているか判定したい」とき

ブラウザから、JavaScriptで get 'articles/1/like' をリクエストする
サーバーで”いいね”しているかデータを確認する
{ data: { hasLiked: true } }のハッシュのようなデータをブラウザに返す

このハッシュのようなデータをjsonと言う

APIについての過去の学習記録はこちら

【Rubyの基本】APIについて学ぶ

【Rubyの基本】APIで記事を検索してみる

【Rubyの基本】APIのソースコードをclass に書き換える

GETリクエストのためのshowアクション

「/articles/1/like」のGETリクエストを送ったとき、「いいね」しているかしていないのか分かるAPIを作る

routes.rbを開いて:showを追加する

resource :like, only: [:show, :create, :destroy]

likes_controller.rbにshowアクションを書き加える

class LikesController < ApplicationController
  before_action :authenticate_user!

  def show
    article = Article.find(params[:article_id])
    like_status = current_user.has_liked?(article)
  end

該当のarticleを探し、has_liked?で「いいね」しているか判定する

like_statusには、trueまたはfalseが入る

「has_liked?」について

has_liked?は過去、user.rbで以下のように定義している

  def has_liked?(article)
    likes.exists?(article_id: article.id)
  end

showアクションでjsonを取得する

今までなら「show.html.haml」にrenderされていた
今回は「いいね」しているかのデータだけがほしい（viewにrenderしない）

  def show
    article = Article.find(params[:article_id])
    like_status = current_user.has_liked?(article)
    render json: { hasLiked: like_status }
  end

renderとは、フロントエンド（クライアント側）に返す役割をしている
今回はjson（データ）のみを返す

{ hasLiked: like_status }は、{ hasLiked: true }または{ hasLiked: false }になる

GETリクエスト後の結果を見る

/articles/4/likeを読み込むと、「いいね」しているか結果が返ってくる

検証ツールを見ると、jsonで返していることがわかる

キャメルケースとスネークケース

JavaScriptならhasLikedと書く（キャメルケース）
Rubyならhas_likedと書く（スネークケース）

[

参考

「キャメルケース」と「スネークケース」の違い｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

](https://wa3.i-3-i.info/diff71moji.html)

#DAY6