2
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?

[Laravel]表示処理をMVC図を用いて説明してみた!

Posted at

はじめに

本記事はLaravelを学習し始めて2週間の初心者が学習したことを備忘録的に残すものです。MVC,CRUDって何ぞや?と思われている方には特に参考になると思いますので最後まで読んでいただけると嬉しいです!

また、何か間違っているところがありましたら優しくコメントで教えていただけますと幸いです。

そもそもMVC、CRUDってなに?

MVCとは

M: Model(モデル)
V: View(ビュー)
C: Controller(コントローラー)
の頭文字をとったものでLaravelなどのフレームワークで使われている設計手法の一つです。それぞれ以下を担当します。

  1. モデル
    データや情報の管理を担当。
  2. ビュー
    画面の表示を担当。
  3. コントローラー
    モデルとビューの仲介担当。

このように担当を分けることで、

  1. どの部分が何をしているか分かりやすい
  2. 問題が起きても直しやすい
  3. 使いまわしができる
  4. 複数人で協力して開発しやすい

のようなメリットがあります。

MVCの関係図
スクリーンショット 2024-04-21 215026.png

図には、MVCのほかに、「ルーティング」とありますがこれについては後ほど説明します。
ここでは、「ふ~んよく分からないけどこんな図があるんだな~」と思っていただければ大丈夫です。

CRUDとは

C: Create(作成)。新しいデータを作成します。
R: Read(読み取り,取得)。保存されているデータを取得します。
U: Update(更新)。すでにあるデータを変更します。
D: Delete(削除)。必要なくなったデータを削除します。

の頭文字をとったものでアプリケーションのデータを扱う際の基本的な操作のことです。

今回はToDoアプリを作りながらCRUD処理の説明をしていきます!
また、新規Laravelプロジェクトの作成手順に関しての説明に関しては割愛させていただきます。まだ新規プロジェクトを作成していない方は、
https://readouble.com/laravel/11.x/ja/installation.html
を参考にしてみてください。

次から、MVCそれぞれに関して説明していきます。

モデルを定義する

まず、モデルの最大の特徴ってなに?というところから。それは、

(Eloquent)モデルのメソッドを使うことでデータベースと簡単にやり取りができる

ことです。

そのやり取りとは具体的に、
データの、 取得,作成,更新,削除です。
勘の鋭い方は気づかれたかもしれませんが、そう!CRUD処理です!
コントローラーでこのやり取りを使うことで簡単にCRUD処理が実装できます!

ここでは、その下準備をしていきます。

1. テーブルを作ろう

モデルを作る前に、データベースにテーブルを作る必要があります。

そこで、マイグレーションを使って作成していきます。
マイグレーションとは、

SQLを使わずにデータベースを管理できる

仕組みです。

では早速やっていきましょう!

1. Artisanコマンドでファイルを作成

Laravelでは、artsanコマンドを使って簡単にファイルを作成できます。
CLIで以下のコマンドを実行してみてください。

php artisan make:migration create_todos_table

すると、database/migrations/下に
YYYY_MM_DD_六桁の数字_create_todos_table
というファイルが作成されます。

2. ファイルの中身を書く

ファイルのupメソッドにテーブルの情報を書いていきましょう。
今回のtodosテーブルには、
id,title,content,created_at,updated_at
のカラムを持たせようと思います。

YYYY_MM_DD_六桁の数字_create_todos_table
public function up(): void
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('title', 150);
            $table->text('content');
            $table->timestamps();
        });
    }

これで、todosテーブルの定義ができました。

3. 実行コマンドでテーブルを作成

実際にデータベースにテーブルを作成します。
CLIで以下のコマンドを実行してみてください。

php artisan migrate

これでデータベースにテーブルが作成されました。

2. モデルを作ろう

テーブルの作成ができたので、モデルを作っていきましょう。

1. Artisanコマンドでファイルを作成

以下のコマンドを実行する前に一つ注意点があります。
それは、
モデル名 = テーブル名の単数形 かつ 一文字目は大文字
つまり、
テーブル名はtodosより、モデル名はTodoとなります。

php artisan make:model Todo

実行すると、app/Models/下に
Todo.php
というファイルが作成されます。

2. ファイルの中身を書く

Todo.php
class Todo extends Model
{
    use HasFactory;

    protected $table = 'todos';

    protected $fillable = [
        'title',
        'content',
    ];
}

