1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Laravel8でHTMLの共通部分をパーツにして使い回す方法(レイアウト共通化)|ビュー、コントローラー、ルーティング

Posted at

前提

Laravel6や7の記事は多かったのですが、Laravel8からルーティングの書き方が変わったのに気づかず進めてうまくいかなかったので、解決策を備忘録として残します。

Laravel 8.83.4
Composer version 2.2.7

コントローラーを作る

プロジェクトファイルに移動した状態で以下のコマンドを打つとコントローラーファイルが生成される

$ php artisan make:controller LayoutController

app/Controllersの中に、LayoutController.phpができているので開く。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class LayoutController extends Controller
{
    //
}

LayoutControllerクラスの中(//があるとこ)に以下を挿入

class LayoutController extends Controller
{
    public function index() {
		return view('layouts.index');
    }
}

layoutsフォルダの中のindex.blade.phpを返す、という内容にする。

親ビューを作る

resources/view/layoutsの中にlayout.blade.phpファイルを作って開く。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>共通レイアウト</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    </head>
    <body class="vh-100 d-flex justify-content-center text-center">
        <div class="w-75 mt-3">
            <div class="text-black-50 text-left border-bottom mt-5">
                <h1>ここは親ビューだよん</h1>
            </div>

            <div>
                @yield('content')
            </div>
        </div>

    </body>
</html>

挿入するパーツ部分(子ビュー)を作る

次に、同じようにresources/view/layoutsの中にindex.blade.phpファイルを作って開く。

<!-- layoutフォルダ配下の layout.blade.php を親にして継承 -->
@extends('layouts.layout')

@section('content')

<h2>ここは子ビュー、パーツ部分です</h2>

@endsection

web.phpにルーティングを書く

すでにweb.phpにはいくつかコードが入っていると思いますが、最終行に以下を追加すればOKです。

Route::get('/layout', [App\Http\Controllers\LayoutController::class, 'index'])->name('layouts.index');

これで、/layoutにアクセスすると、"親ビュー"やら、"子ビュー"などの文字が出ていると思います。

表示されなかったら・・・

ターミナルでプロジェクトフォルダのところまで行き、以下のコマンドを打つと、今使われているルーティングが表示されます。

$ php artisan route:list

URIの列に/layoutがあるか探してみてください。

なければ、ルートが追加されていないので、以下のコマンドで手動で追加しましょう。

$ php artisan route:clear
1
0
1

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?