Laravel 9.x ビュー

イントロダクション

もちろん、ルートやコントローラから直接HTML文書全体の文字列を返すのは現実的ではありません。ありがたいことに、ビューがすべてのHTMLを別々のファイルに格納する便利な方法を提供します。

ビューは、コントローラ/アプリケーションロジックをプレゼンテーションロジックから分離し、resources/viewsディレクトリに格納されます。Laravelを使用する場合、ビューテンプレートは通常、Bladeテンプレート言語で記述します。単純なビューは以下のようになります。

<!-- View stored in resources/views/greeting.blade.php -->

<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

このビューをresources/views/greeting.blade.phpとして保存し、以下のようにグローバルviewヘルパ関数を使用し結果を返します。

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

Note: Bladeテンプレートの作成方法の詳細をお探しですか?最初に完全なBladeドキュメントを確認してください。

React/Vueでのビュー記述

フロントエンドのテンプレートをBladeを使ってPHPで書く代わりに、多くの開発者はReactやVueを使ってテンプレートを書くことを好むようになりました。Laravelでは、Inertiaというライブラリのおかげで、React / VueのフロントエンドをLaravelのバックエンドに簡単に結びつけることができ、典型的なSPAの構築のように複雑なことは必要ありません。

BreezeとJetstreamのスターターキットは、Inertiaを利用する次のLaravelアプリケーションのための素晴らしい開始点を提供します。また、Laravel Bootcampは、VueとReactの例を含め、Inertiaを利用したLaravelアプリケーションの構築の完全なデモンストレーションを提供しています。

ビューの作成とレンダ

アプリケーションのresources/viewsディレクトリに.blade.php拡張子の付いたファイルを配置することで、ビューを作成できます。.blade.php拡張子は、ファイルにBladeテンプレートが含まれていることをフレームワークに通知します。BladeテンプレートはHTML、値を簡単にエコーしたり、"if"文を作成したり、データを反復処理したりできるBladeディレクティブを含みます。

ビューを作成したら、グローバルなviewヘルパを使用して、アプリケーションのルートまたはコントローラからビューを返すことができます。

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

ビューは、Viewファサードを使用して返すこともできます。

use Illuminate\Support\Facades\View;

return View::make('greeting', ['name' => 'James']);

ご覧のとおり、viewヘルパに渡たす最初の引数は、resources/viewsディレクトリ内のビューファイルの名前に対応しています。2番目の引数は、ビューで使用するデータの配列です。この場合、Blade構文を使用してビューに表示する、name変数を渡しています。

ネストしたビューディレクトリ

ビューは、resources/viewsディレクトリのサブディレクトリ内にネストすることもできます。「ドット」表記は、ネストしたビューを参照するために使用できます。たとえば、ビューがresources/views/admin/profile.blade.phpに保存されている場合、以下のようにアプリケーションのルート/コントローラからビューを返すことができます。

return view('admin.profile', $data);

Warning!! ビューのディレクトリ名には、.文字を含めてはいけません。

最初に利用可能なビュー

Viewファサードのfirstメソッドを使用して、指定したビューの配列に存在する最初のビューを生成できます。これは、アプリケーションまたはパッケージでビューのカスタマイズまたは上書きが許可されている場合に役立つでしょう。

use Illuminate\Support\Facades\View;

return View::first(['custom.admin', 'admin'], $data);

ビューの存在の判定

ビューが存在しているかを判定する必要があれば、Viewファサードを使います。ビューが存在していれば、existsメソッドはtrueを返します。

use Illuminate\Support\Facades\View;

if (View::exists('emails.customer')) {
    //
}

ビューにデータを渡す

前例で見たように、データの配列をビューに渡し、そのデータをビューで使用できます。

return view('greetings', ['name' => 'Victoria']);

この方法で情報を渡す場合、データはキー/値ペアの配列です。ビューにデータを渡した後、<?php echo $name; ?>などのデータキーを使用して、ビュー内の各値にアクセスします。

データの完全な配列をviewヘルパ関数に渡す代わりに、withメソッドを使用して個々のデータをビューへ追加することもできます。withメソッドはビューオブジェクトのインスタンスを返すため、ビューを返す前にメソッドのチェーンを続けられます。

return view('greeting')
            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

すべてのビューでデータを共有

時に、アプリケーションがレンダするすべてのビューとデータを共有する必要が起きます。これは、Viewファサードのshareメソッドで可能です。通常、サービスプロバイダのbootメソッド内でshareメソッドを呼び出す必要があります。それらをApp\Providers\AppServiceProviderクラスへ追加するか、それらを収容するための別のサービスプロバイダを生成することもできます。

