🔴

【Rails初心者必見】MVC（Model-View-Controller）モデルとは

2024/04/06に公開

Rails

Ruby

mvc

tech

はじめに：

プログラミング初学者がRailsアプリケーションを動かす際に必要な知識として、MVCパターン（モデル）が挙げられる。プログラミング初学者がVScodeを用いてRails環境の構築後、MVCパターンを理解しながら、応用編でブラウザに表示したい内容をビューに記述できることを目標とした記事となっている。

この記事を読むことで得られる結果：

ローカル環境（自分のPC）にインストールされているVScodeからRailsアプリケーションをブラウザで表示させ、そのブラウザに自分が表示したい内容が表示できることが可能となる。

開発環境：

windows 11
Vscode 1.87.2
Ubuntu 22.04
wsl 2.1.5.0
ruby 3.2.3
rails 6.1.7
sqlite3 3.37.2
node 12.22.9
nmp 10.5.0

開発環境の構築がまだの方はこちらから：

ここから使うフォルダは、この2つ。（★）のファイルを使用していく。

フォルダ名	目的・内容
app/	モデル、ビュー（★）、コントローラ（★）のディレクトリ
config/	ルーティング（★）や言語設定やその他各種設定ファイルのディレクトリ
db/	データベースに関するディレクトリ（★）

MVCパターン（MVCモデル）とは（基礎）：

MVCモデル全体像

MVCモデルとは、Model（M）、View（V）、Controller（C）のそれぞれの頭文字を取ったもの。

Model（M）とは

【Modelの主な役割】
・データベースとコントローラの仲介役。
・データベースとデータをやり取りしたり、データの登録・更新・削除・制約などを行う。
・データベースから取得したデータの処理結果をコントローラへ渡す。
・データベースに作成されているテーブル同士の繋がり（アソシエーションまたはリレーション）を定義できる。
・コントローラやビューで呼び出すためのメソッドを定義することができる。

View（V）とは

【Viewの主な役割】
・表示や入出力などのユーザーインターフェースを担当する。
・コントローラからデータを受け取って表示したり、リクエストデータをコントローラに送る役割がある。
・HTMLやCSSなどが記載されており、それを表示する。

Controller（C）とは

【Controllerの主な役割】
・ビューとモデルを制御する。
・ルーティングからコントローラのアクションが呼び出され、その後の処理を行い、ビューで表示を行う。

MVCパターンの処理の流れ

MVCモデルの処理の流れ

①ブラウザのURLをもとに、リクエストが送られる。
②URLをもとにルーティングファイル（routes.rb）に記述されたコードを参照し、該当するコントローラとアクション(index等)を呼び出す。
③コントローラのアクションを呼び出し、処理を実行する。
④アクションに書かれた処理を実行し、モデルに処理を実行依頼をかける。
⑤モデルはデータベースとやり取りを行い必要なデータをモデルへ返す。
⑥モデルから受け取ったデータをコントローラで処理する。
⑦コントローラからビューへレスポンスが返り、ブラウザに結果が表示される。
※⑦以降またビューで表示されているボタンなどに処理が組み込まれていたら、①～⑦を同じように実行する。

例）Instagramの投稿一覧を表示させるまでのMVCモデルの処理の流れ

①Instagramを検索し、投稿一覧ボタンを押す。（＝リクエストが送られる）
②Instagramのアプリケーション内にあるルーティングファイルから投稿一覧を表示させるためのコントローラのアクション（ここではindex）を実行する。
③モデルとデータベースがやり取りして投稿の一覧をコントローラへ返す。
④コントローラがビューへ表示させる。

MVCパターン（MVCモデル）とは（応用）：

1．モデルを作成する。

1: ターミナルで以下を実行し、モデルファイルを生成する。

rails g model Post title:string body:text　//titeleとbodyは後ほど解説

2: モデルファイルが生成されたか確認する。

app/models/post.rb

バリデーション（validation）とは（発展編）

