Laravel 5.6 JavaScriptとCSSスカフォールド

イントロダクション

LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapとVueを提供しています。これらのフロントエンドパッケージをインストールするため、LaravelはNPMを使用しています。

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コンポーネントをブラウザでそのまま使用できる１ファイルへ、簡単に圧縮できます。

フロントエンドスカフォールドの削除

アプリケーションから、フロントエンド向けにスカフォールドした結果を削除したい場合は、preset Artisanコマンドを使用します。このコマンドをnoneオプションと一緒に使うと、アプリケーションからBootstrapとVue向けのスカフォールド結果を削除し、空のSASSファイルといくつかのJavaScriptユーティリティライブラリだけが残ります。

php artisan preset none

CSSの出力

Laravelのpackage.jsonファイルは、アプリケーションのフロントエンドのプロトタイピングを開始するのに便利なように、bootstrapパッケージを含んでいます。しかし、アプリケーションでの必要性に応じ、自由にパッケージをpackage.jsonファイルに追加／削除してください。Laravelアプリケーションを構築するため、Bootstrapフレームワークを使用する必要はありません。Bootstrapを選んでいる開発者にとって、開発はじめやすいように用意してあるだけです。

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/assets/sass/app.scss SASSファイルをコンパイルします。このapp.scssファイルはSASS変数のファイルと、ほとんどのアプリケーションの構築開始時に役に立つBootstrapをロードします。望みどおりにapp.scssを自由にカスタマイズし、さらにLaravel Mixを設定することで、まったく別のプリプロセッサを使用することさえ可能です。

JavaScriptの出力

アプリケーションで要求されている、JavaScriptの全依存パッケージは、プロジェクトルートディレクトリにあるpackage.jsonファイルで見つかります。このファイルはcomposer.jsonファイルと似ていますが、PHPの依存パッケージの代わりにJavaScriptの依存が指定されている点が異なります。依存パッケージは、Node package manager (NPM)を利用し、インストールできます。

npm install

Tip!! JavaScriptアプリケーションを構築開始するために役立つよう、vueやaxiosのようなパッケージがデフォルトでLaravelのpackage.jsonファイルに含まれています。自身のアプリケーションの要求に合わせ、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/assets/js/app.jsファイルをコンパイルするように指示しています。app.jsファイルの中で、Vueコンポーネントを登録してください。もしくは、他のフーレムワークが好みであれば、自分のJavaScriptアプリケーションの設定を行えます。コンパイル済みのJavaScriptは通常、public/jsディレクトリへ出力されます。

Tip!! app.jsファイルは、Vue、Axios、jQuery、その他のJavaScript依存パッケージを起動し、設定するresources/assets/js/bootstrap.jsファイルをロードします。JacaScript依存パッケージを追加した場合、このファイルの中で設定してください。

Vueコンポーネントの出力

インストールしたてのLaravelアプリケーションは、デフォルトとして、resources/assets/js/componentsディレクトリの中にExampleComponent.vue Vueコンポーネントを持っています。ExampleComponent.vueファイルは、JacaScriptとHTMLテンプレートを同じファイル中で定義している、シングルファイルVueコンポーネントの一例です。シングルファイルコンポーネントは、JavaScript駆動アプリケーションを構築するために、とても便利なアプローチを提供しています。app.jsファイルで登録されています。このコンポーネントサンプルは、app.jsファイル中で登録されています。

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

アプリケーションでコンポ―エントを使用するには、HTMLの定形コードを挿入します。たとえば、アプリケーションの認証のスカフォールドを行うために、make: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を使いたければ、Laravelは簡単にVueのスカフォールドをReactのスカフォールドへ簡単に変更します。真新しいLaravelアプリケーションで、reactオプションを付け、presetコマンドを使用してください。

php artisan preset react

このコマンド一つで、Vueのスカフォールドを削除し、サンプルコンポーネントを含んだReactのスカフォールドを設置します。