前のパートに戻る 完了して次のパートへ  

  3-1 laravel/uiの導入

このパートではlaravel/uiを導入し、Laravelにデフォルトで導入されているログイン・新規会員登録などのユーザー管理周りの仕組みを使う準備をしていきます。

本パートの目標物


laravel/uiを導入して、生成されたレイアウトファイルと、ユーザー管理周りのテンプレートデザインが適用されていることを確認するまでが本パートの目標です。

  • トップページにログイン・会員登録リンクが表示されている
  • CSS適用済みの会員登録ビュー

目標物を作成するまでの流れ


  1. モジュールの導入(laravel/ui)
  2. 導入したモジュールの展開
  3. 会員登録の実行

Laravel6ではデフォルトでユーザー管理周りの機能が搭載されています。

これもフレームワークの特徴で、ユーザー管理機能はほとんど全てのWebアプリケーションで利用されるため、Laravelではあらかじめ準備されています。

また、laravel/uiはそれらのビューも標準的なテンプレートとして準備されているため、本教材ではlaravel/uiを利用してユーザー管理機能および、ビューの実装を行っていきます。

では実際に進めていきましょう。

1. モジュールの導入(laravel/ui)


$ composer require laravel/ui "^1.2"

上手く実行できると以下のような文字列がターミナルから返ってきます。

 $ composer require laravel/ui "^1.2"
Using version ^1.2 for laravel/ui
./composer.json has been created
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 17 installs, 0 updates, 0 removals
  - Installing symfony/translation-contracts (v1.1.7): Loading from cache
  - Installing psr/container (1.0.0): Loading from cache
  - Installing symfony/polyfill-mbstring (v1.12.0): Loading from cache
  - Installing symfony/translation (v4.3.6): Loading from cache
  - Installing nesbot/carbon (2.26.0): Loading from cache
  - Installing psr/simple-cache (1.0.1): Loading from cache
  - Installing illuminate/contracts (v6.5.0): Downloading (100%)         
  - Installing doctrine/inflector (v1.3.0): Loading from cache
  - Installing illuminate/support (v6.5.0): Downloading (100%)         
  - Installing symfony/finder (v4.3.6): Loading from cache
  - Installing illuminate/filesystem (v6.5.0): Downloading (100%)         
  - Installing symfony/process (v4.3.6): Loading from cache
  - Installing symfony/service-contracts (v1.1.8): Downloading (100%)         
  - Installing symfony/polyfill-php73 (v1.12.0): Loading from cache
  - Installing symfony/console (v4.3.6): Loading from cache
  - Installing illuminate/console (v6.5.0): Downloading (100%)         
  - Installing laravel/ui (v1.1.1): Downloading (100%)         
symfony/translation suggests installing symfony/config
symfony/translation suggests installing symfony/yaml
illuminate/support suggests installing moontoast/math (Required to use ordered UUIDs (^1.1).)
illuminate/support suggests installing ramsey/uuid (Required to use Str::uuid() (^3.7).)
illuminate/support suggests installing symfony/var-dumper (Required to use the dd function (^4.3.4).)
illuminate/support suggests installing vlucas/phpdotenv (Required to use the Env class and env helper (^3.3).)
illuminate/filesystem suggests installing league/flysystem (Required to use the Flysystem local and FTP drivers (^1.0).)
illuminate/filesystem suggests installing league/flysystem-aws-s3-v3 (Required to use the Flysystem S3 driver (^1.0).)
illuminate/filesystem suggests installing league/flysystem-cached-adapter (Required to use the Flysystem cache (^1.0).)
illuminate/filesystem suggests installing league/flysystem-sftp (Required to use the Flysystem SFTP driver (^1.0).)
illuminate/filesystem suggests installing psr/http-message (Required to allow Storage::put to accept a StreamInterface (^1.0))
symfony/service-contracts suggests installing symfony/service-implementation
symfony/console suggests installing symfony/event-dispatcher
symfony/console suggests installing symfony/lock
symfony/console suggests installing psr/log (For using the console logger)
illuminate/console suggests installing dragonmantank/cron-expression (Required to use scheduling component (^2.0).)
illuminate/console suggests installing guzzlehttp/guzzle (Required to use the ping methods on schedules (^6.0).)
Writing lock file
Generating autoload files