・正しいデータだけをデータベースに保存するためのルールのこと。
・バリデート（validate）ともいう。
・コントローラやビューのjava scriptからでもバリデーションをかけることが可能だが、できれば避けたい。なぜなら、java scriptをoffにされるとバリデーションがかからないから。
・Active Recordには定義済みのバリデーションヘルパーが多数用意されており、様々なバリデーションルールを設定することが可能。
・基本的には、モデルファイルにバリデーションをかけていく。
・バリデーションが失敗すると、オブジェクトのerrorsコレクションにエラーメッセージが追加され、それをViewへ渡すことでエラーメッセージを表示できる。
【モデルファイル（app/models/post.rb）の記載例】

    class Post < ApplicationRecord
      validates :title, presence: true, length: { maximum: 20  }
    　# titleというカラムは「空（null)」「20文字以上」では保存されない。
      validates :body,  presence: true, length: { maximum: 400 }
    　# bodyというカラムは「空（null)」「400文字以上」では保存されない。
    end

2. マイグレーションファイルを作成する。

1:　モデルファイルと同時に作成されたマイグレーションファイルを確認する。

db/migrate/20240101_create.posts.rb

マイグレーション（migration）ファイルとは（基礎編）
・データベース構造を示したファイル。
・マイグレーションファイル名は常に英語の複数形である。
・データベース構造を変更することが可能。
・データを保存する際のバリデーション（保存のルール）の設定をすることが可能。

【マイグレーションファイルの中身（＝db/migrate/20240101_create.posts.rb）】

    class CreatePosts < ActiveRecord::Migration[6.1]
      def change
        create_table :posts do |t|　#Postsテーブルを作ります。
          t.string :title #srting(文字列）データとしてtitileカラム作って下さい。
          t.text :body　#textデータとしてbodyカラムを作って下さい。
          t.timestamps　#作成日時データとしてtimestampsカラムを作って下さい。
        end
      end
    end

現段階では以下のようなテーブルが作成されるはずです。(idとtimestampsは自動生成）

id	title	body	timestamps
1	投稿id_1のタイトル	投稿id_1の本文	id_1の作成日時
2	投稿id_2のタイトル	投稿id_2の本文	id_2 の作成日時
3	投稿id_3のタイトル	投稿id_3の本文	id_3の作成日時

2: マイグレーションを実行する。

    rails db:migrate

以下のような表示（create_table)がでていれば、マイグレーション成功となっている。

$ rails db:migrate
Running via Spring preloader in process 314225
== 20240405125535 CreatePosts: migrating ======================================
-- create_table(:posts)
   -> 0.0077s
== 20240405125535 CreatePosts: migrated (0.0091s) =============================

3: テーブル情報がまとまっているファイル（schema.rb）を確認する。

db/migrate/schema.rb

先ほどマイグレーションした際に作成され、テーブルの情報がまとまっている（created_atとupdated_atは自動生成）。

3. テーブルにデータを保存してみる。

1: Railsコンソールを起動させ、起動ができたか確認する。

    rails console #rails cでも可

以下の表示になっていれば問題なく起動できている。

    Running via Spring preloader in process 314657
    Loading development environment (Rails 6.1.7.7)
    irb(main):001:0>

Rails consoleとは（基礎編）
・Railsアプリケーション（データベース）とやり取りすることが出来るようになるコマンドのこと。
・サーバーを起動させずとも、rubyコードを実行することが可能となる。
・Active Recordのメソッドを用いてコンソールからデータベースを操作可能。

メソッド	内容
allメソッド	全てのレコードを返す
findメソッド	指定したidのレコードを返す
find_byメソッド	検索でヒットしたレコードの最初の一件だけを返す
newメソッド	インスタンスを生成する
saveメソッド	インスタンスをデータベースに保存する
createメソッド	インスタンス生成とデータベースに保存する
updateメソッド	レコードの情報を更新する

・Railsコンソールを終了させたい場合は、exitまたはquitと実行する。

2: Railsコンソールからデータを生成・保存してみる。

    Post.create(title: "Hello Rails", body: "I am on Rails!")

以下が表示されれば、生成・保存が成功している。

    irb(main):001:0> Post.create(title: "Hello Rails", body: "I am on Rails!")
       (1.1ms)  SELECT sqlite_version(*)
      TRANSACTION (0.1ms)  begin transaction
      Post Create (2.2ms)  INSERT INTO "posts" ("title", "body", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["title", "Hello Rails"], ["body", "I am on Rails!"], ["created_at", "2024-04-06 01:31:43.814488"], ["updated_at", "2024-04-06 01:31:43.814488"]]
      TRANSACTION (13.5ms)  commit transaction
    => 
    #<Post:0x0000557a2bbec4e0
     id: 1,
     title: "Hello Rails",
     body: "I am on Rails!",
     created_at: Sat, 06 Apr 2024 01:31:43.814488000 UTC +00:00,
     updated_at: Sat, 06 Apr 2024 01:31:43.814488000 UTC +00:00>
    irb(main):002:0>

