Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Laravel7.0-フロントエンド-

(2020-04-24 Laravel7.0対応)

Bladeテンプレート

<html>
    <head>
        <title>アプリ名 - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            ここがメインのサイドバー
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>
@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
    @@parent

    <p>ここはメインのサイドバーに追加される</p>
@endsection

@section('content')
    <p>ここが本文のコンテンツ</p>
@endsection

コンポーネントとスロット
bash
artisan make:component Alert

```php
class Alert extends Component
{
public $type;
public $message;

public function __construct($type, $message)
{
    $this->type = $type;
    $this->message = $message;
}

public function render()
{
    return view('components.alert');
}

}

html


{{ $message }}
{{ $slot }}


html



Woops!Something went wrong.


データ表示
html
Hello, {{ $name }}.
Hello, {!! $name !!}. <!-- エスケープしない -->
The current UNIX timestamp is {{ time() }}. <!-- PHP関数 -->
var app = @json($array); <!-- JSONを表示 -->
Hello, @{{ name }}. <!-- JSフレームワークで処理する -->
@verbatim <!-- 囲まれた範囲の波括弧をJSフレームワークで処理する -->

Hello, {{ name }}.

@endverbatim

制御構文
php
@if (count($records) === 1)
@elseif (count($records) > 1)
@else
@endif

@unless (Auth::check())
@endunless

@isset($records)
@endisset

@empty($records)

@endempty

@auth
@endauth

@guest

@endguest

@auth('admin')
@endauth

@guest('admin')
@endguest

@switch($i)
@case(1)
@break
@case(2)
@break
@default
@endswitch

@for ($i = 0; $i < 10; $i++)
現在の値は: {{ $i }}
@endfor

@foreach ($users as $user)

これは {{ $user->id }} ユーザーです。


@endforeach

@while (true)

無限ループ中


@endwhile

@foreach ($users as $user)
@if ($loop->first)
// これは最初の繰り返し
@endif

@if ($loop->last)
    // これは最後の繰り返し
@endif
<p>これは {{ $user->id }} ユーザーです。</p>

@endforeach

@foreach ($users as $user)
@foreach ($user->posts as $post)
@if ($loop->parent->first)
// これは親のループの最初の繰り返しだ
@endif
@endforeach
@endforeach

セクションディレクティブ
php
@hasSection('navigation')


@yield('navigation')
<div class="clearfix"></div>

@endif
```

プロパティ 説明
$loop->index 現在のループのインデックス(初期値0)
$loop->iteration 現在の繰り返し数(初期値1)
$loop->remaining 繰り返しの残り数
$loop->count 繰り返し中の配列の総アイテム数
$loop->first ループの最初の繰り返しか
$loop->last ループの最後の繰り返しか
$loop->even 偶数回目の繰り返しか
$loop->odd 奇数回目の繰り返しか
$loop->depth 現在のループのネストレベル
$loop->parent ループがネストしている場合、親のループ変数

コメント
php
{{-- このコメントはレンダー後のHTMLには現れない --}}

PHP
php
@php
//
@endphp

サブビュー
php
@include('shared.errors', ['some' => 'data'])
@includeIf('view.name', ['some' => 'data'])
@includeWhen($boolean, 'view.name', ['some' => 'data'])
@includeUnless($boolean, 'view.name', ['some' => 'data'])
@includeFirst(['custom.admin', 'admin'], ['some' => 'data'])

コレクションのレンダービュー
php
@each('view.name', $jobs, 'job', 'view.empty')

スタック
php
@push('scripts')
<script src="/example.js"></script>
@endpush

サービス注入
```php
@inject('metrics', 'App\Services\MetricsService')

Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
# スカフォールド
```bash
composer require laravel/ui
artisan ui bootstrap
artisan ui vue
artisan ui react

artisan ui bootstrap --auth
artisan ui vue --auth
artisan ui react -- auth

アセットのコンパイル(Laravel Mix)

npm install
npm run dev
npm run production
npm run watch
npm run watch-poll
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .version()

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');
mix.copyDirectory('resources/img', 'public/img');
<script src="{{ mix('/js/app.js') }}"></script>
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
hiroita
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away