HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

Laravelの構造と処理の流れを【MVCモデル】で初心者向けに解説【model,view,controller】

約12分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

Laravelの構造と処理の流れを【MVCモデル】で初心者向けに解説【model,view,controller】
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • Web職人と呼ばれる今人気急上昇のPHPのフレームワークLaravelの構造や処理の流れを初心者向けに解説して欲しい。
  • ついでにMVCモデルの解説、何が魅力的なのかも知りたい。

今回の記事では、PHPの人気フレームワークであるLaravelの処理の構造や流れ、初めに理解しておくと学習がスムーズにいく「MVCモデル」の基礎を初心者向けに解説します。

Laravelとは何か?なぜ人気なのか知りたい方はこちらの記事をどうぞ!

【人気急上昇中】Laravelとは?できること、Web職人と呼ばれる理由を初心者向けに解説

Laravelをこれから学習してみようと思う方は、まず初めにLaravelの構造を学ぶ必要があります。

Laravelの構造、処理の流れを学ぶ事で、、、

  • 学習の理解度が格段に上がる
  • アプリ開発のイメージがすぐにできる
  • どの処理をどのファイルに書けばいいかわかる

このようにメリットが沢山あるので、しっかり学んでおきましょう!

✔︎こんな方にオススメ

  • これからLaravelの学習を始めようと思っている方
  • Laravelがどのような構造になっているか知りたい方
  • 必須知識「MVCモデル」を知らない方
Hiko
Hiko

僕もまず初めにLaravelのMVCモデルをインド人の先生に教わりました!

Laravelでのブログシステムの処理の流れ

まず初めに「MVCモデル」を学ぶ前に、実例をお見せしながら、Laravelの処理の全体像を掴んでいきましょう。

LaravelではECサイトや、マッチングサイト、ブログなどブラウザ上で動く全てのWebアプリケーションを作る事ができますが、最もシンプルなブログサイトを例にします。

✔︎ブログ記事が公開されるまでの流れ

  1. 僕が記事を一生懸命書く
  2. 記事のデータがPHPによって処理される
  3. 記事データがデーターベースに格納される
  4. フロント言語(HTML,CSS)が記事データを整えてくれる
  5. 読みやすい記事になって公開される

ブログサイトって一見シンプルそうに見えますが、LaravelやPHPで作ると裏ではこのような処理がされ、皆さんに一般公開されているのです。

ブログシステムではPHPでのデータの受け渡しや処理、データベースへ格納、フロント言語で見た目を整えて公開されている!

Hiko
Hiko

Laravelの処理の大まかな処理が掴めた所で「MVCモデル」を交えて解説します!

Laravelの大まかな処理の流れ【MVCモデル】

LaravelのMVCモデルを図で解説するとこんな感じです。

MVCは、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。 アプリケーションソフトウェアの内部データを、ユーザーが直接参照・編集する情報から分離する。そのためにアプリケーションソフトウェアを以下の3つの部分に分割する。Model、View、Controller。

Model View Controller – ウィキペディア

MVCモデルは「Model、View、Controller」この3つから構成されており、これらを組み合わせてアプリケーションを開発することにより、より効率よく開発する事ができます。

✔︎MVCモデルを構成するもの

  • Model(モデル):DBとの架け橋(データを格納したり取り出したり)
  • View(ビュー):フロントサイドを作る(アプリの見た目を作る by HTML,CSS,Js)
  • Controller(コントローラー):アプリの全体を統括する(データをModelに渡したり、データをViewに渡したりする処理関数を作る)

これらの役割をそれぞれ知っておく事で、どこにどんなコードを書けばいいか理解できるようになります。

Laravelでは、デフォルトでとてつもない量のファイルとフォルダが入っているので、初心者の方が見るとおそらく手が止まるかと思います。

「MVCモデルを理解する=Laravelを扱えるようになる」と言っても過言ではないです!

✔︎ブログシステムをMVCモデルで解説

  • 僕が記事を書く
  • データがrouteによって受け取られる
  • routeでどのControllerに送信するか決める
  • Controllerからmodelに送信される
  • Modelがデータベースに格納する
  • データベースからModelに記事データが送信される
  • ControllerからViewにデータを送信する
  • Viewで見た目を整える
  • 記事が公開される

MVCモデルを使ってブログシステムを解説するとこんな感じです。

Hiko
Hiko

次にMVCモデルのそれぞれの役割をコードを用いてご説明します!

Model(モデル)

Modelは主にControllerで処理されたデータをデータベースに格納したりする「データベースとの架け橋」のような役割があります。

✔︎Modelでできる事

  • データをDBに格納
  • DBからデータを引き出す
  • DBのテーブルを関連付けできる(カテゴリー作成の際に使用)