テーブルを視覚的にわかりやすく記載すると以下のようになっている。

id	title	body	created_at	updated_at
1	Hello Rails	I am on Rails!	2024 01:31:43	2024 01:31:43

3: もう１つデータを生成・保存してみる。

    irb(main):004:0> Post.create(title: "Rails console", body: "I am Rails console!")

4: Findメソッドを用いて特定のデータを表示させてみる。

    irb(main):003:0> Post.find(1)
      Post Load (1.8ms)  SELECT "posts".* FROM "posts" WHERE "posts"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
    => 
    #<Post:0x0000557a2bed01c0
     id: 1,
     title: "Hello Rails",
     body: "I am on Rails!",
     created_at: Sat, 06 Apr 2024 01:31:43.814488000 UTC +00:00,
     updated_at: Sat, 06 Apr 2024 01:31:43.814488000 UTC +00:00>
    irb(main):004:0>

5: Railsコンソールを終了させる。

    exit　#またはquitを実行

4. ブラウザに保存したデータを表示する。

1: コントローラに保存したデータを取得する記述を行う。

    class PostsController < ApplicationController
      def index
        @posts = Post.all
        #@posts　　：@を付けておくとViewから呼び出すことができる。（＝インスタンス変数）
        #Post.all  ：Postsテーブルに保存されているデータを全て取得
        #つまり、Postsテーブルのデータを@Postsに入れて今後Viewで表示するよという感じ
      end
    end

ORM(Object Relational Mapping)とActive Recordとは（発展編）

ORMとはデータベースとプログラミング言語(JavaやRubyなど)の「翻訳者」として機能しているプログラム技術または仕組みのこと。現状だと隠れているが、本来であればデータベースの操作はSQL（Structured Query Language）という言語を用いて行う必要がある。

Active Recordとは、Railsに搭載されているORMの機能のこと。ORMであるActive Recordが機能することでRubyを用いてデータベースとのやり取りが行えるようになっている。

【SQLの場合】

    SELECT * FROM USER WHERE ID = 1 LIMIT 1;

【RailsのActive Recordの場合】

    Post.find(1)

上記のようにActive Recordを用いることで記述量も減り、可読性も上がる。

2: インスタンス変数を受け取れるようビューファイルを編集する。

    <h1>Hello</h1>

    <ul>
      <% @posts.each do |post| %> #Postsテーブルの全件データを1つ1つに分けて繰り返す
        <li>
          <%= post.title %>　#1つのtitleを表示する
          <%= post.body %>　#1つのbodyを表示する
        </li>
      <% end %>
    </ul>

3: サーバーを起動する

rails s

4: http://127.0.0.1:3000/post/indexにアクセスし、表示を確認する。

app/views/index.html.erb

5.まとめ

MVCモデルの処理の流れ

①http://127.0.0.1:3000/post/index、リクエストがサーバーに送られる。
②URLをもとにルーティングファイル（routes.rb）に記述されたコードを参照する。
③コントローラ（PostsController）のアクション(index)を呼び出し、処理を実行する。
④アクション(index)に書かれた処理（データ全件取得する）を実行し、モデル（Post）に処理を実行依頼をかける。
⑤モデル（Post）はデータベース（Posts）とやり取りを行い必要なデータをモデルへ返す。
⑥モデル（Post）から受け取ったデータをコントローラ（PostsController）で処理する。
⑦コントローラ（PostsController）からビュー（index.html.erb)へレスポンスが返り、ブラウザに結果が表示される。

参考サイト

https://railsdoc.com/rails_base

おわりに

今回、プログラミング初学者がRailsアプリケーションを動かす際に必要な知識であるMVCパターン（モデル）について学んだ。応用編では、ブラウザに表示したい内容をビューに記述していった。この流れが理解できれば、自分の思い描くデータが表示できるようになると考える。

はじめに：

この記事を読むことで得られる結果：

開発環境：

開発環境の構築がまだの方はこちらから：

MVCパターン（MVCモデル）とは（基礎）：

MVCパターンの処理の流れ

MVCパターン（MVCモデル）とは（応用）：

1．モデルを作成する。

2. マイグレーションファイルを作成する。

3. テーブルにデータを保存してみる。

4. ブラウザに保存したデータを表示する。

5.まとめ

参考サイト

おわりに

Discussion