LaravelにおけるMVCの基本

こんにちは!
株式会社SCOUTER開発部フロントエンドエンジニアの佐藤(@r_sato1201)です

弊社では、Laravel+Vue(nuxt)で開発をしています。 私は普段、フロントエンドの開発を担当していますが、サーバーサイドでの開発もできるようにしたいと思いLaravelの学習を始めました。

学習を進めていても、初めはどのような処理の流れなのか、MVCって何?といった感じで全くどのような動きをしているのかが掴めませんでした。

今回はLaravel初学者の方向けに、MVCにそって
シンプルなTODOアプリの「ユーザーのブラウザにサイト画面が表示されるまで」を例に、自分が理解した基本的なLaravelの処理の流れを説明したいと思います。

DBは下記のような想定です。

tasks

カラム名 内容
title タスク名
content タスクの内容

MVCとは

MVCとはアプリケーションを実装するためのデザインパターンです。 複雑なアプリケーションの処理を3つの役割に分割することで、実装の見通しもよくなるというメリットがあります。

それぞれの役割は、

Model データ処理全般。DBへのアクセスに関する処理を行う
View 画面表示を担当。ユーザーに表示する情報を出力する
Controller 全体の制御を担当。ユーザーからの入力をモデルに渡したり、モデルから渡されたデータをビューに渡し画面に表示する役割を担う

となっています。

ルーティングの設定

まずはルーティングです。 ルーティングとは、アクセスしたアドレスをもとに処理を割り振るための機能です。

routes/web.php

Route::get('tasks', 'TasksController@index');

例えば、上記のように書くとGETでルートパスにアクセスした際に
TasksControllerというコントローラのindexメソッドが実行されることを表しています。

モデル

モデルは、DBからデータを取得する処理が書かれています。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}

中身は空ですが、これでDBのtasksテーブルと紐付けることができます。

createやupdateなどの処理を実装した際は、 初期設定のままだとテーブルのどのカラムにも値を挿入することが出来てしまいますが、
fillableguardedを使うことで、こちらが意図していないカラムへの挿入を防ぐことが出来ます。
fillableプロパティには、挿入したいカラムを
guardedプロパティには、挿入したくないカラムを
指定することができます。

class Task extends Model
{
    protected $fillable = ['title', 'content'];
}

今回の例だと、title,contentはユーザーが値を自由に挿入するカラムなので、fillableを使っています。

コントローラ

コントローラとは、モデルとビューの橋渡しをする役割をしています。

app/Http/Controllers/TasksController.php

class TasksController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }
}

これはTaskモデルを使って、DBからデータを取得しビューに渡す処理をしています。

ビュー

ビューは画面表示を担当する箇所です。 コントローラーで運んできたデータを使って画面を完成させます。 ビューには、bladeというLaravelのテンプレートエンジンを使用します。 bladeはビューのなかに直接PHPを記述することもできます。 基本的にはresources/viewsディレクトリの中に設置します。

resources/views/task/index.blade.php

<html>
<head>
  <title>タスク一覧画面</title>
</head>
<body>
<h1>タスク一覧</h1>
<table>
  <tr>
    <th>タスク名</th>
    <th>内容</th>
  </tr>
  @foreach ($tasks as $task)
  <tr>
    <td>{{$task->title}}</td>
    <td>{{$task->content}}</td>
  </tr>
  @endforeach
</table>
</body>
</html>

まとめ

以上で、ユーザーのブラウザにサイト画面が表示されるまでの流れを追うことができました。 まとめると、

  1. ブラウザのURLによってルーティング処理を行う
  2. 該当のコントローラでDBからの情報を取得するようモデルに指示
  3. モデルでDBからデータを取得
  4. コントローラがモデルで取得したデータをビューに渡す
  5. ビューでユーザーの画面に表示

となります。

次回以降の投稿では、

  • ビューの部分をLaravelに置き換える
  • 生成、更新処理の流れ
  • ユーザー認証

などの内容をアウトプットできればなと思います。

さいごに

現在、株式会社SCOUTERでは、エンジニア、デザイナーの募集をしております。

興味のある方は、是非下記からご応募お願い致します!

www.wantedly.com

www.wantedly.com

www.wantedly.com

参考資料