JavaScriptからRailsのAPIを叩く方法

  • 8
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

JavaScriptとRailsの連携

Web関係のコードを書いていると、JavaScriptからRailsの変数を参照したり、メソッドを呼び出したいときがあります。ケースによってはformに:remote => trueと書いてAjaxリクエストを投げ、jsテンプレートをレンダリングしてRails側からJavaScriptのコードを呼び出してもいいのですが、今回取り上げるのはJavaScriptからRailsのAPIを叩く方法になります。

Ajaxを使ってメソッドを呼び出す

AjaxとはAsynchronous JavaScript + XMLの略でページをリロードせず非同期にページの一部を更新する技術ですが、個人的にはJavaScriptからサーバ側のAPIを呼び出したい時に使うイメージが強いです。

以下の例ではJavaScript側のLocalStorageに保存してあるuser_idをパラメータとしてRails側のメソッド(Bookmarkコントローラのshowメソッド)を呼び出し、ユーザーのブックマーク一覧を表示しています。

bookmark.js
//==================================================
// ブックマーク表示
function showBookmarks() {
  user_id = window.localStorage.getItem("user_id");
  $.ajax({
    url: '/bookmark/show',
    type: 'GET',
    dataType: 'json',
    async: true,
    data: {user_id: user_id},
  }).done(function(data){
    setBookmarkMenu(data);
  }).fail(function(data){
    $('#bookmarks').html('ブックマーク一覧が取得できませんでした');
  });
}

function setBookmarkMenu(data) {
  var elem = $('#bookmarks');
  elem.children().remove();
  for(var i=0; i<data.length; i++){
    elem.append("<div>" + data[i].menu_name + "</div>");
    elem.append("<div>" + data[i].shop_name + "</div>");
    elem.append("<div>" + data[i].shop_address + "</div>");
  }
}

$(document).on(
  'click',
  '#show_bookmarks',
  function(){
    showBookmarks();
  }
);
bookmark_controller
class BookmarkController < ApplicationController

  def index
  end

  def show
    bookmarks = Bookmark.where(user_id: params[:user_id])
    if bookmarks.present?
      data = serialize_bookmark_data(bookmarks)
    else
      data = []
    end
    render :json => data
  end

  private

    def serialize_bookmark_data(bookmarks)
      ary = []
      bookmarks.each do |bookmark|
        menu = Menu.find_by(id: bookmark.menu_id)
        shop = Shop.find_by(id: bookmark.shop_id)
        contents = {:menu_name => menu.name, :shop_name => shop.name, :shop_address => shop.address}
        ary.push contents
      end
      ary
    end

end
index.html.erb
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<%= javascript_include_tag "bookmark.js" %>

<a href="#" id="show_bookmarks">ブックマークを表示</a>
<div id="bookmarks"></div>

ajaxのurlで呼び出したいメソッドを指定し、dataでパラメータを渡します。渡したパラメータはparams[:パラメータ名]で参照できます。今回はjson形式でのやり取りですが、text形式でも同様の通信は可能です。doneの後ろに通信が成功した時の処理を、failの後ろには失敗時の処理を書きます。今回の例ではブックマーク一覧の配列をdataという変数に突っ込み、json形式でJavaScript側に返却、JavaScript側で受け取った変数をHTMLに反映させています。

以上、備忘録でした!