Zenn
🙆‍♀️

【初心者向け】Laravelのview開発で気を付けること

2024/12/30に公開
Bootstrap
CSS
Laravel
React
tech

Laravelのviewについて

  • Bladeテンプレートエンジンを用いる
    • 拡張子は.blade.php
テンプレートエンジンとは
  • 動的なウェブページを生成するために使用されるツールやライブラリのこと
  • 変数を埋め込んだり、ループ・条件分岐、テンプレートの継承などが行える

Bladeディレクティブ

LaravelのBladeテンプレートエンジンで使用される特別な構文のこと

  1. @extends:テンプレートの継承
    親テンプレートを継承する
home.blade.php
@extends('layouts.app')

/resources/views/layouts配下のapp.blade.phpのレイアウトが継承される

  1. @section と @endsection: セクションの定義
    セクションの内容を定義し、後で親テンプレートに挿入するために使用
home.blade.php
@extends('layouts.app')
@section('title', 'hogehoge')
@section('content')
    <p>This is my body content.</p>
@endsection
  1. @yield: セクションの表示
    親テンプレートでセクションの内容を表示するために使用
app.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>App Name - @yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>
  1. @include: 別のビューをインクルード
    別のBladeビューをインクルードするために使用
home.blade.php
@extends('layouts.app')
@section('title', 'hogehoge')
@section('content')
    <p>This is my body content.</p>
    @include('partials.myskillsets')
@endsection

/resources/views/partials配下のmyskillsets.blade.phpのビューがインクルードされる

  1. @if, @elseif, @else, @endif: 条件分岐
@if($user->isAdmin())
    <p>Welcome, Admin!</p>
@elseif($user->isManager())
    <p>Welcome, Manager!</p>
@else
    <p>Welcome, User!</p>
@endif
  1. @foreach, @endforeach: ループ
@foreach($users as $user)
    <p>{{ $user->name }}</p>
@endforeach
  1. @for, @endfor: ループ
@for($i = 0; $i < 10; $i++)
    <p>Current value: {{ $i }}</p>
@endfor
  1. @while, @endwhile: ループ
@while(true)
    <p>This will loop forever.</p>
@endwhile
  1. @forelse, @empty, @endforelse: ループ
@forelse($users as $user)
    <p>{{ $user->name }}</p>
@empty
    <p>No users found.</p>
@endforelse
  1. @switch, @case, @break, @endswitch: スイッチ文
@switch($i)
    @case(1)
        <p>First case...</p>
        @break

    @case(2)
        <p>Second case...</p>
        @break

    @default
        <p>Default case...</p>
@endswitch

Laravel UIについて

フロントエンドの開発環境を簡単に作成できる公式ライブラリ

  1. 下記のコマンドでLaravel UIをインストールする
composer require laravel/ui
  1. 使いたいライブラリを選んでコマンドをたたく
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
  1. 下記のコマンドで依存関係をインストール
npm install

CSSについて

bootstrapやtailwindCSSなどが有効になっていると、自作で作成したクラスのスタイルが反映されないことがあるので注意

viewが更新されない

実際に開発してみて、CSSやJSがうまく反映されなかったときの対処法は下記の2つ

  1. php artisan view:clearでviewのキャッシュをクリアする
  2. ブラウザ自体のキャッシュをクリアする

Discussion