LaravelのJavaScript周辺環境の整備

前回、Laravelで開発環境を構築しました。あわせて、入門用のシンプルなコードを設定し、Vue.jsとの連携もしました。ここでは、そこから一歩進めて、LaravelのJavaScript周辺の設定の方法とコーディングをVuetify(バージョン3)を例に紹介します。

この記事は、以前Laravelのバージョン7の環境で紹介していたものを最新の9で稼働を確認しながらリライトしたものです。あわせてVue.jsをバージョンを2から3にしましたが、それに対応するVuetifyのバージョン3は執筆時点でBeta版で使えるコンポーネントも少ないので、代替となりそうなBootstrapをLaravelに設定する方法も合わせて紹介します。

また、オリジナルのJavaScriptの共通関数を定義する方法も紹介します。

Vuetify

Vuetifyは、Vue.js用のマテリアルデザインのフレームワークです。

「マテリアルデザイン」は直感的にわかりやすいデザインを提供するために定められたルールです。そのルールに即したデザインのコンポーネント等をVuetifyは提供していています。

LaravelにVue.js環境を構築してあり、シングルファイルコンポーネント*.vueが利用できるようになっている前提で、Vuetify3 Betaのインストール手順に従って進めていきます。

Vuetifyは執筆時点ではまだ正式にはVue.jsのバージョン3に対応しておらずベータ版です。一般的にベータ版の場合、通常よりも更新が頻繁で変更点も大きいですので、バージョンを確認した上で最新のものを選択します。ここでは3.0.0-beta.4でした。本番がリリースしたらまたリライトしようと思いますが、ベータ版のバージョン間でコードのシンタックスが変わったりすることもあるので、その際はご容赦ください。

vuetifyパッケージのバージョンを確認して最新版をインストールします。パッケージのバージョン一覧を表示させるには、パッケージの情報を表示するnpm infoコマンドに「versions」を付与して実行します。

PS > npm info vuetify versions
  ...
  '3.0.0-beta.1',         '3.0.0-beta.2',   '3.0.0-beta.3',
  '3.0.0-beta.4'
]

PS > npm install vuetify@3.0.0-beta.4 --save-dev
...

またインストール済みパッケージのバージョンを確認したい場合は「npm list」を使います。

PS > npm list
├── axios@0.25.0
├── bootstrap@5.1.3
├── laravel-mix@6.0.49
├── lodash@4.17.21
├── postcss@8.4.14
├── vue-loader@17.0.0
├── vue@3.2.36
└── vuetify@3.0.0-beta.4

LaravelのJavaScript、CSS管理ファイル

Laravelの開発環境で、JavaScriptやCSSはresourcesフォルダで管理されます。JavaScript用に「js」、CSS用に「css」というフォルダがあり、その中にそれぞれ「app.js」や「app.css」という管理ファイルがあります。そこにimportの記述をすれば、webpackでビルドする際にまとめられます。

webpackでまとめられるのは、プロジェクトのルートフォルダにあるwebpack.mix.jsというLaravel Mix用のファイルから、app.jsやapp.cssといった設定ファイルを参照しているからです。今回は不要ですが、scssなどの管理ファイルを加えた場合などはこちらの変更も必要になってきます。

Vuetifyの設定は先の公式サイトのドキュメントにあるようにスタイルもJavaScriptで読み込むので記述するのはapp.jsのみとなります。

resources¥js¥¥app.js

//デフォルトの記述
import "./bootstrap";

// Vuetifyのスタイル
import "vuetify/styles";

// Vue.js本体
import * as Vue from "vue";

// Vuetify3本体
import * as Vuetify from "vuetify";

// バージョン3からは本体からcomponentとdirectiveが独立しました
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

// シングルファイルコンポーネント
import App from "./components/ExampleComponent.vue";

// Vue.jsをグローバルに(他で利用しないなら不要です)
window.Vue = Vue;

// Vue.jsのインスタンスを生成
const app = window.Vue.createApp(App);

// Vuetifyのインスタンスを生成
// こちらもバージョン3で方法が変わりました
const vuetify = Vuetify.createVuetify({
    components,
    directives,
});

// Vue.jsにVuetifyをセット
app.use(vuetify);

// Vue.jsのマウント
app.mount("#app");

次に、シングルファイルコンポーネントです。執筆時点で対応済みのコンポーネントは、grid system(v-container)と、sheet(v-sheet)とbutton(v-btn)のようでしたのでそれらを使って次のように記述しました。

resources¥js¥components¥ExampleComponent.vue

<template>
    <v-container>
        <h1>Vuetify Version3</h1>

        <v-sheet color="white" elevation="6" height="150" width="300">
            <p>Vue Material Component Framework</p>
        </v-sheet>

        <v-btn color="primary" elevation="17" x-large>Primary</v-btn>
        <v-btn color="secondary" elevation="17" x-large>Secondary</v-btn>
        <v-btn color="accent" elevation="17" x-large>Accent</v-btn>
        <v-btn color="warning" elevation="17" x-large>Waring</v-btn>
        <v-btn color="error" elevation="17" x-large>Error</v-btn>
        <v-btn color="info" elevation="17" x-large>Info</v-btn>
        <v-btn color="success" elevation="17" x-large>Success</v-btn>
    </v-container>
</template>

<script>
export default {
    name: "HelloWorld_Vuetify",
    el: "ExampleComponent",
};
</script>

<style scoped>
* {
    margin: 3px;
}
</style>

.blade.phpファイルは前回と同じです、JavaScripとCSSを読み込んでコンポーネント用のタグを記述します。

resources¥views¥welcome.blade.php

