Laravel に JavaScript を含める方法すべてのシナリオのためのステップバイステップガイド-PHPチュートリアル-php.cn

How to Include JavaScript in Laravel A Step-by-Step Guide for All Scenarios

Laravel 11 に JavaScript を含める方法: すべてのシナリオのためのステップバイステップガイド

Laravel 11 では、デフォルトのアセットバンドラーである Vite のおかげで、JavaScript をプロジェクトに簡単に追加できます。ここでは、グローバルな包含から特定のビューでの条件付き読み込みまで、あらゆる種類のシナリオに合わせて JavaScript を設定する方法を説明します。

1. すべてのファイルに JavaScript を含める

多くの場合、Laravel アプリケーション全体に JavaScript をグローバルに含めることができます。ここでは、ユニバーサルインクルージョンのために JavaScript を整理してバンドルする方法を説明します。

ステップ 1: JavaScript ファイルを配置する

場所: JavaScript ファイルを resource/js ディレクトリに保存します。たとえば、ファイルの名前がcustom.jsの場合は、resources/js/custom.js.
整理: 複数の JavaScript ファイルを含む複雑なプロジェクトの場合、resources/js/modules/custom.js など、resources/js のサブディレクトリ内でファイルを整理できます。

ステップ 2: Vite で JavaScript をコンパイルする

Laravel 11 はアセットの管理に Vite を使用します。 JavaScript をバンドルするように設定するには:

app.js に含める: resource/js/app.js を開き、カスタムファイルをインポートします。

   import './custom.js';

ログイン後にコピー

ビューでの直接インポート: 特定のビューでのみ JavaScript が必要な場合は、Blade テンプレートで @vite ディレクティブを使用することもできます。

   @vite('resources/js/custom.js')

ログイン後にコピー

ステップ 3: vite.config.js を構成する

@vite インポートを正しく処理するように vite.config.js が設定されていることを確認してください。デフォルトでは、次のようになります:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

ログイン後にコピー

ステップ 4: Vite を実行する

Vite でアセットをコンパイルするには:

開発の場合: npm run dev を実行します。
本番環境の場合: npm run build を実行します。

ステップ 5: ブレードテンプレートに JavaScript をロードする

テンプレートに JavaScript ファイルを含めるには、@vite ディレクティブを使用します。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
</head>
<body>
    <!-- Content here -->
</body>
</html>

ログイン後にコピー

まとめ

JavaScript ファイルを resource/js に保存します。
app.js に インポート してグローバルに含めるか、必要に応じて Blade テンプレートに直接組み込みます。
Vite を使用してアセットをコンパイルします。
Blade テンプレートで @vite を使用して JavaScript をロードします。

この設定により、Laravel 11 プロジェクトのサイト全体で JavaScript が使用できるようになります。

2. ブレードのレンダリング順序を理解する

特定のビューに条件付きで JavaScript を含める場合、Blade テンプレートがレンダリングされる順序を理解することが重要です。

Laravel では、レイアウトが最初に処理されます、続いて個々のビューと部分が続きます。レンダリングプロセスは次のとおりです:

レイアウトが最初にレンダリングされます。コンテンツ挿入用に作成されたプレースホルダー (@yield および @section) が使用されます。
次に子ビューまたは部分ビューが処理され、そのコンテンツがレイアウトプレースホルダーに挿入されます。

この順序のため、子ビューのコンテンツに基づいてレイアウトに JavaScript ファイルを条件付きで追加する場合、標準の変数チェックは機能しません。ページ固有の JavaScript をより柔軟に処理するには、Blade の @stack および @push ディレクティブを使用する必要があります。

3. スタックとプッシュを使用して特定のビューに条件付きで JavaScript を含める

特定のビューに JavaScript を追加するには、Laravel の @stack ディレクティブと @push ディレクティブが効率的なソリューションを提供し、条件付きでレイアウトにスクリプトを含めることができます。

ステップ 1: レイアウト内のスタックを定義する

レイアウトで、ページ固有のスクリプトのスタックを作成します。

   import './custom.js';

ログイン後にコピー

ステップ 2: 子ビューからスクリプトをプッシュする

JavaScript を必要とする特定の Blade ファイルで、スクリプトスタックにプッシュします。

   @vite('resources/js/custom.js')

