📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 193行目: | 193行目: | ||
* ファイルアップロード機能を実装する際 | * ファイルアップロード機能を実装する際 | ||
* 本番環境へのデプロイ時 | * 本番環境へのデプロイ時 | ||
<br><br> | |||
== アセットコンパイル == | |||
==== Laravel 9 / 10 (Viteの使用) ==== | |||
* Viteを使用して、より高速なビルドを行うことが可能である。 | |||
* HMR (Hot Module Replacement) に対応している。 | |||
* vite.config.jsファイルで設定する。 | |||
* ブレードテンプレートでの読み込み方が変更できる。 | |||
<br> | |||
また、Laravel 9 / 10でもLaravel Mixを使用することは可能である。<br> | |||
<br> | |||
# package.jsonの依存関係インストール | |||
npm install | |||
# 開発サーバ起動 | |||
npm run dev | |||
# 本番環境向けビルド | |||
npm run build | |||
<br> | |||
<syntaxhighlight lang="js"> | |||
/* 設定ファイル: vite.config.js の例 */ | |||
import { defineConfig } from 'vite'; | |||
import laravel from 'laravel-vite-plugin'; | |||
export default defineConfig({ | |||
plugins: [ | |||
laravel({ | |||
input: ['resources/css/app.css', 'resources/js/app.js'], | |||
refresh: true, | |||
}), | |||
], | |||
}); | |||
</syntaxhighlight> | |||
<br> | |||
==== Laravel 8 (Laravel Mixの使用) ==== | |||
* Laravel Mix (Webpackのラッパ) を使用する。 | |||
* webpack.mix.jsファイルで設定する。 | |||
* <code>npm run watch</code>コマンドでファイル変更監視が可能である。 | |||
<br> | |||
# package.jsonの依存関係インストール | |||
npm install | |||
# 開発環境向けコンパイル | |||
npm run dev | |||
# 本番環境向けコンパイル (ミニファイ化) | |||
npm run prod | |||
# ファイル変更の監視 | |||
npm run watch | |||
<br> | |||
<syntaxhighlight lang="js"> | |||
/* 設定ファイル : webpack.mix.js の例 */ | |||
const mix = require('laravel-mix'); | |||
mix.js('resources/js/app.js', 'public/js') | |||
.sass('resources/sass/app.scss', 'public/css') | |||
.version(); // キャッシュバスティング | |||
</syntaxhighlight> | |||
<br> | |||
==== ブレードテンプレートでの読み込み方の違い ==== | |||
* Laravel 9 / 10 (Viteの使用) | |||
<syntaxhighlight lang="html"> | |||
<!-- CSS & JavaScript --> | |||
@vite(['resources/css/app.css', 'resources/js/app.js']) | |||
<!-- または個別に --> | |||
@vite('resources/css/app.css') | |||
@vite('resources/js/app.js') | |||
</syntaxhighlight> | |||
<br> | |||
* Laravel 8 (Laravel Mixの使用) | |||
<syntaxhighlight lang="html"> | |||
<!-- CSS --> | |||
<link href="{{ mix('css/app.css') }}" rel="stylesheet"> | |||
<!-- JavaScript --> | |||
<script src="{{ mix('js/app.js') }}"></script> | |||
</syntaxhighlight> | |||
<br> | |||
Viteへの移行は比較的簡単で、公式ドキュメントにガイドがある。<br> | |||
Laravel 9 / 10では、開発時のビルド速度が大幅に改善されており、Laravel 10では、Viteの設定がより柔軟になっている。<br> | |||
<br><br> | <br><br> | ||