クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > Ruby > 【Rails】ScaffoldでToyアプリケーションを作る（Railsチュートリアル第2章）

【Rails】ScaffoldでToyアプリケーションを作る（Railsチュートリアル第2章）

Ruby Ruby on Rails Railsチュートリアル Scaffold Active Record MVC CRUD

railsの続きです。前回はhello_appをGitHubにプッシュ & Renderにデプロイしました（Railsチュートリアル第1章クリア！）。今回からチュートリアルの第2章に入っていきます。Toyアプリケーションを作ります。「Scaffold」というツールを使うようです。それではいきましょう！

【目次】

Reactを習得するためにやったことまとめ qiita.com

Railsチュートリアル第2章

Railsチュートリアル第2章に入っていく！ここからは有料版の範囲になる。
下記のリンクはチュートリアルを購入して、アカウントにログインすると開くことができる。

※参考：第2章 Toyアプリケーション - Railsチュートリアル

第2章は「Toyアプリケーション」というアプリを作成する内容になっている。

  • ローカル環境構築
  • scaffoldジェネレータを使う
  • データモデルを設計（Userモデル、Micropostモデル）
  • Usersリソースを生成（scaffoldコマンド）
  • MVCの挙動を体験
  • ルーティングを体験（REST）
  • ユーザー一覧を表示
  • Micropostsリソースを生成
  • マイクロポストに140文字制限を設定
  • ユーザーとマイクロポストを関連づけ
  • クラス継承を体験

作ったもの

ユーザー一覧ページ（/users）

New userを押す

ユーザー追加ページ（/users/new）

名前とメールアドレスを入力

「Create User」を押す

なお、テスト用のメールアドレスのドメインは「example.com」にした

※参考：メールアドレスやURLの例に使えるサンプル用ドメイン [ホームページ作成] All About

登録成功

「Back to users」を押す

ユーザー一覧が表示される

「Show this user」を押す

ユーザー編集画面（ここで修正できる）

「Destroy this user」を押すと

ユーザーを削除できる

CRUD（Create、Read、Update、Delete操作ができることがわかる

マイクロポストの一覧画面（/microposts）

New micropostを押す

ポスト投稿画面（Userはユーザーid番号を入れる）

ポストを追加した後のポスト一覧画面

ポスト追加時に140字を超えるとアラートが表示される

リポジトリ
※参考：GitHub - ryo-i/rails_toy_appp

ローカル環境

まず前々回の記事の時と同じく、ローカル環境でrails環境を構築する。

※参考：【Rails】Codespacesとローカルに環境構築（Railsチュートリアル1章） - クモのようにコツコツと

Gemfileの内容を変更する

※参考：sample_apps/7_0/ch02/Gemfile at main · yasslab/sample_apps · GitHub

scaffold

第2章ではscaffoldジェネレータを使ってアプリを作成した。

アプリケーションの基本的な機能の一覧(index)、詳細(show)、新規作成(new/create)、編集(edit/update)、削除(destroy)するために必要なコントローラ、モデル、ビューをまとめて生成

※参考：rails generate scaffold | Railsドキュメント

Railsを作ったDavid Heinemer Hanssonさんが「15分で作るブログ（英語）」という動画でscaffoldを使ったブログの作り方を紹介していて有名になったとのこと。 www.youtube.com

データモデルを設計（Userモデル、Micropostモデル）

今回からDBを使うため、データモデルを設計した。

Userモデル

  • id: integer型
  • name: string型
  • email: string型

Micropostモデル

  • content: text型
  • user_id: integer型

integer型は整数。string型は文字列。

※参考：[Rails]データベースのデータ型種類について勉強してみた！ #Ruby - Qiita

Usersリソース

Usersリソースを生成するために下記のコマンドを実行した。

$ rails generate scaffold User name:string email:string

rails generateはrailsジェネレータという機能になる。

※参考：Rails ジェネレータとテンプレート入門 - Railsガイド

scaffoldは文字通りscaffoldのジェネレータを意味する

※参考：rails generate scaffold | Railsドキュメント

その後に、Userデータモデルにname（string型）とemail（string型）を追加している。

idは最初から組み込まれるらしく、追加しなくても良い様だ。

続いて、DBをマイグレートする

# rails db:migrate

このコマンドはActive Record マイグレーションを実行する意味になる。

※参考：Active Record マイグレーション - Railsガイド

Active Record はRails公式のORM

