ポートフォリオ制作でjbuilderを使ったので学習した内容をまとめました。
jbuilderとは？
jbuilderとは、JSON形式のデータを簡単に作成することができるgem。Railにデフォルトで導入されている。
jbuilderでできること
app/view/〇〇.json.jbuilderファイル内のjsonオブジェクトに対して様々なメソッドを使うことでJSON形式の文字列のデータを簡単に作ることができる。
「APIを叩く」みたいなことができるのだと思います。（たぶん）
「APIを叩く」に関して、こちらの記事が大変参考になりました。
使い方
RailsとVue.jsを使用、取得するデータは作成済みの想定で進めます。
1. Jbuilderが導入されていることを確認する
Gemfile
ruby '2.7.3'
gem 'rails', '~> 6.1.4'
・・・
gem 'jbuilder', '~> 2.7'
2. コントローラーの準備
localhost/api/v1/comments.jsonでデータが扱えるようにするため、コントローラーの設定を行います。
app/controller/api/v1/comments_controller.rb
class Api::V1::CommentsController < ApiController
def index
@comments = Comment.all
end
end
3. jbuilderファイルの作成
各メソッドは後術します。
app/views/api/v1/comments/index.json.jbuilder
json.set! :comments do
json.array! @comments do |comment|
json.extract! comment, :id, :context
end
end
4. 生成されたjsonデータを確認
http://localhost/api/v1/comments.jsonにアクセス
※二点いかがわしいコメントがありましたので隠させていただきます。
メソッド
-
json.extract!：第一引数に指定したインスタンス変数のデータをJSON形式の文字列で返す。
〇〇json.jbundler
json.extract! @commnet, :id, :context
# 実行結果=> {"id": 1, "context": "hogehoge"}
- ネスト
入れ子構造にして属性をまとめたい場合は以下のように記述。
〇〇json.jbundler
json.set! commnets do
json.extract! @commnet, :id, :context
end
# 実行結果=> {"comments":[{"id": 1, "context": "hogehoge"}]}
-
json.set!：キーと値がペアとなったJSON形式の文字列を返す
〇〇json.jbundler
json.set! "context", "hogehoge"
# 実行結果=> {"context": "hogehoge"}
-
json.array!：モデル内のデータが配列に格納され、JSON形式の文字列のデータで返す
〇〇json.jbundler
json.array! @comments, :id, :context
# 実行結果=> [{"id": 1, "context": "hogehoge"},{"id": 2, "context": "hojihoji"}]