【Rails】JSONを返すとは？APIを叩くとは？分かりやすく解説

本記事はこんな方に向けて書いています。

Railsの勉強を始めた頃、エンジニアの方が言う「ワイはJSONを返すわ〜」とか「ほな、ワシはAPI叩くわ〜」などの会話を理解できませんでした。

というのも、Railsを学習し始めの頃は、HTMLの形式でレスポンスを返すことしかなく、JSONは出てこないのです。

そのため初学者にとって、イメージがつきづらいものになっているかと思います。

本記事では実際に簡単なアプリを作りながら、『JSON』を返す流れを掴めるように解説していきます。

STEP1　そもそもJSONって何？

JSONとは、JAvascript Object Notationの略で、データの形式の一部だとひとまず理解しておいてください。

Railsを学習し始めると、まずは下記のような流れを理解させられるかと思います。

上記の流れでは、Railsのフォルダ内でViewファイルを作り、HTMLのコードをせっせと書いてページの見た目を作るかと思います。

でも実際はRails内でゴリゴリViewファイルをいじることはありません。

見た目の部分（フロントエンド）はVueやReactなどJavascriptのフレームワークやライブラリに任せておいて、Railsはクライアントからのリクエストに対してレスポンスを返す係に徹するケース（バックエンド）が多いです。

そのような場合に、Railsは『JSON』形式でレスポンスを返します。

ではJSONとは、どんな形をしているのでしょうか？
JSONは下記のような形をしています。

[
　{
　　id: 1,
　　title: "JSONとは？",
　　content: "JSONについて分かりやすく解説する記事です。"
　},
　{
　　id: 2,
　　title: "APIを叩くとは？",
　　content: "Web APIについて解説します。"
　}
]

Rubyを学んできた方は分かるかと思いますが、配列の中にハッシュが入った形をしていますね。

ではJSONでわざわざ返す理由って何なのでしょうか？
答えはその方がレスポンスが『早い』からです。

これまで扱ってきたHTMLファイルをやり取りする方法とは別に、非同期通信（Ajax）というやり取りがあります。

『非同期通信（Ajax）』とは

ページを表示する際に、不必要な部分（読み込む前と変わらない部分など）を読み込まないので、表示が『早い』のです。

この非同期通信で使われるファイルの形式が『JSON』なのです。

ここまで分かったところで、実際にRailsを使ってJSONを返すアプリを作成していきます。

STEP2　Scaffoldを使って簡易アプリを作成する

1からアプリを作成するのは、時間がかかるし難しいので、『Scaffold』に頼りたいと思います。Scaffoldは必要な機能を揃えた簡単なアプリを作成してくれる機能です。

まずはターミナルを開き、下記コマンドを実行してください。

rails new json_test_app
rails g scaffold article title:string content:string
rails db:migrate

上記コマンドだけで、アプリが作成できました。
サーバーを立ち上げます。

rails s

URLを「http://localhost:3000/articles/new」にして、画面を表示してください。この画面で新しい記事を作成できます。

titleとcontentを入力して、2つほどデータを作成してみましょう。
次にURLを「http://localhost:3000/articles」にして、記事一覧を表示させてみましょう。

現在、記事一覧画面はarticlesコントローラーのindexアクションにより、articlesフォルダ配下のindex.htmlが表示されている状態です。

＊下のフォルダはScaffoldにより自動で作成されたものです。

では先程の記事一覧をJSON形式で表示させたいと思います。
URLに「http://localhost:3000/articles.json」と入力してみましょう。

そうすると、下のような画面になったかと思います。
これでJSONを表示させることができました。

JSONの中身を見ると、先程みなさんが入力した値が返ってきているのが分かるかと思います。

ちなみにこのままでは、記事一覧表示はHTML形式で呼び出されてしまいます。JSON形式でのみ返したい場合、articles_controllerをいじる必要があります。

class ArticlesController < ApplicationController
  before_action :set_article, only: %i[show edit update destroy]

  # GET /articles
  # GET /articles.json
  def index
    @articles = Article.all
    #以下追記
    render json: @articles
  end

これでURLを「http://localhost:3000/articles」にしても、HTMLの画面は表示されなくなりました。

STEP3　APIを叩いてみよう

RailsでJSONを出力できるようになりましたね。

では、ここから「APIを叩く」ということをやっていこうと思います。
具体的に何をするかというと、外部から先程の記事の詳細情報を取得します。

JavascriptやVueを使ってAPIを叩くのは時間がかかるため、簡易的に『Advanced Rest client』というツールを使います。

インストール方法はこの記事を参照ください。

インストールできたら、下記のようにURLを入力して、SENDボタンを押します。

問題なくAPIを叩くことができれば、下画像のように記事一覧のJSONデータを取得できます。

今回は『Advanced Rest client』を使いましたが、実際はJavascriptやVueでAPIを叩くためのコードを書いていくのが普通です。