Laravel 8.x JavaScriptとCSSスカフォールド

イントロダクションIntroduction

LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapやReact、Vueを提供しています。これらのフロントエンドパッケージをインストールするため、LaravelはNPMを使用しています。While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap[https://getbootstrap.com/], React[https://reactjs.org/], and / or Vue[https://vuejs.org/] that will be helpful for many applications. By default, Laravel uses NPM[https://www.npmjs.org] to install both of these frontend packages.

Laravelが提供するBootstrapとVueのスカフォールドは、Composerを使いインストールするlaravel/uiパッケージに用意してあります。The Bootstrap and Vue scaffolding provided by Laravel is located in the laravel/ui Composer package, which may be installed using Composer:

composer require laravel/ui

laravel/uiパッケージをインストールできたら、ui Artisanコマンドを使いフロントエンドのスカフォールドをインストールします。Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command:

// 基本的なスカフォールドを生成
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

CSSCSS

CSSをもっと楽しく取り扱うために役立つ、変数やmixinなどのパワフルな機能を通常のCSSへ付け加え、SASSとLESSをコンパイルするため、Laravel Mixはクリーンで表現的なAPIを提供しています。このドキュメントでは、CSSコンパイル全般について簡単に説明します。SASSとLESSのコンパイルに関する情報は、Laravel Mix documentationで確認してください。Laravel Mix[/docs/{{version}}/mix] provides a clean, expressive API over compiling SASS or Less, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable. In this document, we will briefly discuss CSS compilation in general; however, you should consult the full Laravel Mix documentation[/docs/{{version}}/mix] for more information on compiling SASS or Less.

JavaScriptJavaScript

アプリケーションを構築するために、特定のJavaScriptフレームワークやライブラリの使用をLaravelは求めていません。しかし、Vueライブラリを使用した近代的なJavaScriptを書き始めやすくできるように、基本的なスカフォールドを用意しています。Vueはコンポーネントを使った堅牢なJavaScriptアプリケーションを構築するために、記述的なAPIを提供しています。CSSに関しては、Laravel Mixを使用し、JavaScriptコンポーネントをブラウザでそのまま使用できる１ファイルへ、簡単に圧縮できます。Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using the Vue[https://vuejs.org] library. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Laravel Mix to easily compile JavaScript components into a single, browser-ready JavaScript file.

CSSの出力Writing CSS

laravel/ui Composerパッケージをインストールし、フロントエンドスカフォールドを生成すると、Laravelのpackage.jsonファイルにbootstrapパッケージが追加されます。これはBootstrapを使用したアプリケーションフロントエンドのプロトタイピングを開始する手助けになるからです。しかしながら、アプリケーションの必要に応じて、package.jsonへの追加や削除は自由に行ってください。Bootstrapを選んでいる人には良いスタートポイントを提供しますが、Laravelアプリケーションを構築するために必須ではありません。After installing the laravel/ui Composer package and generating the frontend scaffolding[#introduction], Laravel's package.json file will include the bootstrap package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from the package.json file as needed for your own application. You are not required to use the Bootstrap framework to build your Laravel application - it is provided as a good starting point for those who choose to use it.

CSSのコンパイルを始める前に、プロジェクトのフロントエンド開発に必要な依存パッケージである、Nodeプロジェクトマネージャー(NPM)を使用し、インストールしてください。Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM)[https://www.npmjs.org]:

npm install

npm installを使い、依存パッケージをインストールし終えたら、Laravel Mixを使用して、SASSファイルを通常のCSSへコンパイルできます。npm run devコマンドはwebpack.mix.jsファイル中の指示を処理します。通常、コンパイル済みCSSはpublic/cssディレクトリへ設置されます。Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix[/docs/{{version}}/mix#working-with-stylesheets]. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:

npm run dev

Laravelのフロントエンドスカフォールドを含んでいるwebpack.mix.jsファイルは、resources/sass/app.scss SASSファイルをコンパイルします。このapp.scssファイルはSASS変数をインポートし、大抵のアプリケーションでよりスタートポイントとなるBootstrapをロードします。お好みに合わせ、もしくはまったく異なったプリプロセッサを使うならば、Laravel Mixの設定に従い自由にapp.scssファイルをカスタマイズしてください。The webpack.mix.js file included with Laravel's frontend scaffolding will compile the resources/sass/app.scss SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix[/docs/{{version}}/mix].

JavaScriptの出力Writing JavaScript

アプリケーションで要求されている、JavaScriptの全依存パッケージは、プロジェクトルートディレクトリにあるpackage.jsonファイルで見つかります。このファイルはcomposer.jsonファイルと似ていますが、PHPの依存パッケージの代わりにJavaScriptの依存が指定されている点が異なります。依存パッケージは、Node package manager (NPM)を利用し、インストールできます。All of the JavaScript dependencies required by your application can be found in the package.json file in the project's root directory. This file is similar to a composer.json file except it specifies JavaScript dependencies instead of PHP dependencies. You can install these dependencies using the Node package manager (NPM)[https://www.npmjs.org]:

npm install

lightbulb">Tip!! デフォルトでpackage.jsonファイルは、JavaScriptアプリケーションを構築する良い開始点を手助けするlodashやaxiosのようなわずかなパッケージを含んでいるだけです。アプリケーションの必要に応じ、自由にpackage.jsonに追加や削除を行ってください。{tip} By default, the Laravel package.json file includes a few packages such as lodash and axios to help you get started building your JavaScript application. Feel free to add or remove from the package.json file as needed for your own application.

webpack.mix.js file:パッケージをインストールしたら、npm run devコマンドでアセットをコンパイルできます。webpackは、モダンなJavaScriptアプリケーションのための、モジュールビルダです。npm run devコマンドを実行すると、webpackはwebpack.mix.jsファイル中の指示を実行します。Once the packages are installed, you can use the npm run dev command to compile your assets[/docs/{{version}}/mix]. Webpack is a module bundler for modern JavaScript applications. When you run the npm run dev command, Webpack will execute the instructions in your webpack.mix.js file:

npm run dev

デフォルトでLaravelのwebpack.mix.jsファイルは、SASSとresources/js/app.jsファイルをコンパイルするように指示しています。app.jsファイルの中で、Vueコンポーネントを登録してください。もしくは、他のフレームワークが好みであれば、自分のJavaScriptアプリケーションの設定を行えます。コンパイル済みのJavaScriptは通常、public/jsディレクトリへ出力されます。By default, the Laravel webpack.mix.js file compiles your SASS and the resources/js/app.js file. Within the app.js file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the public/js directory.

lightbulb">Tip!! app.jsファイルは、Vue、Axios、jQuery、その他のJavaScript依存パッケージを起動し、設定するresources/js/bootstrap.jsファイルをロードします。JacaScript依存パッケージを追加した場合、このファイルの中で設定してください。{tip} The app.js file will load the resources/js/bootstrap.js file which bootstraps and configures Vue, Axios, jQuery, and all other JavaScript dependencies. If you have additional JavaScript dependencies to configure, you may do so in this file.

Vueコンポーネントの出力Writing Vue Components

フロントエンドのスカフォールドにlaravel/uiパッケージを利用するとき、resources/js/componentsディレクトリの中にExampleComponent.vue Vueコンポーネントが設置されます。ExampleComponent.vueファイルはJavaScriptとHTMLテンプレートを同じファイルで定義する、シングルファイルVueコンポーネントのサンプルです。シングルファイルコンポーネントはJavaScriptで駆動するアプリケーションを構築するための便利なアプローチを提供しています。このサンプルコンポーネントはapp.jsファイルで登録されています。When using the laravel/ui package to scaffold your frontend, an ExampleComponent.vue Vue component will be placed in the resources/js/components directory. The ExampleComponent.vue file is an example of a single file Vue component[https://vuejs.org/guide/single-file-components] which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your app.js file:

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

コンポーネントをアプリケーションで使用するには、HTMLテンプレートの中へ埋め込みます。たとえば、アプリケーションの認証と登録スクリーンをスカフォールドするために、php artisan ui vue --auth Artisanコマンドを実行下後に、home.blade.php Bladeテンプレートへ埋め込みます。To use the component in your application, you may drop it into one of your HTML templates. For example, after running the php artisan ui vue --auth Artisan command to scaffold your application's authentication and registration screens, you could drop the component into the home.blade.php Blade template:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

lightbulb">Tip!! Vueコンポーネントを変更したら、毎回npm run devコマンドを実行しなくてはならないことを覚えておきましょう。もしくは、npm run watchコマンドを実行して監視すれば、コンポーネントが更新されるたび、自動的に再コンパイルされます。{tip} Remember, you should run the npm run dev command each time you change a Vue component. Or, you may run the npm run watch command to monitor and automatically recompile your components each time they are modified.

Vueコンポーネントの記述を学ぶことに興味があれば、Vueフレームワーク全体についての概念を簡単に読み取れる、Vueドキュメントを一読してください。If you are interested in learning more about writing Vue components, you should read the Vue documentation[https://vuejs.org/guide/], which provides a thorough, easy-to-read overview of the entire Vue framework.

Reactの使用Using React

JavaScriptアプリケーションでReactを使用するほうが好みであれば、VueスカフォールドをReactスカフォールドへ簡単に切り替えられます。If you prefer to use React to build your JavaScript application, Laravel makes it a cinch to swap the Vue scaffolding with React scaffolding:

composer require laravel/ui

// 基本的なスカフォールドを生成
php artisan ui react

// ログイン／ユーザー登録スカフォールドを生成
php artisan ui react --auth

プリセットの追加Adding Presets

独自メソッドをUiCommandへ追加できるように、プリセットは「マクロ可能(macroable)」になっています。たとえば以下の例では、UiCommandへnextjsメソッドのコードを追加しています。通常、プリセットマクロはサービスプロバイダで定義します。Presets are "macroable", which allows you to add additional methods to the UiCommand class at runtime. For example, the following code adds a nextjs method to the UiCommand class. Typically, you should declare preset macros in a service provider[/docs/{{version}}/providers]:

use Laravel\Ui\UiCommand;

UiCommand::macro('nextjs', function (UiCommand $command) {
    // 独自フロントエンドのスカフォールド…
});

次に、uiコマンドで新しいプリセットを呼び出します。Then, you may call the new preset via the ui command:

php artisan ui nextjs