13,000
回編集
「Laravel - Laravelの構造」の版間の差分
ナビゲーションに移動
検索に移動
→resourcesディレクトリ
| 211行目: | 211行目: | ||
== resourcesディレクトリ == | == resourcesディレクトリ == | ||
==== | ==== resources/cssディレクトリ ==== | ||
このディレクトリは、アプリケーションで使用するCSSファイルを格納する場所である。<br> | |||
コンパイル前のソースファイルを配置する場所という位置付けである。<br> | |||
<br> | |||
初期状態では、app.cssファイルのみが配置されている。<br> | |||
<br> | |||
また、SASSやLESS等のプリプロセッサのソースファイルもここに配置できる。<br> | |||
<br> | |||
# ディレクトリ構造の例 | |||
resources/ | |||
└── css/ | |||
├── app.css | |||
├── components/ | |||
└── pages/ | |||
<br> | |||
このディレクトリは、アプリケーションのフロントエンド開発における重要な役割を果たす。<br> | |||
必要に応じて、サブディレクトリを作成して、コードを整理することもできる。<br> | |||
<br> | |||
<u>※補足</u><br> | |||
* node_modulesのインストールが必要である。(npm install) | |||
* ホットリロード開発が可能である。(npm run watch) | |||
* SCSSやTypeScript等、必要な依存関係は別途インストールする必要がある。 | |||
* アセットのバージョニングやキャッシュバスティングも可能である。 | |||
<br> | |||
==== resources/jsディレクトリ ==== | |||
このディレクトリは、アプリケーションで使用するJavaScriptファイルを格納する場所である。<br> | |||
モジュールのインポートやコンポーネントの定義等を行う。<br> | |||
<br> | |||
VueやReact等のコンポーネントもこのディレクトリに配置する。<br> | |||
また、TypeScriptを使用する場合のソースファイルもこのディレクトリに配置する。<br> | |||
<br> | |||
初期状態では、app.jsが配置されている。<br> | |||
<br> | |||
# ディレクトリ構造の例 | |||
resources/ | |||
└── js/ | |||
├── app.js | |||
├── components/ | |||
├── pages/ | |||
└── bootstrap.js | |||
<br> | |||
<u>※補足</u><br> | |||
* node_modulesのインストールが必要である。(npm install) | |||
* ホットリロード開発が可能である。(npm run watch) | |||
* SCSSやTypeScript等、必要な依存関係は別途インストールする必要がある。 | |||
* アセットのバージョニングやキャッシュバスティングも可能である。 | |||
<br> | |||
==== コンパイルとバンドル ==== | |||
webpack.mix.jsファイル (Laravel Mix使用時)、あるいは、vite.config.jsファイル (Laravle 9以降) は、プロジェクトのルートディレクトリに自動的に配置される。<br> | |||
<br> | |||
# Laravel Mix使用時 (Laravel 8以前) | |||
# Laravel新規プロジェクト作成時に自動で生成される | |||
# 手動で作成する場合は以下のコマンドで雛形を作成できる | |||
npm install laravel-mix --save-dev | |||
# その後、webpack.mix.jsを手動で作成する | |||
# Vite使用時 (Laravel 9以降) | |||
# Laravel新規プロジェクト作成時に自動で生成される | |||
# 手動でViteを追加する場合は以下のコマンドを実行 | |||
composer require laravel/vite-plugin | |||
npm install --save-dev vite laravel-vite-plugin | |||
<br> | |||
これらの設定ファイルは、プロジェクトのアセットビルドプロセスを制御する重要なファイルであるため、バージョン管理システムにも含めることを推奨する。<br> | |||
<br> | |||
<syntaxhighlight lang="js"> | |||
// webpack.mix.jsでの設定例 | |||
// Laravel Mixを使用する場合 | |||
const mix = require('laravel-mix'); | |||
mix.js('resources/js/app.js', 'public/js') | |||
.sass('resources/css/app.scss', 'public/css') | |||
.version(); // バージョニング | |||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="js"> | |||
// vite.config.jsでの設定例 | |||
// Viteを使用する場合 (Laravel 9以降) | |||
import { defineConfig } from 'vite'; | |||
import laravel from 'laravel-vite-plugin'; | |||
import vue from '@vitejs/plugin-vue'; // Vue.jsを使用する場合 | |||
export default defineConfig({ | |||
plugins: [ | |||
laravel({ | |||
input: [ | |||
'resources/css/app.css', | |||
'resources/js/app.js', | |||
], | |||
refresh: true, | |||
}), | |||
vue(), // Vue.jsを使用する場合 | |||
], | |||
}); | |||
</syntaxhighlight> | |||
<br> | |||
# コンパイル | |||
# 開発環境 | |||
npm run dev | |||
# 本番環境 | |||
npm run prod | |||
<br> | |||
コンパイル後のファイルにおいて、CSSファイルは、public/cssディレクトリに出力される。<br> | |||
JavaScriptファイルは、public/jsディレクトリに出力される。<br> | |||
<br> | |||
==== resources/viewsディレクトリ (Bladeテンプレートファイル) ==== | |||
Bladeテンプレートファイルは、resources/viewsディレクトリに配置されている。<br> | Bladeテンプレートファイルは、resources/viewsディレクトリに配置されている。<br> | ||
<br> | <br> | ||