MVCモデルという現在の開発のおいて主流となっているものをご存知でしょうか。
MVCモデルとはモデル、ビュー、コントローラーの3つに分けてそれぞれ役割を持たせるものです。
それぞれが一つの役割を持つことによって、ソースコードの可読性を上げたり、保守性を高めたりすることができます。
また開発においても、非常に分かりやすくてプログラムが組みやすい、設計もしやすいモデルです。
今回はそのMVCモデルについて紹介していきます。
LaravelでのMVC構築や使用方法も併せて紹介します。
- MVCモデルについて知りたい
- LaravelでのMVCモデルを理解したい
- Laravelの初期設定について知りたい
Laravelの導入手順は下記で解説しています。
MVCとは
MVCモデルとは下記の3つによって構成されます。
- M（モデル）：データベース
- V（ビュー）：クライアント側
- C（コントローラー）：MとVの橋渡し
まずは下記図をご覧ください。
MVCモデルはコントローラーを中心に、モデルとビューがやりとりするものです。
モデル（データベース）から得た情報を、コントローラーを介してビュー（ブラウザに表示する）に渡します。
ビュー側でユーザが行った処理に関してコントローラーが何らかのアクションを起こします。
例えば、クライアントから今日の天気を知りたいという要求があった時、モデルに今日の天気の情報が格納されている場合は、コントローラーを介してモデルからビューへ天気の情報を渡します。
以上のように処理を分割することで、分かりやすいプログラムを実現することが可能です。
初期開発時に役立つこと
初期の開発環境を整えるのに便利なことをまとめました。
私的にはほぼ必須の知識だという認識でいます。
どれも便利であり必要であるので参考にしてみてください。
コントローラー作成
コントローラーは下記コマンドで作成できます。
php artisan make:controller ○○Controllerコマンドでなくても、VSCodeの所定のフォルダで右クリックから作成できます。
今回は元々あるController.phpを親クラスとして、それを継承した子クラスであるIndexController.phpを作成します。
Controller.php
<?php
namespace App\Http\Controllers;
abstract class Controller
{
}Controller.phpでは各コントローラーで利用する共通の処理を記述します。
例えば、ページ遷移の処理やDBの利用などが当てはまります。
IndexController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
// ホームページコントローラー
class IndexController extends Controller
{
public function index()
{
$hello = 'Hello,World!';
$hello_array = ['Hello', 'こんにちは'];
return view('index', compact('hello', 'hello_array'));
}
}
「extends Controller」の部分でController.phpのクラスを継承しています。
return view()内ではViewに渡す変数となります。
View側(blade.php)でコントローラークラスで使用した変数を表示することができます。
ルートの設定
ルートは下記のように指定します。
Route::get('/', [IndexController::class, 'index']);先ほど作成したコントローラーを例にします。
第一引数の「/」はURLを示します。
URLが「test」なら「/test」です。
第二引数は利用するコントローラーのクラスを指定します。
第三引数では表示するメソッド名を指定。
URL「/」はIndexController.phpのIndexメソッドを利用する
例ではgetですが、postならRoute::postと指定します。
共通レイアウトを作成
共通レイアウトとは、サイトのどのページでも共通として使用するレイアウト。
例えば、本サイトでいうとヘッダー部は共通レイアウトとして、すべてのページで同じものを使用しています。
共通レイアウトを使用する利点として、変更箇所が1か所で済むということです。
ヘッダー部を例にすると、ヘッダーの「Hachi System」という文字を変更したい場合、共通レイアウトを使用していないと全ページのヘッダーを変更しなくてはなりません。
またコードも冗長となってしまうので、保守性が悪いです。
共通レイアウトの使用例
ファイルを以下のように分けていきます。
- resources/view/Layout/layout.blade.php
- resources/view/Layout/header.blade.php
- resources/view/Layout/footer.blade.php
- resources/view/index.blade.php
①～③までが共通レイアウトになります。
④は①を継承して使用する各ページ（子）です。
layout.blade.phpは共通レイアウトの大本になります。
<DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="説明文">
<meta name="keywords">
<title>@yield('title')</title>
<link href="/css/layout.css" rel="stylesheet">
</head>
<body>
<header>
@include('Layouts.header')
</header>
<main>
@yield('contents')
</main>
<footer>
@include('Layouts.footer')
</footer>
</body>
</html>ここで重要になるのが下記です。
- @yield
→子で自由にできる - @include
→他のbladeを部品として使用
次は「@include」で部品化したheaderとfooterです。
header.blade.php
<p>ヘッダー</p>footer.blade.php
<p>フッター</p>続いては子となる「index.blade.php」です。
@extends('Layouts.layout')
@section('title', 'ホーム')
@section('contents')
<p>Hachi System</p>
@endsection
ここで重要になるのが下記です。
- @extends
→継承する親を指定 - @section
→親で定義した@yield部分の実装
結果はこうです。
タイトル部分が「ホーム」になっています。
子で指定したものが反映されていますね。
さらに、ヘッダーとフッターも表示されており、メインには「Hachi System」と子で指定したものが表示されました。
これで共通レイアウトが完成しました。
コンテンツを作成する場合は、メインの部分だけを実装し、タイトルはその都度ページに合わせて表示されば、統一感のあるサイトが完成します。
そして修正なども容易となり、保守性が上がるだけでなく、冗長でないので可読性も上がります。
おまけ
MVCとは別の私がハマったところを紹介します。
cssファイルの配置
デフォルトでresources/cssにapp.cssがあります。
cssファイルはそこに追加すれば良いと勝手に思っていたのですが。
そこで調べたところ、publicフォルダ配下にcssフォルダを作成するとのこと。
publicフォルダは外部から見れる場所になります。
cssやJavaScript、画像などの静的ファイルはここに置くとのこと。
指定の仕方は下記です。
<link href="{{ asset('/css/任意のcssファイルの場所') }}" rel="stylesheet">レスポンシブ対応
PC画面で作成していると、ふとスマホサイズにしたときにレイアウトが崩れる場合があります。
そのために、PCとスマホでCSSファイルを分けるか、CSSファイル内で画面サイズによって適用するCSSを分ける必要があり。
今回はCSSファイルを分ける方向で説明します。
まずはbladeに下記を追加してください。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>これは画面のサイズを取得する設定です。
次にCSSファイルを分けるためのコードを同じくbladeに追加します。
<link media="screen and (min-width: 981px)" href="{{ asset('/css/layouts/layout.css') }}" rel="stylesheet">
<link media="screen and (max-width: 980px)" href="{{ asset('/css/layouts/layout-mobile.css') }}" rel="stylesheet">widthが981px以上の場合はPCのCSSを適用して、980以下ならスマホ用のCSSを適用します。
これで、PCとスマホでCSSを分けることができました。
chromeで確認する場合は右クリックの「検証」で検証ツールを立ち上げて確認してください。
デバッグ方法
まずは下記コマンドでXDebugが入っているかを確認します。
sail php -v下記のようにXDebugが表示されればOKです。
PHP 8.4.4 (cli) (built: Feb 15 2025 08:59:26) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.4.4, Copyright (c) Zend Technologies
with Zend OPcache v8.4.4, Copyright (c), by Zend Technologies
with Xdebug v3.4.1, Copyright (c) 2002-2025, by Derick RethansVSCode側でデバッグの設定を行います。
その後のダイアログで「PHP」を選択。
「launch.json」というファイルが作成されます。
下記のように編集します。
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003,
"stopOnEntry": false,
"pathMappings": {
"/var/www/html": "${workspaceFolder}"
},
},sail側の設定
.envファイルに下記を追加します。
SAIL_XDEBUG_MODE=develop,debug実際にデバッグを実行
F5を押下して実行します。
URLに下記を追加します。
?XDEBUG_SESSION_START=session_name例↓↓↓
http://localhost:9003?XDEBUG_SESSION_START=session_nameデバッグで止めたい場所でF9ボタンを押下してブレークポイントを設定してください。
まとめ
今回はMVCモデルから具体的な使用例などを解説しました。
MVCモデルの利点は処理を分離することができる点です。
可読性も上がり、保守もしやすい構成なので最近ではよく利用されています。
データベースからのデータ取得の部分でバグが出ているなら「Model」を疑う、といったように判断が容易となるでしょう。
（必ずしもそうとは限りませんが）
さらにお互いが干渉しないこともメリットと言えます。
色々なコードで色々な処理をしていると、コードがぐちゃぐちゃになるのです。
それをMVCによって整理しています。
本記事を参考にMVCモデルの理解を深めましょう。
関連記事
参考サイト
コメント