Laravel 7.x環境でVueを触ってみる〜導入編〜

加藤です。

前回と前々回で、Laravel 7.xの認証機能を使ってログイン画面を作成してきました。

tech.arms-soft.co.jp tech.arms-soft.co.jp

以降は勉強のため、Vueを触っていきたいと思います。

まずは導入からです。

環境

PHP 7.3
Laravel 7.0
Node.js v8.12.0

目標・やりたいこと

作成したログイン画面に、Vueを導入してみる。

（1）導入

…と言いつつも実は、ここでやることはあまりありませんでした。

$composer require laravel/ui --dev
$php artisan ui vue --auth

というのも、第1回で実行したこの2つのコマンドで、認証画面に必要なViewと一緒に、すでにVue.jsの環境が用意されていたのだそうです。（汗）

readouble.com

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

スカフォールド（scaffold）とは、元々英語で「足場」という意味です。 IT用語ではアプリケーションの足場(雛形)を自動で生成して、簡単に作ることができる機能のことをいいます。

お手軽すぎて感動しました。ありがたい…。 Laravel6.Xからこのようなパッケージをインストールする形になったようです。

手順をもう少し細かく見ていきます。

1. composerでlaravel/ui パッケージをインストール

以下のコマンドでインストールします。

$composer require laravel/ui

2. スカフォールドを生成

uiコマンドが使えるようになるので、スカフォールドを生成します。

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

--authをつけることでログイン／ユーザー登録用にViewを用意してくれます。

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

知らないうちに実行していたのはこれですね。（汗）

3. 依存パッケージのインストール＆ビルド

実際に手順として実行したのはここからです。 npmコマンドで依存パッケージをインストールしてビルドします。事前にNode.jsのインストールが必要です。

$npm install
$npm run dev

この時点でpackage.jsonを見ると、こんな感じにvueと、bootstrapもDependenciesに追加されていました。

"devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }

（2）Viewを編集

特に何もいじらず、デフォルトで構築した状態ならばViewの中でapp.cssとapp.jsを読み込めば、VueのコンポーネントやBootstrapのスタイルも使えるようになっています。

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

example-componentという名前のとてもシンプルなVueのコンポーネントもデフォルトで用意されています。ただcardを表示するだけなの内容なので実際にアプリケーション開発の際にこれを使ってどうこうすることはないと思いますが、私のように構築から勉強がしたい身としてはありがたいです。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

お試しとして、ログインした後の画面を少しだけ弄ってみます。

@extends('layouts.user.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                       
                       // Vueのコンポーネントを配備
                       <div id="app">
                            <example-component></example-component>
                        </div>

                        <br />

                        <table class="table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名前</th>
                                <th>メールアドレス</th>
                                <th></th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($users as $user)
                            <tr>
                                <th scope="row">{{ $user['id'] }}</th>
                                <td>{{ $user['name'] }}</td>
                                <td>{{ $user['email'] }}</td>
                                 // ボタンにBootstrapのスタイルを当てる
                                <th><button class='btn btn-primary'>Edit</button></th>
                                <th><button class='btn btn-danger'>Delete</button></th>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection