【Laravel初心者向け講座】ページ表示までの流れを掴もう(ルーティング⇒コントローラー⇒ビュー)

プログラミング


学べる内容:
・MVCモデルとは何か
・Webページを作れるようになる


先日の記事で開発の準備は整ったと思いますが、

https://kumatetsublog.com/shoot/blog/laravel-vue-axios-docker

今回は、どういう流れでページを表示しているかを解説しながら、
実際にWebページを作ります。


Laravel初心者の方は、ぜひ参考にしてみてください!

MVCモデルとは

MVC(Model–View–Controller)は、アプリケーションの開発設計パターンの一つです。

つまりMVCモデルとは、アプリの設計が「Model」「View」「Controller」の3つの基本的な構成パターンになっていることを指しています。

Ruby on railsやLaravelなど、
多くのフレームワークで用いられているモデルです。


最初は、

Model:データを処理するところ
Controller:リクエストを処理するところ(Modelを操作したり、Viewにデータを反映させたり…)
View:画面


くらいの認識でいいと思います。


表示の見た目(View)はデザイナー、データの処理(Model)はエンジニアが担当した方がやりやすいため、生まれた設計パターンです。
(ControllerはViewとModelの橋渡し役)



ざっくり以下のような入出力の流れ。

ユーザーが入力

Controller⇄Model

View(画面に反映)


MVCモデルが大まかに分かったところで、
Laravelの処理を追ってみましょう。

表示までの流れ(ルーティング→コントローラー→ビュー)

MVCモデルの説明で
ユーザーからの入力はControllerで処理すると言いましたが、

実際にはControllerのどの部分でリクエストを処理するかを指示する役が必要です。

このControllerへの橋渡しをしてくれる機能がルーティングです。

ルーティング


Laravelでは以下のファイルに全てのルーティングを記述します。

  • routes/web.php
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
// ↓↓新たに記述
Route::get('/hello', 'HelloController@sayHello');

/helloというURLのリクエスト(GET)が来たら、
HelloControllerのsayHelloというメソッドに処理をお願いするという意味です。

コントローラー


まだHelloControllerはありませんがLaravelはコマンドで簡単にコントローラを生成できます。

php artisan make:controller HelloController


すると
app/Http/Controllers直下にHelloControllerが自動生成されます。


そして、作成したHelloControllerの中に、sayHelloメソッドを記述します。

  • app/Http/Controllers/HelloController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HelloController extends Controller
{
    // sayHelloメソッド以外は自動生成
    public function sayHello()
    {
      $hello = 'Guten Morgen';
      return view('hello', compact('hello'));
    }
}


今回は、DBを操作する処理は入れませんでした。

helloという画面を返す処理を記述しました。
$helloという変数をViewに渡しています。

最後に、Viewファイルを作成します。

ビュー

Laravelフレームワークでは、Viewを以下の場所に置く決まりです。

resources/views/直下にhello.blade.phpを新規作成します。

blade.phpという拡張子が気になった方もいると思います。

Laravelでは、
ブレードというテンプレートエンジンを使用します。

テンプレートエンジンを使えば、Controllerで設定したデータを簡単に画面上に反映することができるので、実装がとても楽になります。

  • resources/views/hello.blade.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>HelloHello</title>
  </head>
  <body>
    <h1>{{ $hello }}</h1>
  </body>
</html>

{{ }}で囲むことによって、Controllerで定義した変数を画面に反映することができます。


以下のコマンドでローカルサーバーを起動させて、画面を確認してみます。

php artisan serve

ブラウザでhttp://127.0.0.1:8000/helloを開きます。

以下の文字が表示されれば成功です!

まとめ

Webページを作成するTips

  • ルーティング:routes/web.php
  • コントローラー作成コマンド:
    php artisan make:controller XXXXController
    作成場所:app/Http/Controllers
  • ビュー作成場所:resources/views
    ファイル名:YYYY.blade.php


Laravelのようなフレームワークの場合、
Webサイトを作る上で多数のルールがあり戸惑うことも多いと思います。

ですが、一旦覚えてしまえばルールに則って簡単にWebサイトを作ることができます。


あなたはもうすでにWebページを作れるようになりました。
いろんな画面を作ってみて、Webサイトづくりの楽しさを存分に味わいましょう!

それでは!

コメント

タイトルとURLをコピーしました