ログイン後にコピー

この設定では、custom.js は、その特定のビューが読み込まれるときにのみ含まれます。このメソッドは、Laravel のレンダリング順序で動作するクリーンなソリューションを提供し、JavaScript ファイルが必要に応じて条件付きで確実に含まれるようにします。

@push をどこで宣言するか?

ブレードビューでの @push ステートメントの配置は、主に読みやすさと実行順序に影響します。 @push を効果的に使用する方法は次のとおりです:

ビュー内の配置: @push は Blade ビューのどこにでも配置できますが、ファイルの最後 (通常は @section コンテンツの後に) に配置することをお勧めします。これにより、スクリプト関連のコードがメインのコンテンツから分離され、可読性と保守性が向上します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

ログイン後にコピー

複数の @push ステートメントの順序: 同じスタックに複数の @push 宣言がある場合 (例: @push('scripts'))、それらはビューに表示される順序で追加されます。例えば：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
</head>
<body>
    <!-- Content here -->
</body>
</html>

ログイン後にコピー

この場合、@push が宣言された順序でコンテンツをスタックに追加するため、script1.js は script2.js よりも前にロードされます。

パーシャルおよびコンポーネントでの @push の使用: @push は、Blade パーシャル (@include など) または Blade コンポーネントでも使用できます。これは、ビュー固有のスクリプトやスタイルを再利用可能なコンポーネント内に直接組み込む場合に便利で、依存関係の管理が容易になります。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
    @stack('scripts') <!-- Define a stack for additional scripts -->
</head>
<body>
    @yield('content')
</body>
</html>

ログイン後にコピー

このパーシャルがビューに含まれる場合、partial-specified.js がレイアウトファイルのスクリプトスタックに追加されます。

@prepend による順序の制御: 特定のスクリプトを同じスタック内の他のスクリプトよりも先にロードする必要がある場合は、@push の代わりに @prepend を使用できます。 @prepend はコンテンツをスタックの先頭に配置するため、ロード順序をより細かく制御できるようになります。

   import './custom.js';

ログイン後にコピー

ここでは、Blade ファイル内の配置に関係なく、critical.js が non_critical.js よりも先に読み込まれます。

重要なポイント

わかりやすくし、保守しやすくするために、ビューの最後に @push を配置します。
順序はビュー内の配置によって決まり、以前の @push ステートメントが最初に読み込まれます。
@push はパーシャルとコンポーネントで機能します。これにより、ビュー固有の依存関係を簡単に含めることができます。
@prepend を使用します。

4. 代替案: レイアウト内でインライン条件文を使用する

JavaScript を含めるタイミングをより細かく制御する必要がある場合は、Laravel の条件ステートメントを使用して、ルートまたは変数ベースのロジックをレイアウト内で直接使用できます。

ルートに基づいて条件付きで含める

レイアウト内でルートチェックを直接使用して、現在のルートに基づいた JavaScript を含めることができます。

   @vite('resources/js/custom.js')

ログイン後にコピー

変数に基づいて条件付きで含める

変数に基づいてスクリプトを条件付きで読み込むには、コントローラーまたは子ビューでフラグを設定し、レイアウトでそれを確認します。

コントローラー内:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

ログイン後にコピー

レイアウト内:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
</head>
<body>
    <!-- Content here -->
</body>
</html>

ログイン後にコピー

このアプローチにより、特定の変数またはルートに基づいて JavaScript の読み込みを制御でき、カスタムページ設定に柔軟性が提供されます。

まとめ

ここで説明する方法の簡単な概要を示します:

グローバルインクルージョン: JavaScript を app.js に配置し、@vite を使用してグローバルにインクルードします。
スタックとプッシュによる条件付き包含: @stack ディレクティブと @push ディレクティブを使用して、柔軟なモジュール式スクリプト処理を実現します。これにより、スクリプトが必要なビューにのみロードされるようになります。
レイアウト内の条件文: ルートベースのチェックまたはコントローラー変数を使用して、JavaScript を条件付きでレイアウトに直接読み込みます。

これらのオプションを使用すると、JavaScript の読み込みを正確に制御できるため、Laravel 11 プロジェクトが効率的かつ保守可能になります。

以上がLaravel に JavaScript を含める方法すべてのシナリオのためのステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。