学べる内容：
・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サイトづくりの楽しさを存分に味わいましょう！
次回は、「マイグレーション」について解説します！
↓↓
それでは！
コメント