Laravel master JavaScriptとCSS

イントロダクションIntroduction

LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapと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[http://getbootstrap.com] and Vue[https://vuejs.org] that will be helpful for many applications. By default, Laravel uses NPM[https://npmjs.org] to install both of these frontend packages.

CSSCSS

CSSをもっと楽しく取り扱わせてくれるために役立つ、変数やmixinなどのパワフルな機能を通常のCSSへ付け加えるSASSとLESSをコンパイルするため、Laravel Elixirはクリーンで表現的なAPIを提供しています。Laravel Elixir[/docs/{{version}}/elixir] 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.

このドキュメントでは、CSSコンパイル全般について簡単に説明します。SASSとLESSのコンパイルに関する情報は、Laravel Elixirのドキュメントで確認してください。In this document, we will briefly discuss CSS compilation in general; however, you should consult the full Laravel Elixir documentation[/docs/{{version}}/elixir] for more information on compiling SASS or Less.

JavaScriptJavaScript

アプリケーションを構築するために、特定のJavaScriptフレームワークやライブラリの使用をLaravelは求めていません。しかし、Vueライブラリを使用した近代的なJavaScriptを書き始めやすくできるように、基本的なスカフォールドを用意しています。Vueはコンポーネントを使った堅牢なJavaScriptアプリケーションを構築するために、記述的なAPIを提供しています。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.

CSSの出力Writing CSS

Laravelのpackage.jsonファイルは、アプリケーションのフロントエンドのプロトタイピングを開始するのに便利なように、bootstrap-sassパッケージを含んでいます。しかし、アプリケーションでの必要性に応じ、自由にパッケージをpackage.jsonファイルに追加／削除してください。Laravelアプリケーションを構築するため、Bootstrapフレームワークを使用する必要はありません。Bootstrapを選んでいる開発者にとって、開発しやすいように用意してあるだけです。The Laravel package.json file includes the bootstrap-sass 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 simply provided as a good starting point for those who choose to use it.

CSSのコンパイルを始める前に、プロジェクトのフロントエンド開発に必要な依存パッケージをNPMを使用し、インストールしてください。Before compiling your CSS, install your project's frontend dependencies using NPM:

npm install

npm installを使い、依存パッケージをインストールし終えたら、Gulpを使用して、SASSファイルを通常のCSSへコンパイルできます。gulpコマンドは、gulpfile.jsファイル中の指示に従い、処理を行います。通常、コンパイル済みのCSSは、public/cssディレクトリへ出力されます。Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Gulp[http://gulpjs.com/]. The gulp command will process the instructions in your gulpfile.js file. Typically, your compiled CSS will be placed in the public/css directory:

gulp

Laravelに含まれる、デフォルトのgulpfile.jsは、resources/assets/sass/app.scss SASSファイルをコンパイルします。このapp.scssファイルはSASS変数をインポートし、ほとんどのアプリケーションで開始時に役立つ、Bootstrapを読み込みます。ご希望であれば、app.scssファイルを自由に変更してください。もしくはLaravel Elixirを設定し、完全に別のプリプロセッサを使用することもできます。The default gulpfile.js included with Laravel will compile the resources/assets/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 Elixir[/docs/{{version}}/elixir].

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://npmjs.org]:

npm install

Laravelのpackage.jsonファイルはデフォルトで、vueやvue-resourceのような、JavaScriptアプリケーションの構築開始時に役立てるためのパッケージをいくつか含んでいます。アプリケーションの必要性に合わせて、package.jsonファイルに追加／削除してください。By default, the Laravel package.json file includes a few packages such as vue and vue-resource 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.

パッケージをインストールし終えたら、アセットをコンパイルするために、gulpコマンドが利用できます。GulpはJavaScriptのための、コマンドラインビルドシステムです。gulpコマンドを実行すると、Gulpはgulpfile.jsファイル中の指示を実行します。Once the packages are installed, you can use the gulp command to compile your assets[/docs/{{version}}/elixir]. Gulp is a command-line build system for JavaScript. When you run the gulp command, Gulp will execute the instructions in your gulpfile.js file:

gulp

デフォルトでLaravelのgulpfile.jsファイルは、SASSとresources/assets/js/app.jsファイルをコンパイルするように指示しています。app.jsファイルの中で、Vueコンポーネントを登録してください。もしくは、他のフーレムワークが好みであれば、自分のJavaScriptアプリケーションの設定を行えます。コンパイル済みのJavaScriptは通常、public/jsディレクトリへ出力されます。By default, the Laravel gulpfile.js file compiles your SASS and the resources/assets/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、Vueリソース、jQuery、その他のJavaScriptを起動し、設定するresources/assets/js/bootstrap.jsファイルをロードします。JacaScript依存パッケージを追加した場合、このファイルの中で設定してください。{tip} The app.js file will load the resources/assets/js/bootstrap.js file which bootstraps and configures Vue, Vue Resource, 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

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: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[http://vuejs.org/guide/single-file-components.html] 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テンプレートにコンポーネントを挿入できます。To use the component in your application, you may simply drop it into one of your HTML templates. For example, after running the make: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></example>
@endsection

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

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