LoginSignup
2

More than 1 year has passed since last update.

 API(非同期通信を実装する場合)

Last updated at Posted at 2020-10-15

前提

  • 非同期通信を実装する際のAPIについての内容である。
  • コントローラーの記述、それに対応した.json.jbuilderの記述を記事にしている。

※非同期通信の手順をjQuery導入から全て確認したい方のまとめはこちら

APIとは

JSONなどの形式で返すサーバの仕組みのこと。

非同期で行われるリクエストに対して、
「求められたデータをレスポンスする仕組みを用意する仕組み」を、APIを作成することで実現。

RailsではHTMLを返すのがデフォルトだが、
JavaScriptから扱えるようにJSON形式でデータを返すようにすることもできる。

APIを追加する方法

RailsでAPIを追加する方法は複数存在する。
今回はコントローラー(のアクション)に追加する方法。

「元々あるコントローラに対して非同期通信の場合には非同期通信用のデータを返す」

HTMLを返すのではなくてJSONを返すように記述する。
※Railsでは1つのアクションのなかでHTMLやJSONのフォーマットごとに分岐できる。

 

respond_toを使用してJSON形式のリクエストに対してのレスポンスを返す

アクションに対して実装する。
以下の場合はSongcolorをcreateする。
その後にリクエストをどの形式で返す(レスポンス)かを記述。

<例A>#####_controller.rb(該当するコントローラー)
  def create
    @songcolor = Songcolor.create(color: params[:color], song_id: params[:song_id])
    respond_to do |format|
      format.json
    end
  end

 
    ▼▼▼詳しく▼▼▼
 
respond_toというメソッドを使用することで、
フォーマットに応じたレスポンスを作成することができる。
「JSON形式で返せるようにする」という実装になあたる。
今後これとセットでJSON形式のファイル「create.json.jbuilder」を作成する必要がある。
返すデータを記述する。また、ファイル名は対応させるためにアクション名と同様にする。
今回はcreateアクションに対応するので「create.json.jbuilder」になる。

<例>さらに上記のコードの重要な範囲をピックアップ
    respond_to do |format|
      format.json
    end

アクション内に記述することで
〇〇(アクション)したら上記のrespond_to後のリクエストに応じて方法で返す。

 
  

<他の方法>〇〇.json.jbuilderのファイルを作成しない方法もある。

下記のようにrenderに{ }をつけ完結させることもできる。
※グループごとに投稿できるチャットアプリを例にしている場合。

<例>#####_controller.rb
respond_to do |format|
  format.json { 
    render json: { id: @user.id, name: @user.name }
  }
end

.json.jbuilderのファイルを作成する場合

<例>app/views/messages/show.json.jbuilder
json.content @message.content

=> { content: "@messageのcontent" }

jbuilderは左がキー・右がバリューのようなハッシュ
json.contentがkey、@message.contentがvalue

自分のアプリ<例A>では「json.color @songcolor.color」というキーとハッシュを記述。
受け渡して表示したい情報をデータから呼び出すには何が必要か考える必要がある。

 
 

次の作業〇〇.json.jbuilderを作成する場合

アクションに対応した名前を〇〇に入れて
〇〇.json.jbuilderを作成する。

ターミナル
% アプリ名/views/messages/〇〇.json.jbuilder

中の記述は先ほど記載した内容を参考に記述。

jbuilderが読み込まれているか確認

スクリーンショット 2020-10-15 18.41.15.png
「Rendered」「jbuilder」の文字が見えると読み込まれている。
 
 

ここまでで一旦完了!!

その後の非同期通信の流れはまた記事を作成します。

最後に一言

APIの仕組みとしてはコントローラーの中身の記述になる。
その後は情報の受け渡しになってくる。
jbuilderでデータの内容を決めて、Ajaxでデータの受け渡しをするのかなと思っている。
どこからどこまでがなんていう作業かというのもまだ勉強不足。

今回のなかで理解不十分な点

  • jbuilderのファイルを作成しないコントローラーのみで完結させる際の記述(キーとバリュー)
  • jbuilderの中の書き方(これもキーとバリュー)
  • respond_toメソッドでのHTMLとJSONの分岐の仕組み。(リクエストがくるのだと思うがその流れが不明)

このことに関して理解を深めたいと思いました。

関連リンク

非同期通信の流れをjQueryの導入から全て記載しているのはこちら

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2