📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| (同じ利用者による、間の3版が非表示) | |||
| 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> | |||
== デバッグ == | |||
==== Laravel Debugbar / Xdebug ==== | |||
Laravel DebugbarとXdebugは異なる用途で使われており、両方とも有用なツールである。<br> | |||
<br> | |||
* Laravel Debugbarの特徴 | |||
*: ブラウザ上でリアルタイムに情報を表示する。 | |||
*: クエリの実行時間、メモリ使用量、リクエスト情報等を可視化する。 | |||
*: ルート情報、セッション変数の確認が容易になる。 | |||
*: 導入が簡単 (composerコマンドでインストール可能) | |||
*: 本番環境では自動的に無効化される。 | |||
<br> | |||
* Xdebugの特徴 | |||
*: コードのステップ実行が可能。 | |||
*: 変数の中身を詳細に確認できる。 | |||
*: ブレークポイントを設定して特定の箇所で処理を止められる。 | |||
*: PHPStorm等のIDEと連携して使用できる。 | |||
*: より深いレベルのデバッグが可能。 | |||
<br> | |||
推奨される使用方法を以下に示す。<br> | |||
* 日常的な開発時の監視 : Laravel Debugbar | |||
* 複雑なバグの追跡や詳細な解析時 : Xdebug | |||
<br> | |||
Laravel DebugbarとXdebugの両方を導入することを推奨する。<br> | |||
# Laravel Debugbarのインストール | |||
composer require barryvdh/laravel-debugbar --dev | |||
# Xdebugのインストール (PHPの拡張機能として) | |||
[[インストール - Xdebug]]のページを参照すること | |||
<br> | |||
Laravel Debugbarは開発の効率を上げる便利なツールで、Xdebugは複雑な問題を解決するための強力なツールである。<br> | |||
用途に応じて使い分けることにより、より効果的なデバッグが可能になる。<br> | |||
<br> | |||
==== Laravel Debugbarの設定 ==== | |||
Laravel Debugbarは基本的に最小限の設定で動作するが、いくつかの推奨される設定手順がある。<br> | |||
<br> | |||
Laravel Debugbarをインストールした後、開発環境では自動的に有効になる。<br> | |||
.envファイルの<code>APP_DEBUG</code>の値が<code>true</code>の場合のみ、Debugbarが表示される。<br> | |||
<br> | |||
以下に示すコマンドを実行することにより、config/debugbar.phpファイルが作成して、設定をカスタマイズすることができる。<br> | |||
php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider" | |||
* Debugbarの有効 / 無効の切り替え | |||
* 表示する情報の選択 | |||
* キャプチャするクエリの数 | |||
* 特定のURLでの無効化 | |||
<br> | |||
推奨される基本設定を以下に示す。<br> | |||
# .envファイル | |||
# 開発環境 | |||
APP_DEBUG=true | |||
DEBUGBAR_ENABLED=true | |||
# 本番環境 | |||
APP_DEBUG=false | |||
DEBUGBAR_ENABLED=false | |||
<br> | |||
<u>※注意</u><br> | |||
<u>センシティブな情報が表示される可能性があるため、本番環境では必ず無効にする。</u><br> | |||
<br> | |||
.envファイルを設定した後、キャッシュを削除することが推奨される。<br> | |||
これは、Laravelは設定をキャッシュすることがあるため、.envファイルの変更が即時に反映されない場合がある。<br> | |||
そのため、config:clearコマンドを実行することにより、設定のキャッシュを削除して新しい設定が確実に反映されるようにする。<br> | |||
# キャッシュを削除する場合 | |||
php artisan config:clear | |||
# キャッシュを完全に削除する場合 | |||
php artisan cache:clear | |||
<br> | |||
その後、Webブラウザをリロードすることにより、画面下部にDebugbarが表示される。<br> | |||
<br><br> | |||
== 推奨される設定 == | |||
==== キャッシュの設定 ==== | |||
php artisan config:cache | |||
php artisan route:cache | |||
php artisan view:cache | |||
<br> | |||
==== コンポーザの最適化 ==== | |||
composer dump-autoload -o | |||
<br> | |||
==== 開発環境でのデバッグツールのインストール ==== | |||
composer require barryvdh/laravel-debugbar --dev | |||
<br><br> | |||
== セキュリティ設定 == | |||
以下に示す設定が完了した後、開発サーバを再起動する。<br> | |||
php artisan serve | |||
<br> | |||
==== CSRFトークンの有効化 (デフォルトで有効) ==== | |||
==== .envファイルのアクセス制限 ==== | |||
==== セッション設定の確認 (config/session.php) ==== | |||
==== ファイルパーミッションの適切な設定 ==== | |||
chmod -R 755 storage bootstrap/cache | |||
<br><br> | |||
== 追加パッケージの導入 == | |||
必要に応じて、以下に示すような追加パッケージを導入することを検討する。<br> | |||
<br> | |||
* Laravel Breeze/Jetstream (認証) | |||
* Laravel Sanctum (API認証) | |||
* Laravel Socialite (ソーシャルログイン) | |||
* Spatie/Laravel-permission (権限管理) | |||
<br><br> | <br><br> | ||