目次 閉じる
AjaxにはAPIが必要
APIとは、Application Programming Interface の略
不特定多数のいろいろな言語(ソースコード)を使うときにAPIが使われる
別のサーバーじゃなくても、自分のサーバーでも同じように使うことができる(難しい)
- サーバーにリクエストを投げる(JavaScriptのソースコード)
- サーバーで処理をおこなう(rubyのソースコード)
- 処理結果のデータ(Ajax)だけを渡す
JavaScriptはブラウザ、rubyはサーバーでそれぞれ動いている
APIは、プログラム同士のつなぎこみをしてくれる
APIを作る
例えば、「記事を”いいね”しているか判定したい」とき
- ブラウザから、JavaScriptで
get 'articles/1/like'をリクエストする - サーバーで”いいね”しているかデータを確認する
{ data: { hasLiked: true } }のハッシュのようなデータをブラウザに返す
このハッシュのようなデータをjsonと言う
【Rubyの基本】APIのソースコードをclass に書き換える
「/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?は過去、user.rbで以下のように定義している
def has_liked?(article)
likes.exists?(article_id: article.id)
end- 今までなら「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 }になる
/articles/4/likeを読み込むと、「いいね」しているか結果が返ってくる

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

- JavaScriptなら
hasLikedと書く(キャメルケース) - Rubyなら
has_likedと書く(スネークケース)
#DAY6