緑色の文字で以下のように表示されていればモジュールの導入は成功です。

2. 導入したモジュールの展開


では導入したモジュールを展開して、実際のビューファイルを作成していきましょう。

では、以下のコマンドでモジュールを展開しましょう。

$ php artisan ui vue --auth

上記コマンドを実行すると、以下のような文字列がターミナルに表示されます。

$ php artisan ui vue --auth
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

続いて以下のコマンドを実行していきます。

$ npm install

コマンド実行後、以下のような文字列が表示されれば成功です。

$ npm install
npm WARN deprecated [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1011 packages from 487 contributors and audited 17168 packages in 25.601s
found 0 vulnerabilities

続いて以下のコマンドを実行します。

$ npm run dev

コマンド入力後、以下のような文字列がターミナルから返ってくれば成功です。

$ npm run dev

 DONE  Compiled successfully in 10629ms                                                                                                                           11:20:32 AM

       Asset      Size   Chunks             Chunk Names
/css/app.css   191 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.38 MiB  /js/app  [emitted]  /js/app

上記2つのnpmから始まるコマンドはVue.js用のコマンドになります。

本教材ではVue.jsは使用しませんが、 /css/app.css  /js/app.jsを得るために実行しました。

もし上記のコマンドでエラーが出て進めない場合は、下記リポジトリから app.css と app.js をコピーして作成してください。

https://github.com/uchidayuma/laravel-book-review/tree/master/public

このように展開に成功すると、以下のディレクトリおよびビューファイルが生成されています。

public
└── css
    └── app.css


public
└── js
    └── app.js


recources
└── views
    └── layout
        └── app.blade.php


recources
└── views
    └── auth 
        └── password
        └── login.blade.php
        └── register.blade.php
        └── verify.blade.php

*ビューファイル群

このようにファイルの生成が確認できれば、laravel/uiの導入は完了です。


もしnpm run devコマンドが上手く行かない方は以下のコマンドをお試しください。

$ npm uninstall --save-dev sass-loader
$ npm install --save-dev [email protected]

動作確認


ではCloud9のコンソールに以下のコマンドを打って開発用サーバーを実行してみましょう。

$ php artisan serve --host=$IP --port=$PORT 

以下のような反応がターミナルから返ってきたら、サーバーの立ち上げが完了しています。

$ php artisan serve --host=$IP --port=$PORT            
Laravel development server started: http://127.0.0.1:8080

サーバーを立ち上げるとターミナルが占有されてしまうため、以下のようにターミナルをもう1つ立ち上げて、php artisanコマンドなどは新しいターミナルから実行するようにすると便利です。

では以下のようにプレビューボタンを押して動作を確認してみましょう。

その後、プレビュー画面が小さいので右斜め上矢印ボタンを押すと別タブの全画面で見ることができます。

プレビューでエラーが出てしまう方へ

2020年3月30日追記:新しいパッケージのバージョンですと、httpでのアクセスができない現状が確認されております。

その場合、 app/Http/Middleware/TrustProxies.php に以下のように追記していただき、プレビューを https://プレジューのURL といった形でアクセスしていただくと解決いたします。

最後に

このパートではコードを全く書いていないのに新規会員登録の機能や整えられたビューができてしまいました。

これがフレームワークの特徴で、汎用的な機能を非常にすばやく実装できました。

現代においてはこのような便利なツールを組み合わせて素早く良いものを作ることができますので、どんどん利用していきましょう。

お疲れ様でした。

議論

28 質問

このコースの評価は?