Laravel

JavaScriptとCSS

イントロダクション

LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapVueを提供しています。これらのフロントエンドパッケージをインストールするため、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ファイルはデフォルトで、vuevue-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ドキュメントを一読してください。

ドキュメント章別ページ

開発環境
ビューとテンプレート
Artisanコンソール
公式パッケージ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュを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)へ移動

その他

?

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