これで、todosテーブルのモデル定義ができました。

今回使用するテーブルはtodosテーブルだけなので
1. テーブルを作ろう2. モデルを作ろう
のサイクルを一周だけしましたが、他にもテーブルが必要な場合は1つのテーブルに対して1サイクルしましょう。

ルーティング

ルーティング?え、MVCだけじゃないの?
と思われたかもしれません。
私も最初はそう思いました。

しかし、個人的にはこの ルーティングというものはMVCと同じくらい大切だと思っています!(RMVCモデルでもいいくらい?)

なぜかというと、
ルーティングでは、あるURLにアクセスが来たら、このコントローラーのこのメソッドを使ってね!といった感じで、あるURLに対応するコントローラーとそのメソッドを指定してあげる必要があります。ですから、ルーティングはコントローラーと密接な関係を持っています。

と言われてもよくわからないと思うので、説明していきます。

1. 基本的な操作の流れ

まずは、ルーティングを説明する前に基本的な操作の流れを説明します。

  1. ルーティングを定義する
  2. コントローラーを定義する
  3. ビューを定義する

この流れはCRUD処理を実装するときも毎回同じです。
なので、この流れに沿って実装を進めていくことが一番大切だと感じています。そこで、常にMVCモデルの図を見ながら実装していくと次に何をすべきかが明確になるので、CRUDそれぞれのMVCモデル図を参照しながら進めていきましょう!

あれ?モデルは?と思われた方もいると思いますが、モデルの定義自体は先ほどのモデルを定義するですべて終了しているので、後は2.コントローラーを定義するのところでモデルを使ってCRUD処理を簡単に実装していきます。

2. ルーティングを定義する

では、実際にどうやってルーティングを定義するのかを説明していきます。今回はCRUD処理のR(読み取り)を実装していくので、そのルーティングを定義します。
スクリーンショット 2024-04-22 195610.png

ルーティングはroutes/web.phpに書いていきます。

web.php
<?php

use App\Http\Controllers\TodoController;

Route::get('/', [TodoController::class, 'showTodos'])->name('todos');

順に説明していきます。

use App\Http\Controllers\TodoController;

これは使用するコントローラーを呼び出してきています。

Route::get('/', [TodoController::class, 'showTodos'])

URL:/ にアクセス来たら
コントローラー:TodoController の
メソッド:showTodos を呼び出してください。

->name('todos')

URL:/ にtodosという名前をつけています。
これが後々役に立ってきます。

コントローラー

次に、先ほどルーティングで定義したコントローラーとそのメソッドを定義していきましょう。

artisanコマンドでファイルを作成

php artisan make:controller TodoController
これで、app/Http/Controllers/下に
TodoController.php
ができます。

メソッドを定義する

TodoController.php
<?php

namespace App\Http\Controllers;

use App\Models\Todo;

class TodoController extends Controller
{
    /**
     * Todoを表示
     * @return view
     */
    public function showTodo()
    {
        $todos = Todo::all();

        return view('todo', compact('todos'));
    }
}

順に説明していきます。

use App\Models\Todo;
Todoモデルを使えるように呼び出しています。

$todos = Todo::all();
ついにモデルの威力を発揮します!
Todo::all()todosテーブルから全てのレコードを取得してきて、$todos変数に入れています。

return view('todo', compact('todos'));
view('todos', ...)は表示したいビューのファイルを指定しています。
view(..., compact('todos'))はビューで$todos変数を使えるようにしています。

ビュー

最後は先ほどのshowTodoメソッドでview('todos', ...)というビューが返されたので、そのビューを定義していきます。

ビューファイルは、resources/views/下に
todos.blade.php
といった感じで作ります。

todosはshowTodoメソッドのreturn view('todo', ...);と合わせます。
.blade.phpはLaravel側がこれで認識するので.bladeは必要です。

todos.blade.php
<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
</head>
<body>
  <div class="container">
    <h1>Todo List</h1>

    <a class="new-task" href="/todos/new">タスクを追加する</a>

    <table>
      <thead>
        <tr>
          <th>タスク</th>
          <th>アクション</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($todos as $todo)
          <tr>
            <td>{{ $todo->title }}</td>
            <td>{{ $todo->content }}</td>
            <td>
              <a class="edit" href="#">編集</a>
              <a class="delete" href="#">削除</a>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</body>
</html>
2
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
2
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?