JavaScriptとCSS

• イントロダクション
• CSSの出力
• JavaScriptの出力
  • Vueコンポーネントの出力

イントロダクション

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ドキュメントを一読してください。