Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

RUNTEQAdvent Calendar 2024

Day 23
@miki-ymmt

Rails APIモードを作成してみよう！基礎から動作確認までの手順

Last updated at Posted at 2024-12-22

はじめに

皆さまこんにちは！もちと申します。
簡単に私の紹介をしますと、2024年1月からプログラミング学習を始めて10月にプログラミングスクールRUNTEQを卒業、2025年1月より都内自社・受託開発企業にてソフトウェアエンジニアとして働かせていただきます。

RUNTEQ Advent Calendar 2024の今年のテーマは『プログラミングでの"ワクワク"』❤️‍🔥です！
やはり自身にとってのプログラミング×ワクワクは「初めてのことに取り組むこと、知見を持つこと」だと再認識しました。
今回は入社前に学習している内容である「Rails APIの作成」にあたり、自身が取り組んだことや得た知識について記事にします。

　著者は実務未経験である事、かつ初めて挑戦したので、分かりづらい点や不足点があるかと思います。お気づきの点がありましたら教えていただけると幸いです。

お使いの環境によってはうまく動作しない場合があるので、バージョンを変えてみるなどして対応していただければと存じます。この記事ではRubyやRailsのインストール方法についての記載はございません。ご了承ください。

想定される読者

  • Railsでのwebアプリ開発は経験しているが、APIを作成した事がない方
  • そもそもRails APIとは何かのイメージをお持ちでない方
  • フロントエンドとバックエンドを分けて開発したい方

ゴール

  • Rail APIについて知る
  • Railsプロジェクトの作成〜JSONレスポンスを確認できるまでの流れを理解する

前提

  • ターミナルを起動できる
  • PCにRubyとRailsをインストール済み(ターミナルにてruby -v, rails -vでインストール済みかを確認できます)
  • コードエディタ上でプロジェクトを開けること(記事ではvscodeを使用)

環境

  • Ruby 3.3.6
  • Rails 8.0.1
  • PostgreSQL 14.13

Rails APIモードって何？

結論から言うとRails APIモードとは、 React.jsやVue.jsのようなフロントエンド技術との連携を目的としてビュー（HTML）の部分を省略し、データのやり取り(バックエンド)に特化したアプリケーションを構築できる開発モードです。

Rails APIモードの特徴

1. ビューがない

  • HTMLやERBファイルを使ったページの生成をしない
  • フロントエンドから送られるリクエストを受け取り、データを処理してJSON形式で返す。

2. 軽量で軽い

  • 不要な機能（例えばアセット管理やテンプレートエンジン）が省かれるので動作が軽い。

3. フロントエンドと連携しやすい

  • ReactやVue.jsなどのモダンな技術と連携がしやすい。
  • フロントエンドが別途あるプロジェクトでは、RailsをAPI専用として利用できる。

4. Railsのほとんどの機能を利用できる

  • ビューを除外しても、Railsのほとんどの機能を利用できるため、API開発に適している。

【リクエストとレスポンスの例】

  • フロントエンド（ReactやVue.js）から次のリクエストが送られる
GET /posts
  • Rails APIモードのサーバーは、次のようなJSONデータを返す
[
  { "id": 1, "title": "Hello World", "content": "This is the first post." },
  { "id": 2, "title": "API Mode", "content": "Rails API mode is cool!" }
]
  • このデータをフロントエンドが受け取り、画面に表示する

※通常のRailsはMVCアーキテクチャ(Model-View-Contoller)を使用していて、フロントエンドとバックエンドを両方担うフルスタックなWebアプリ開発フレームワークとして知られています。

以下の記事がMVCの仕組みやRailsAPIモード×フロントエンド技術の組み合わせの違いについて図解で分かりやすく記載されていましたので、ぜひご参照ください。
「Rails API とは？普通の Rails と何が違うの？」と思った人がまず読む記事

Rails APIの利用シーン

Rails APIを使用するメリットは、フロントエンドとバックエンドの分離ができるので、異なる技術スタックを使用した開発ができることです。

近年はフロントエンド技術の進歩が目まぐるしいようなので、分離をすることで開発案件によってはより最先端のフロントエンド技術を使ってユーザー体験の価値を向上させることができますね。

API作成手順

1.railsプロジェクトを作る
2.modelを作る
3.仮のデータを流し込む
4.ルーティングを設定する
5.コントローラを作る・記述する
6.アクセスしてみる

