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

イントロダクション

LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapVueを提供しています。これらのフロントエンドパッケージをインストールするため、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コンポーネントをブラウザでそのまま使用できる1ファイルへ、簡単に圧縮できます。

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

アプリケーションから、フロントエンド向けにスカフォールドした結果を削除したい場合は、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アプリケーションを構築開始するために役立つよう、vueaxiosのようなパッケージがデフォルトで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のスカフォールドを設置します。

ドキュメント章別ページ

公式パッケージ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる