JavaScriptとCSS
イントロダクション
LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapとVueを提供しています。これらのフロントエンドパッケージをインストールするため、LaravelはNPMを使用しています。
CSS
CSSをもっと楽しく取り扱わせてくれるために役立つ、変数やmixinなどのパワフルな機能を通常のCSSへ付け加えるSASSとLESSをコンパイルするため、Laravel Elixirはクリーンで表現的なAPIを提供しています。
このドキュメントでは、CSSコンパイル全般について簡単に説明します。SASSとLESSのコンパイルに関する情報は、Laravel Elixirのドキュメントで確認してください。
JavaScript
アプリケーションを構築するために、特定のJavaScriptフレームワークやライブラリの使用をLaravelは求めていません。しかし、Vueライブラリを使用した近代的なJavaScriptを書き始めやすくできるように、基本的なスカフォールドを用意しています。Vueはコンポーネントを使った堅牢なJavaScriptアプリケーションを構築するために、記述的なAPIを提供しています。
CSSの出力
Laravelのpackage.json
ファイルは、アプリケーションのフロントエンドのプロトタイピングを開始するのに便利なように、bootstrap-sass
パッケージを含んでいます。しかし、アプリケーションでの必要性に応じ、自由にパッケージをpackage.json
ファイルに追加/削除してください。Laravelアプリケーションを構築するため、Bootstrapフレームワークを使用する必要はありません。Bootstrapを選んでいる開発者にとって、開発しやすいように用意してあるだけです。
CSSのコンパイルを始める前に、プロジェクトのフロントエンド開発に必要な依存パッケージをNPMを使用し、インストールしてください。
npm install
npm install
を使い、依存パッケージをインストールし終えたら、Gulpを使用して、SASSファイルを通常のCSSへコンパイルできます。gulp
コマンドは、gulpfile.js
ファイル中の指示に従い、処理を行います。通常、コンパイル済みのCSSは、public/css
ディレクトリへ出力されます。
gulp
Laravelに含まれる、デフォルトのgulpfile.js
は、resources/assets/sass/app.scss
SASSファイルをコンパイルします。このapp.scss
ファイルはSASS変数をインポートし、ほとんどのアプリケーションで開始時に役立つ、Bootstrapを読み込みます。ご希望であれば、app.scss
ファイルを自由に変更してください。もしくはLaravel
Elixirを設定し、完全に別のプリプロセッサを使用することもできます。
JavaScriptの出力
アプリケーションで要求されている、JavaScriptの全依存パッケージは、プロジェクトルートディレクトリにあるpackage.json
ファイルで見つかります。このファイルはcomposer.json
ファイルと似ていますが、PHPの依存パッケージの代わりにJavaScriptの依存が指定されている点が異なります。依存パッケージは、Node package manager
(NPM)を利用し、インストールできます。
npm install
Laravelのpackage.json
ファイルはデフォルトで、vue
やvue-resource
のような、JavaScriptアプリケーションの構築開始時に役立てるためのパッケージをいくつか含んでいます。アプリケーションの必要性に合わせて、package.json
ファイルに追加/削除してください。
パッケージをインストールし終えたら、アセットをコンパイルするために、gulp
コマンドが利用できます。GulpはJavaScriptのための、コマンドラインビルドシステムです。gulp
コマンドを実行すると、Gulpはgulpfile.js
ファイル中の指示を実行します。
gulp
デフォルトでLaravelのgulpfile.js
ファイルは、SASSとresources/assets/js/app.js
ファイルをコンパイルするように指示しています。app.js
ファイルの中で、Vueコンポーネントを登録してください。もしくは、他のフーレムワークが好みであれば、自分のJavaScriptアプリケーションの設定を行えます。コンパイル済みのJavaScriptは通常、public/js
ディレクトリへ出力されます。
Tip!!
app.js
ファイルは、Vue、Vueリソース、jQuery、その他のJavaScriptを起動し、設定するresources/assets/js/bootstrap.js
ファイルをロードします。JacaScript依存パッケージを追加した場合、このファイルの中で設定してください。
Vueコンポーネントの出力
By default, fresh Laravel applications contain an
Example.vue
Vue component located in the
resources/assets/js/components
directory. The
Example.vue
file is an example of a single file
Vue component 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', require('./components/Example.vue'));
アプリケーションでコンポ―エントを使用するには、HTMLの定形コードを挿入するだけです。たとえば、アプリケーションの認証のスカフォールドを行うために、make:auth
Artisanコマンドを実行し、スクリーンを登録したら、home.blade.php
Bladeテンプレートにコンポーネントを挿入できます。
@extends('layouts.app')
@section('content')
<example></example>
@endsection
Tip!! Vueコンポーネントを変更したら、毎回
gulp
コマンドを実行しなくてはならないことを覚えておきましょう。もしくは、gulp watch
コマンドを実行して監視すれば、コンポーネントが更新されるたび、自動的に再コンパイルされます。
もちろん、Vueコンポーネントの記述を学ぶことに興味があれば、Vueフレームワーク全体についての概念を簡単に読み取れる、Vueドキュメントを一読してください。