では実際にやっていきます！

[Railsガイド-Rails による API 専用アプリケーション-]　にRails APIについてのガイド、およびAPI専用Railsアプリケーションの生成方法の記載があります。

① railsプロジェクトを作る

ターミナルで好きなディレクトリに移動して以下のコマンドを実行します。
(mkdir rails-projectsでrails-projectsディレクトリを作成)

$ rails new sample-api --api

このようにたくさんのファイルが作成されました。
--api オプションによってJavaScript関連のファイルがスキップされています。
Image from Gyazo

成功したら、続いて下記のコマンドを実行します。

$ cd sample-api
$ rails s

このように表示されたら成功しています。

Image from Gyazo

ブラウザで http://localhost:3000 にアクセスし、このような画面が出たらプロジェクトのインストールはOKです。
Image from Gyazo

APIモードで正しく動作しているかどうかを確認してみます。以下のようにconfig.api_only = trueと記載があれば、APIモードになっています。

config/application.rb
Image from Gyazo

② modelを作る

今回はメモアプリとしてメモのタイトルと内容を保存するMemoモデルを作成します。

$ rails generate model Memo title:string content:text

このように出てきたら成功です。
Image from Gyazo

次にマイグレーションの実行をして、データベースにモデルを反映します。

$ rails db:migrate

sample-api/db/schema.rbにmemos テーブルが追加されています。
Image from Gyazo

③ 仮のデータを流し込む

db/seeds.rbに仮のメモデータを追加します。

Memo.create(title: "初投稿", content: "初めて投稿しました！")
Memo.create(title: "買い物メモ", content: "牛乳、卵、トイレットペーパー")

データを挿入するために、ターミナルで以下のコードを実行します。

$ rails db:seed

データを流し込めているか、念の為コンソールで確認してみましょう。
ターミナルにて以下のコマンドを打つとコンソールが起動します。

$ rails c

続けて以下を実行します。

sample-api(dev)> Memo.all

Image from Gyazo

db/seeds.rbで記載した内容が表示されることが確認できました！

④ ルーティングを設定

引き続きルーティングを設定していきます。
resourcesを使うことで RESTfulなルートが自動生成されます。

config/routes.rb
# ルーティング設定
Rails.application.routes.draw do
  resources :memos　　# RESTfulルートを自動生成
end

bin/rails routesコマンドで設定されたルーティングを確認できます。
左側にはパス、右側にはコントローラー名と対応するアクション名が記載されています。
Image from Gyazo

⑤ コントローラを作る・記述する

MemosControllerを作成します。

$ rails g controller Memos

以下のようにコントローラーを編集します。
まずはメモ一覧を表示するindexアクションを定義してみましょう。

renderに:jsonオプションを指定して渡すと、自動的にJSONとしてレンダリングします。(参考: Railsガイド 3.2 新しいリソースを生成する)

app/controllers/memos_controller.rb
class MemosController < ApplicationController

  def index
    memos = Memo.all
    render json: memos
  end
end

⑥ アクセスしてみる

Railsサーバーを起動します。

$ rails s

ブラウザで　http://localhost:3000/memos
にアクセスしてみます。

Image from Gyazo

JSON形式でmemoのレスポンスが返って来ました！！
他のアクションをコントローラーに追加すると、データを追加したり更新したりできると思いますのでぜひ試してみてください。

終わりに

今回はRails APIについてと、作成する流れを実施しました。
簡単にまとめると、、、

  • Rails APIモードは、フロントエンド部分を切り離し、データ提供に専念するバックエンドアプリケーションを構築するモードである。

  • JSON形式のデータを返すことに特化している。

  • フロントエンド技術の自由度が高まり、ReactやVue.jsなどとの連携がしやすい。

私はフロントエンドの学習も始めたところなので、今後はフロントエンド技術と今回学んだAPIのデータの連携についてやデプロイの仕組みのキャッチアップも合わせて行いたいと思います。

ここまでご覧いただきありがとうございました！:relaxed:

参考

Railsガイド　Rails による API 専用アプリケーション
Rails で「API を作る」を体感しよう
Rails APIとReactの連携方法：フロントエンドとバックエンドの統合
「Rails API とは？普通の Rails と何が違うの？」と思った人がまず読む記事
RailsのAPIモードとは？基本的な使い方について調べてみた

9
3
0

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
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?