ModelファイルはApp/フォルダの直下に通常は配置され、

php artisan make:model Post

このようにコマンドを打つと自動的に生成されます。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title','price','price_id','user_id','area_id','study_id','image','message'];

    public function user(){
        return $this->belongsTo('App\User');
    }
    public function area(){
        return $this->belongsTo('App\Area');
    }
    public function study(){
        return $this->belongsTo('App\Study');
    }
    public function price(){
        return $this->belongsTo('App\Price');
    }
}

実際にModelファイルのコードをお見せするとこんな感じで、ブログ機能を実装するだけなら、それほどコーディングをする必要はありません。

View(ビュー)

Viewはフロントサイドを作るためのもので、Controllerで処理されたデータを受け綺麗に見た目を整えて表示する役割があります。

✔︎Viewでできる事

  • Controllerからデータを受け取る
  • アプリの見た目を作る
  • ヘッダーやフッターなどの使い回しができて便利
  • CSS,Bootstrap,Vue.jsがデフォルトで付いている

Viewファイルは「resouces/views/welcome.blade.php」に配置され、.bladeと書くルールがあります。

@if ($posts->count()>0)
    @foreach ($posts as $post)
       <div class="col-sm-3 card post" id="project">
           <a href="{{route('single.show',['id'=>$post->id])}}"></a>
                <div class="post-img-top">
                     <img src="{{asset($post->image)}}" alt="" class="study-image">
                        <div class="post-tag pl-2">
                                <span class="area">{{$post->area->area}}</span>
                                <span class="price">${{$post->price}}</span>
                                <span class="study">{{$post->study->study}}</span>
                        </div>
                 </div>
                 <div class="detail">
                     <img src="{{$post->user->avatar}}" alt="" class="icon-image" width="50px" height="50px">
                     <h3>{{$post->user->name}}</h3>
                          
                      <h2>{{$post->title}}</h2>
                      <p>{{$post->message}}</p>
                 </div>
      </div>
    @endforeach
    @else 
     <p>投稿はありません</p>
@endif

Viewのソースコードの一部をお見せするとこんな感じです。

ここではControllerで受け取ったデータをloop処理をして、<h2>や<div>を使って整えています。

Controller(コントローラー)

最後に最も重要なControllerですが、Laravelのシステムを全て制御しているもので、データをModelに送信したり、フロントにデータを送信したりする役目があります。

✔︎Controllerでできる事

  • データをModelに送信する
  • データを受け取りフロントへ送信する
  • 関数処理は基本ここに書く
  • SNS認証の処理
  • 決済システムの処理
  • 検索機能の処理
  • リクエストが来た際にどのViewを表示するか制御

Controllerファイルは、「app/Http/Controller/PostsContoller.php」のように配置されており、

php artisan make:controller PostsController

このようにコマンドに打つ事で生成されます。

public function store(Request $request)
    {
        $this->validate($request,[
            'title'=>'required',
            'price'=>'required',
            'price_id'=>'required',
            'area_id'=>'required',
            'study_id'=>'required',
            'message'=>'required',
            'image'=>'required|image'
        ]);

        $image = $request->image;

        $image_new_name = time().$image->getClientOriginalName();

        $image->move('uploads/posts',$image_new_name);

        $user_id = Auth::id();

        $post = Post::create([
            'title' => $request->title,
            'price' =>$request->price,
            'price_id'=>$request->price_id,
            'area_id'=>$request->area_id,
            'study_id'=>$request->study_id,
            'message'=>$request->message,
            'user_id'=>$user_id,
            'image'=> 'uploads/posts/'.$image_new_name
        ]);

        Session::flash('success','Post created successfully');

        return redirect()->back();
    }

Controllerの中身のコードの例はこんな感じで、この処理を簡単に解説すると、

  1. ユーザーが送信した情報をチェックする(’title’=>’required’,’price’=>’required’,)の部分
  2. 送信されたimgファイルを名前を変えてpostsフォルダに保存
  3. 送信されたデータをmodelに渡す
  4. DBにデータが保存できたらメッセージを表示
  5. 元のページへリダイレクト

このように、様々な関数処理をPHPを使って書く事ができます。

MVCモデルとLaravelの構造と処理の流れ まとめ

ネコ君
ネコ君

laraveの処理の仕組みが理解できて、アプリ開発のイメージが湧いたよ!

いかがでしたでしょうか!

Laravelでアプリを開発、いや、学習を始める前には必ずこの「MVCモデル」の流れやそれぞれの役割を把握しておきましょう!

Laravelを学習したいけど何から始めればいいかわかない方は、TechAcademy [テックアカデミー]PHP/Laravelコース を受講して実際にアプリを開発してみるといいでしょう!

最後までご覧いただきありがとうございました!

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)