laravel7、8、9、10とフロントエンドの変遷(1) - laravel ui

に関連するもの、かもしれない

AIによるまとめ

認証システムビルダーの変化

laravelは認証システムのスケルトンを自前で持っているのだが、それがバージョンによって続々と変化している。認証システムで使うビルドシステムが大抵そのまま本体のメインコンテンツでも使われる事が多いだろうから、これは実質フロントエンドの仕様の大まかなものを定義しているとも言える(まあ、ログインだけ切り離して他を別のフロントエンドにするとかはあんま無いんじゃないかな、、、外部認証システムを使うとかならまだしも

laravel7まで

実はlaravel5とかはmake:authとして本体の中に組込まれていたのだが、これがlaravel7くらいになるともう分離されており、laravel uiというパッケージを導入することで得られる artisan ui:authを使う必要が出てきた。したがってcomposerで導入する(なお、ui:authはlaravel10でも使えなくはない)

composer require laravel/ui
php artisan ui:auth --help
Description:
  Scaffold basic login and registration views and routes

Usage:
  ui:auth [options] [--] [<type>]

Arguments:
  type                  The preset type (bootstrap) [default: "bootstrap"]

Options:
      --views           Only scaffold the authentication views
      --force           Overwrite existing views by default
  -h, --help            Display help for the given command. When no command is given display help for the list command
  -q, --quiet           Do not output any message
  -V, --version         Display this application version
      --ansi|--no-ansi  Force (or disable --no-ansi) ANSI output
  -n, --no-interaction  Do not ask any interactive question
      --env[=ENV]       The environment the command should run under
  -v|vv|vvv, --v

デフォルトでbootstrap型を作成する

        modified:   composer.json
        modified:   composer.lock
        modified:   package.json
        modified:   resources/js/bootstrap.js
        modified:   resources/sass/app.scss
        modified:   routes/web.php

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/Http/Controllers/Auth/
        app/Http/Controllers/HomeController.php
        resources/sass/_variables.scss
        resources/views/auth/
        resources/views/home.blade.php
        resources/views/layouts/

すると resources/views/auth/login.blade.php 

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Login') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

うんたらかんたらみたいなログイン画面を生成してくれている。それ以外にも諸々生成されいる

package.jsonの変更点

     "devDependencies": {
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^7.0",
+        "jquery": "^3.2",
         "laravel-mix": "^5.0.1",
         "lodash": "^4.17.19",
+        "popper.js": "^1.12",
         "resolve-url-loader": "^3.1.0",
         "sass": "^1.15.2",
         "sass-loader": "^8.0.0"

ま主にbootstrapとjqueryが導入されている

resources/js/bootstrap.js

ここでいうbootstrap.jsはcssのbootstrapではなく、javascriptを初期化するものである点に注意されたい。

+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+

こんなもんが追加されている。これはたとえばpopper.jsであれば

node_modules/popper.js/package.json

  "main": "dist/umd/popper.js",

なんかを取り込んでくるという事のようであーる。そしてWindowというグローバル空間にimportする事でブラウザで使いやすくしている

window.$ = window.jQuery = require('jquery');

これにいたっては例のajaxの $ で操作させるためのものである。

一方でcss方面では

resources/sass/app.scss

に

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

という記述があり、それぞれcssを取り込んでapp.cssを生成したりする。これはsassである。resources/sass/_variables.scss とか node_modules/bootstrap/scss/bootstrap.scss とかから取り込まれる。この辺の拡張子がなかったりアンダースコアだったりする仕様は面倒くさいので、そういうもんだと思えばそういうもんで済まされれる奴だと思われる。

つか長くなりすぎたけどlaravel7のUIは基本的にbootstrap4 + jquery (+popper)で構築されているものだった。

次回以降はlaravel8である。ここからlaravel breezeが使えるようになってくる。