Active Recordとは、MVCで言うところのM、つまりモデルに相当するものであり、ビジネスデータとビジネスロジックを表すシステムの階層です。

※参考：ORMの概念理解 #ORM - Qiita

ORMはRDBを操作するための仕組み。SQLではなくバックエンド環境の言語で操作できる。

オブジェクト関係マッピング(ORM、Object-Relational Mapping)は、オブジェクト指向プログラミングと関係データベースの互換性を向上させるために設計されたプログラミング技術です。

※参考：Active Record の基礎 - Railsガイド

MVCの挙動

Userモデルの動きをMVCに当てはめると下記になる。

  • ユーザーがブラウザからurlをリクエストする
  • RailsルーターがurlをControllerに伝える
  • ControllerからModelにデータを問い合わせる
  • Modellがデータベースから値を取得する
  • ModellがControllerにデータを返す
  • ControllerからViewにデータを渡す
  • Viewがデータが入った状態のページを返す
  • Controllerがブラウザにhtmlのレスポンスを返す

こうして見るとユーザーとの間にはControllが立っていて、Modellから取得したデータをViewに合体させたページを返している。

※参考：Rails をはじめよう - Railsガイド

ルーティング（REST）

画面のリンクやボタンをクリックすると別の画面に遷移して、ページのurlも変わる。

config/routes.rbに設定する

resources :users

※参考：sample_apps/7_0/ch02/config/routes.rb at main · yasslab/sample_apps · GitHub

ルーティングの詳細

※参考：Rails のルーティング - Railsガイド

ユーザー一覧

ユーザー一覧の設定をapp/views/users/index.html.erbに記載する。

※参考：sample_apps/7_0/ch02/app/views/users/index.html.erb at main · yasslab/sample_apps · GitHub

Micropostsリソースを生成

先ほどのUsersと同じくrails generateコマンドを実行

# rails generate scaffold Micropost content:text user_id:integer

DBをマイグレート

# rails db:migrate

config/routes.rbにルーティング設定

resources :microposts

※参考：sample_apps/7_0/ch02/config/routes.rb at main · yasslab/sample_apps · GitHub

マイクロポストに140文字制限を設定

app/models/micropost.rbに下記を追記

validates :content, length: { maximum: 140 }

バリデーション機能詳細
※参考：Active Record バリデーション - Railsガイド

ユーザーとマイクロポストを関連づけ

app/models/user.rbにユーザーとマイクロポストを関連づける設定を追加

has_many :microposts

※参考：sample_apps/7_0/ch02/app/models/user.rb at main · yasslab/sample_apps · GitHub

has_many関連付けは、has_oneと似ていますが、相手のモデルとの「1対多」のつながりを表す点が異なります。

※参考：Active Record の関連付け - Railsガイド

app/models/micropost.rbにユーザーにポストを従属させる設定を追加

belongs_to :user

あるモデルでbelongs_to関連付けを行なうと、宣言を行ったモデルの各インスタンスは、他方のモデルのインスタンスに文字どおり「従属（belongs to）」します

※参考：Active Record の関連付け - Railsガイド

クラスの継承

app/models/user.rbにApplicationRecordクラスの継承がある。オブジェクト指向らしい作り♪

class User < ApplicationRecord

※参考：sample_apps/7_0/ch02/app/models/user.rb at main · yasslab/sample_apps · GitHub

app/models/micropost.rbにもある

class Micropost < ApplicationRecord

※参考：sample_apps/7_0/ch02/app/models/micropost.rb at main · yasslab/sample_apps · GitHub

ApplicationRecordはrubyにあらかじめ組み込まれているクラス

※参考：Active Record の基礎 - Railsガイド

最後に

とうことで、Toyアプリケーションを作りました。ユーザー登録、ポスト投稿、さらにCRUD処理、複数ページに遷移（ルーティング）など基本的な機能が備わっています。

RailsにはMVC構成のフォルダが最初から備わっており、さらにScaffoldを使うと簡単にアプリケーションを実装できることがわかりました。

今回でMVCの機能がどのように関連しあいながら動いているのか、ModelのDB操作やViewのページ生成の部分がどうなっているのかが体験できたので良かったです。DBを操作するORMであるActive Recordも初めて体験しました。

3章からはScaffoldを使わずに、そしてさらに機能の多いアプリケーション作りに入っていくようです！ここからが本丸！それではまた！

Reactを習得するためにやったことまとめ qiita.com