<?php

namespace App\Providers;

use Illuminate\Support\Facades\View;

class AppServiceProvider extends ServiceProvider
{
    /**
     * 全アプリケーションサービスの登録
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * 全アプリケーションサービスの初期起動
     *
     * @return void
     */
    public function boot()
    {
        View::share('key', 'value');
    }
}

ビューコンポーザ

ビューコンポーザは、ビューをレンダするときに呼び出すコールバックまたはクラスメソッドです。ビューをレンダするたびにビューへ結合するデータがある場合、ビューコンポーザを使用すると、そのロジックを1つの場所に集約できます。ビューコンポーザは、アプリケーション内の複数のルートかコントローラが同じビューを返し、常に特定のデータが必要な場合にきわめて役立ちます。

通常、ビューコンポーザーは、アプリケーションのサービスプロバイダのいずれかで登録します。この例では、このロジックを格納するために新しいApp\Providers\ViewServiceProviderを作成したと想定しましょう。

Viewファサードのcomposerメソッドを使用して、ビューコンポーザを登録します。Laravelには、クラスベースのビューコンポーザーのデフォルトディレクトリが含まれていないため、自由に整理できます。たとえば、app/View/Composersディレクトリを作成して、アプリケーションのすべてのビューコンポーザを保存できます。

<?php

namespace App\Providers;

use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;

class ViewServiceProvider extends ServiceProvider
{
    /**
     * 全アプリケーションサービスの登録
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * 全アプリケーションサービスの初期起動
     *
     * @return void
     */
    public function boot()
    {
        // クラスベースのコンポーザを使用する
        View::composer('profile', ProfileComposer::class);

        // クロージャベースのコンポーザを使用
        View::composer('dashboard', function ($view) {
            //
        });
    }
}

Warning!! 新しいサービスプロバイダをビューコンポーザ登録のために作成した場合は、config/app.php設定ファイルのproviders配列へ追加する必要があるのを忘れないでください。

コンポーザを登録したので、profileビューがレンダされるたびにApp\View\Composers\ProfileComposerクラスのcomposeメソッドが実行されます。コンポーザクラスの例を見てみましょう。

<?php

namespace App\View\Composers;

use App\Repositories\UserRepository;
use Illuminate\View\View;

class ProfileComposer
{
    /**
     * userリポジトリの実装
     *
     * @var UserRepository
     */
    protected $users;

    /**
     * 新しいプロフィールコンポーザの生成
     *
     * @param  \App\Repositories\UserRepository  $users
     * @return void
     */
    public function __construct(UserRepository $users)
    {
        $this->users = $users;
    }

    /**
     * データをビューと結合
     *
     * @param  \Illuminate\View\View  $view
     * @return void
     */
    public function compose(View $view)
    {
        $view->with('count', $this->users->count());
    }
}

ご覧のとおり、すべてのビューコンポーザはサービスコンテナを介して依存解決されるため、コンポーザのコンストラクタ内で必要な依存関係を依存注入できます。

複数ビューへの適用

複数のビューにビューコンポーザを適用するには、composerメソッドの最初の引数にビューの配列を渡してください。

use App\Views\Composers\MultiComposer;

View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

全ビューコンポーザに適用するため、composerメソッドは*をワイルドカードとして使用できます。

View::composer('*', function ($view) {
    //
});

ビュークリエータ

ビューの「クリエータ」は、ビューコンポーザと非常によく似ています。ただし、ビューがレンダリングされるまで待つのではなく、ビューがインスタンス化された直後に実行されます。ビュークリエータを登録するには、creatorメソッドを使用します。

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;

View::creator('profile', ProfileCreator::class);

ビューの最適化

Bladeテンプレートビューはデフォルトでは、オンデマンドでコンパイルされます。ビューをレンダするリクエストが実行されると、Laravelはコンパイル済みバージョンのビューが存在するかどうかを判断します。ファイルが存在する場合、Laravelはコンパイルされていないビューがコンパイル済みビューよりも最近変更されたかどうかを判断します。コンパイル済みビューが存在しないか、コンパイルされていないビューが変更されている場合、Laravelはビューをコンパイルします。

リクエスト中にビューをコンパイルすると、パフォーマンスにわずかな悪影響が及ぶ可能性があるため、Laravelは、アプリケーションで使用するすべてのビューをプリコンパイルするためにview:cache Artisanコマンドを提供しています。パフォーマンスを向上させるために、デプロイプロセスの一部として次のコマンドを実行することを推奨します。

php artisan view:cache

ビューキャッシュを消去するには、view:clearコマンドを使います。

php artisan view:clear

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる