Laravel に JavaScript を含める方法 すべてのシナリオのためのステップバイステップガイド
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 を app.js に配置し、@vite を使用してグローバルにインクルードします。
- スタックとプッシュによる条件付き包含: @stack ディレクティブと @push ディレクティブを使用して、柔軟なモジュール式スクリプト処理を実現します。これにより、スクリプトが必要なビューにのみロードされるようになります。
- レイアウト内の条件文: ルートベースのチェックまたはコントローラー変数を使用して、JavaScript を条件付きでレイアウトに直接読み込みます。
以上がLaravel に JavaScript を含める方法 すべてのシナリオのためのステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1667
14
1426
52
1328
25
1273
29
1255
24
PHPでの安全なパスワードハッシュ（例：Password_hash、password_verify）を説明します。 MD5またはSHA1を使用してみませんか？
Apr 17, 2025 am 12:06 AM
PHPでは、Password_hashとpassword_verify関数を使用して安全なパスワードハッシュを実装する必要があり、MD5またはSHA1を使用しないでください。 1）password_hashセキュリティを強化するために、塩値を含むハッシュを生成します。 2）password_verifyハッシュ値を比較して、パスワードを確認し、セキュリティを確保します。 3）MD5とSHA1は脆弱であり、塩の値が不足しており、最新のパスワードセキュリティには適していません。
PHP：Web開発の重要な言語
Apr 13, 2025 am 12:08 AM
PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting（）やvar_dump（）などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7
PHPとPython：2つの一般的なプログラミング言語を比較します
Apr 14, 2025 am 12:13 AM
PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。
アクション中のPHP：実際の例とアプリケーション
Apr 14, 2025 am 12:19 AM
PHPは、電子商取引、コンテンツ管理システム、API開発で広く使用されています。 1）eコマース：ショッピングカート機能と支払い処理に使用。 2）コンテンツ管理システム：動的コンテンツの生成とユーザー管理に使用されます。 3）API開発：RESTFUL API開発とAPIセキュリティに使用されます。パフォーマンスの最適化とベストプラクティスを通じて、PHPアプリケーションの効率と保守性が向上します。
スカラータイプ、リターンタイプ、ユニオンタイプ、ヌル可能なタイプなど、PHPタイプのヒントはどのように機能しますか？
Apr 17, 2025 am 12:25 AM
PHPタイプは、コードの品質と読みやすさを向上させるためのプロンプトがあります。 1）スカラータイプのヒント：php7.0であるため、基本データ型は、int、floatなどの関数パラメーターで指定できます。 3）ユニオンタイプのプロンプト：PHP8.0であるため、関数パラメーターまたは戻り値で複数のタイプを指定することができます。 4）Nullable Typeプロンプト：null値を含めることができ、null値を返す可能性のある機能を処理できます。
PHPの永続的な関連性：それはまだ生きていますか？
Apr 14, 2025 am 12:12 AM
PHPは依然として動的であり、現代のプログラミングの分野で重要な位置を占めています。 1）PHPのシンプルさと強力なコミュニティサポートにより、Web開発で広く使用されています。 2）その柔軟性と安定性により、Webフォーム、データベース操作、ファイル処理の処理において顕著になります。 3）PHPは、初心者や経験豊富な開発者に適した、常に進化し、最適化しています。
PHP対その他の言語：比較
Apr 13, 2025 am 12:19 AM
PHPは、特に迅速な開発や動的なコンテンツの処理に適していますが、データサイエンスとエンタープライズレベルのアプリケーションには良くありません。 Pythonと比較して、PHPはWeb開発においてより多くの利点がありますが、データサイエンスの分野ではPythonほど良くありません。 Javaと比較して、PHPはエンタープライズレベルのアプリケーションでより悪化しますが、Web開発により柔軟性があります。 JavaScriptと比較して、PHPはバックエンド開発により簡潔ですが、フロントエンド開発のJavaScriptほど良くありません。
PHPおよびPython：さまざまなパラダイムが説明されています
Apr 18, 2025 am 12:26 AM
PHPは主に手順プログラミングですが、オブジェクト指向プログラミング（OOP）もサポートしています。 Pythonは、OOP、機能、手続き上のプログラミングなど、さまざまなパラダイムをサポートしています。 PHPはWeb開発に適しており、Pythonはデータ分析や機械学習などのさまざまなアプリケーションに適しています。