...
  <head>
  ...
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  </head>
  <body>
    <div id="app">
      <example-component></example-component>
    </div>
    <script src=" {{ asset('js/app.js') }}"></script>
  </body>
</html>

blade.phpのこのポ―ネントのタグ名は、原則キャメルケース(大文字区切り)をケバブケース(-区切り)に変換します「例:CamelCase→camel-case」。これはHTMLが大文字と小文字を区別しない仕様の為です。ただ、.php(HTML)側は区別をしない方なのでキャメルケースで書いても動いたりします。

最後にJavaScriptのビルドをして、「php artisan serve」で反映を確認します。

PS > npm run dev
...
PS > php artisan serve

Vuetifyの設定は以上です。

Bootstrap

筆者はVuetify3が正式リリースするまでBootstrapを使うことにしました。BootstrapはLaravel uiから簡単にインストールできますが、自動設定されるapp.jsの記述がrequireになったり、既存の設定が消えたりする（元々アプリの初期状態で行うもののようです）、ので手動で設定します。

bootstrapをnpmからインストールします。

npm install bootstrap --save-dev
...

app.jsでbootstrapのJavaScriptの部分をimportします。

resources¥js¥app.js

...
import "bootstrap";
...

app.cssでbootstrapのcssの部分をimportします。

resources¥css¥app.css

...
@import "bootstrap/dist/css/bootstrap.css";
...

.blade.phpは、Bootstrapのコンポーネントやクラスを付与してHTMLを記述するだけです。

sample.blade.php

...
<head>
...
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
...
</head>
<body>
...
<button type="button" class="btn btn-primary">Bootstrapで装飾されたボタン</button>
...
<script src=" {{ asset('js/app.js') }}"></script>
...

テスト環境でビルドします。

PS> npm run dev

次の警告メッセージが出ましたが、bootstrapのCSSでcolor-adjustを利用しているのが原因のようです。それをprint-color-adjustに変換しているようですが、colo-adjustもprint-color-adjustも非標準の機能のようですので、無視して構わないと思います。

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated." -t "Laravel Mix"

bootstrap.css

...
.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}
...

自分でJavaScriptの共通関数を定義する

自分でJavaScriptのコードを書く場合は、.blade.phpのページに<script>タグを書いてその内側で従来のHTMLと同様にスクリプトを記述できますが、すべてのページに共通なスクリプトを書きたい場合もあると思いますので、その際の方法を紹介します。

app.jsと同じ階層に、global.jsを作成しまます。または、先ほどから何度か出てきている「app.js」に関数を追加してもいいです（ここでは別途ファイルを作成する流れで紹介します)。

webpack.mix.jsが、新しく作成したglobal.jsファイルを読み込むように修正します。

mixのjsメソッドの第1引数を文字列の配列にして、既存のapp.jsに加えてglobal.jsを記述します。ちなみに第2引数は出力場所です。

webpack.mix.js

...
mix.js(["resources/js/app.js", "resources/js/global.js"], "public/js")
...

次にglobal.jsの記述をします。

resources¥js¥global.js


window.globalFunctions={};

function test(str) {
  console.log(str);
}

window.globalFunctions.test=test;

メインの関数(test)はログ出力するだけの単純なものですが、その前後で、globalFunctionsというオブジェクトを作成して、globalFunctionsのtestプロパティに作成したtest関数を設定しています。

LaravelではJavaScriptをwebpackを利用してひとつのファイルにまとめますが、その際にスクリプトはモジュールとなってしまいます。モジュール版のJavaScriptの関数は、HTML側のonclickイベントやmoduleではない(typeに属性にmoduleを設定していない)スクリプトからは利用できません。そのためwindow領域に割り当てを行っています。windowの領域はHTML側からも利用できますので、今回の例でいうと、モジュール内の関数を「onclick="globalFunctions.test('コメント');"」とすることで意図した挙動になります。

また、モジュールになるとスクリプトは厳格モードになりますので、コードによっては今までは動いていたのにエラーがスローされ止まってしまうという事があります。注意してください。

webpack経由となりますので、npm run dev(またはprod)を実行しないとスクリプトの変更は反映されません。忘れないようにしましょう。

Vite

Laravelプロジェクトを新設した際、LaravelMix(webpack)が含まれずに、かわりに ViteとLaravel Vite Pluginが設定されるようになりました。

「webpack.mix.js」に代わって、「vite.config.js」が管理ファイルとなります。デフォルト状態の中身をみると、次のようになっています。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel([
      'resources/css/app.css',
      'resources/js/app.js',
    ]),
  ],
});

LaravelMix使用時は.blade.phpの、headとbodyを閉じる前にぞれぞれCSSとJavaScriptの次のような記述をしました。

LaravelMix環境.blade.php

...
<head>
...
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
...
<body>
...
<script src=" {{ asset('js/app.js') }}"></script>
</body>
...

それが、Vite環境では、headに次のようにするだけでよくなりました。

Vite環境.blade.php

...
<head>
...
@vite(['resources/css/app.css', 'resources/js/app.js'])
...

さらに、Vite環境で、「npm run dev」を実行すると、次のようになりプロンプトが戻りません。JavaScriptの変更を待機して変更があれば再コンパイルします。

PS > npm run dev

> dev
> vite

  vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 400ms.

  Laravel v9.19.0

  > APP_URL: http://test.test

Laravel公式ページのViteの説明ページには、ViteからLaravel-mixに戻す方法も紹介されていましたので、従来通りLaravelMixを使いたい場合はリンク先のページを参考にしてください。

投稿:2021/12/12 - 更新: facebookで共有 twitterで共有 pocketに追加