イントロダクション
LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapやReact、Vueを提供しています。これらのフロントエンドパッケージをインストールするため、LaravelはNPMを使用しています。
Laravelが提供するBootstrapとVueのスカフォールドは、Composerを使いインストールするlaravel/ui
パッケージに用意してあります。
composer require laravel/ui
laravel/ui
パッケージをインストールできたら、ui
Artisanコマンドを使いフロントエンドのスカフォールドをインストールします。
// 基本的なスカフォールドを生成
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// ログイン/ユーザー登録スカフォールドを生成
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
CSS
CSSをもっと楽しく取り扱うために役立つ、変数やmixinなどのパワフルな機能を通常のCSSへ付け加え、SASSとLESSをコンパイルするため、Laravel Mixはクリーンで表現的なAPIを提供しています。このドキュメントでは、CSSコンパイル全般について簡単に説明します。SASSとLESSのコンパイルに関する情報は、Laravel Mix documentationで確認してください。
JavaScript
アプリケーションを構築するために、特定のJavaScriptフレームワークやライブラリの使用をLaravelは求めていません。しかし、Vueライブラリを使用した近代的なJavaScriptを書き始めやすくできるように、基本的なスカフォールドを用意しています。Vueはコンポーネントを使った堅牢なJavaScriptアプリケーションを構築するために、記述的なAPIを提供しています。CSSに関しては、Laravel Mixを使用し、JavaScriptコンポーネントをブラウザでそのまま使用できる1ファイルへ、簡単に圧縮できます。
CSSの出力
laravel/ui
Composerパッケージをインストールし、フロントエンドスカフォールドを生成すると、Laravelのpackage.json
ファイルにbootstrap
パッケージが追加されます。これはBootstrapを使用したアプリケーションフロントエンドのプロトタイピングを開始する手助けになるからです。しかしながら、アプリケーションの必要に応じて、package.json
への追加や削除は自由に行ってください。Bootstrapを選んでいる人には良いスタートポイントを提供しますが、Laravelアプリケーションを構築するために必須ではありません。
CSSのコンパイルを始める前に、プロジェクトのフロントエンド開発に必要な依存パッケージである、Nodeプロジェクトマネージャー(NPM)を使用し、インストールしてください。
npm install
npm install
を使い、依存パッケージをインストールし終えたら、Laravel
Mixを使用して、SASSファイルを通常のCSSへコンパイルできます。npm run dev
コマンドはwebpack.mix.js
ファイル中の指示を処理します。通常、コンパイル済みCSSはpublic/css
ディレクトリへ設置されます。
npm run dev
Laravelのフロントエンドスカフォールドを含んでいるwebpack.mix.js
ファイルは、resources/sass/app.scss
SASSファイルをコンパイルします。このapp.scss
ファイルはSASS変数をインポートし、大抵のアプリケーションでよりスタートポイントとなるBootstrapをロードします。お好みに合わせ、もしくはまったく異なったプリプロセッサを使うならば、Laravel
Mixの設定に従い自由にapp.scss
ファイルをカスタマイズしてください。
JavaScriptの出力
アプリケーションで要求されている、JavaScriptの全依存パッケージは、プロジェクトルートディレクトリにあるpackage.json
ファイルで見つかります。このファイルはcomposer.json
ファイルと似ていますが、PHPの依存パッケージの代わりにJavaScriptの依存が指定されている点が異なります。依存パッケージは、Node package manager
(NPM)を利用し、インストールできます。
npm install
Tip!! デフォルトで
package.json
ファイルは、JavaScriptアプリケーションを構築する良い開始点を手助けするlodash
やaxios
のようなわずかなパッケージを含んでいるだけです。アプリケーションの必要に応じ、自由にpackage.json
に追加や削除を行ってください。
webpack.mix.js
file:パッケージをインストールしたら、npm run dev
コマンドでアセットをコンパイルできます。webpackは、モダンなJavaScriptアプリケーションのための、モジュールビルダです。npm run dev
コマンドを実行すると、webpackはwebpack.mix.js
ファイル中の指示を実行します。
npm run dev
デフォルトでLaravelのwebpack.mix.js
ファイルは、SASSとresources/js/app.js
ファイルをコンパイルするように指示しています。app.js
ファイルの中で、Vueコンポーネントを登録してください。もしくは、他のフーレムワークが好みであれば、自分のJavaScriptアプリケーションの設定を行えます。コンパイル済みのJavaScriptは通常、public/js
ディレクトリへ出力されます。
Tip!!
app.js
ファイルは、Vue、Axios、jQuery、その他のJavaScript依存パッケージを起動し、設定するresources/js/bootstrap.js
ファイルをロードします。JacaScript依存パッケージを追加した場合、このファイルの中で設定してください。
Vueコンポーネントの出力
フロントエンドのスカフォールドにlaravel/ui
パッケージを利用するとき、resources/js/components
ディレクトリの中にExampleComponent.vue
Vueコンポーネントが設置されます。ExampleComponent.vue
ファイルはJavaScriptとHTMLテンプレートを同じファイルで定義する、シングルファイルVueコンポーネントのサンプルです。シングルファイルコンポーネントはJavaScriptで駆動するアプリケーションを構築するための便利なアプローチを提供しています。このサンプルコンポーネントはapp.js
ファイルで登録されています。
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default
);
コンポーネントをアプリケーションで使用するには、HTMLテンプレートの中へ埋め込みます。たとえば、アプリケーションの認証と登録スクリーンをスカフォールドするために、php artisan ui vue --auth
Artisanコマンドを実行下後に、home.blade.php
Bladeテンプレートへ埋め込みます。
@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsection
Tip!! Vueコンポーネントを変更したら、毎回
npm run dev
コマンドを実行しなくてはならないことを覚えておきましょう。もしくは、npm run watch
コマンドを実行して監視すれば、コンポーネントが更新されるたび、自動的に再コンパイルされます。
Vueコンポーネントの記述を学ぶことに興味があれば、Vueフレームワーク全体についての概念を簡単に読み取れる、Vueドキュメントを一読してください。
Reactの使用
JavaScriptアプリケーションでReactを使用するほうが好みであれば、VueスカフォールドをReactスカフォールドへ簡単に切り替えられます。
composer require laravel/ui
// 基本的なスカフォールドを生成
php artisan ui react
// ログイン/ユーザー登録スカフォールドを生成
php artisan ui react --auth
プリセットの追加
独自メソッドをUiCommand
へ追加できるように、プリセットは「マクロ可能(macroable)」になっています。たとえば以下の例では、UiCommand
へnextjs
メソッドのコードを追加しています。通常、プリセットマクロはサービスプロバイダで定義します。
use Laravel\Ui\UiCommand;
UiCommand::macro('nextjs', function (UiCommand $command) {
// 独自フロントエンドのスカフォールド…
});
次に、ui
コマンドで新しいプリセットを呼び出します。
php artisan ui nextjs