Laravel 6.x JavaScriptとCSSスカフォールド

イントロダクション

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

Laravelが提供するBootstrapとVueのスカフォールドは、Composerを使いインストールするlaravel/uiパッケージに用意してあります。

composer require laravel/ui:^1.0 --dev

laravel/uiパッケージをインストールできたら、ui Artisanコマンドを使いフロントエンドのスカフォールドをインストールします。

// 基本的なスカフォールドを生成
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// ログイン／ユーザー登録スカフォールドを生成
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

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

CSSの出力

laravel/ui Composerパッケージをインストールし、フロントエンドスカフォールドを生成すると、Laravelのpackage.jsonファイルにbootstrapパッケージが追加されます。これはBootstrapを使用したアプリケーションフロントエンドのプロトタイピングを開始する手助けになるからです。しかしながら、アプリケーションの必要に応じて、package.jsonへの追加や削除は自由に行ってください。Bootstrapを選んでいる人には良いスタートポイントを提供しますが、Laravelアプリケーションを構築するために必須ではありません。

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/sass/app.scss SASSファイルをコンパイルします。このapp.scssファイルはSASS変数をインポートし、大抵のアプリケーションでよりスタートポイントとなるBootstrapをロードします。お好みに合わせ、もしくはまったく異なったプリプロセッサを使うならば、Laravel Mixの設定に従い自由にapp.scssファイルをカスタマイズしてください。

JavaScriptの出力

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

npm install

Tip!! デフォルトでpackage.jsonファイルは、JavaScriptアプリケーションを構築する良い開始点を手助けするlodashやaxiosのようなわずかなパッケージを含んでいるだけです。アプリケーションの必要に応じ、自由に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/js/app.jsファイルをコンパイルするように指示しています。app.jsファイルの中で、Vueコンポーネントを登録してください。もしくは、他のフーレムワークが好みであれば、自分のJavaScriptアプリケーションの設定を行えます。コンパイル済みのJavaScriptは通常、public/jsディレクトリへ出力されます。

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

Vueコンポーネントの出力

フロントエンドのスカフォールドにlaravel/uiパッケージを利用するとき、resources/js/componentsディレクトリの中にExampleComponent.vue Vueコンポーネントが設置されます。ExampleComponent.vueファイルはJavaScriptとHTMLテンプレートを同じファイルで定義する、シングルファイルVueコンポーネントのサンプルです。シングルファイルコンポーネントはJavaScriptで駆動するアプリケーションを構築するための便利なアプローチを提供しています。このサンプルコンポーネントはapp.jsファイルで登録されています。

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

コンポーネントをアプリケーションで使用するには、HTMLテンプレートの中へ埋め込みます。たとえば、アプリケーションの認証と登録スクリーンをスカフォールドするために、php artisan ui vue --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を使用するほうが好みであれば、VueスカフォールドをReactスカフォールドへ簡単に切り替えられます。

composer require laravel/ui --dev

php artisan ui react

// ログイン／ユーザー登録のスカフォールド
php artisan ui react --auth

プリセットの追加

独自メソッドをUiCommandへ追加できるように、プリセットは「マクロ可能(macroable)」になっています。たとえば以下の例では、UiCommandへnextjsメソッドのコードを追加しています。通常、プリセットマクロはサービスプロバイダで定義します。

use Laravel\Ui\UiCommand;

UiCommand::macro('nextjs', function (UiCommand $command) {
    // 独自フロントエンドのスカフォールド…
});

次に、uiコマンドで新しいプリセットを呼び出します。

php artisan ui nextjs

ドキュメント章別ページ

前章
リリースノート アップグレードガイド 貢献ガイド
API
APIドキュメント
準備
インストール 設定 ディレクトリ構造 Homestead Valet デプロイ
構成の概念
ライフサイクル サービスコンテナ サービスプロバイダ ファサード 契約
基礎
ルーティング ミドルウェア CSRF保護 コントローラ リクエスト レスポンス ビュー URL生成 セッション バリデーション エラー処理 ログ
フロントエンド
Bladeテンプレート 多言語化 スカフォールド アセットコンパイル
セキュリティ
認証 API認証 認可 メール確認 暗号化 ハッシュ パスワードリセット
より深く知る
Artisanコンソール ブロードキャスト キャッシュ コレクション イベント ファイルストレージ ヘルパ メール 通知 パッケージ開発 キュー タスクスケジュール
データベース
データベースの準備 クエリビルダ ペジネーション マイグレーション シーディング Redis
Eloquent ORM
Eloquentの準備 リレーション コレクション ミューテタ APIリソース シリアライズ
テスト
テストの準備 HTTPテスト コンソールテスト ブラウザテスト データベース モック
公式パッケージ
Cashier Dusk Envoy Horizon Passport Scout Socialite Telescope
言語 ファイル
auth.php pagination.php passwords.php validation.php

ヘッダー項目移動

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

移動

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

リンク
サイトホーム ページ上部へ
言語
バージョン
10.x 9.x 8.x 7.x 6.x LTS 5.8 5.7 5.6 5.5 LTS 5.4 5.3 5.2 5.1 LTS 5.0 5.dev 4.2

設定

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

カラーテーマ
和文指定 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によるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

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

オープン操作

P／D／C

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

H／A

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

M／S

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

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

N／J

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

B／K

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

その他

?

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