ベースのアプリケーション作成
Composerでプロジェクトを作成
コマンド
composer create-project laravel/laravel アプリケーション名
バージョン指定するときは
composer create-project laravel/laravel:"9.0" アプリケーション名
>composer create-project laravel/laravel TestApp
>composer create-project laravel/laravel TestApp
Creating a "laravel/laravel" project at "./TestApp"
Info from https://repo.packagist.org: #StandWithUkraine
Installing laravel/laravel (v10.0.3)
- Installing laravel/laravel (v10.0.3): Extracting archive
Created project in C:\xampp\htdocs\laravel\TestApp
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies
Lock file operations: 106 installs, 0 updates, 0 removals
- Locking brick/math (0.10.2)
- Locking dflydev/dot-access-data (v3.0.2)
- Locking doctrine/inflector (2.0.6)
- Locking doctrine/lexer (3.0.0)
- Locking dragonmantank/cron-expression (v3.3.2)
- Locking egulias/email-validator (4.0.1)
- Locking fakerphp/faker (v1.21.0)
- Locking filp/whoops (2.14.6)
- Locking fruitcake/php-cors (v1.2.0)
- Locking graham-campbell/result-type (v1.1.1)
- Locking guzzlehttp/guzzle (7.5.0)
- Locking guzzlehttp/promises (1.5.2)
- Locking guzzlehttp/psr7 (2.4.3)
- Locking guzzlehttp/uri-template (v1.0.1)
- Locking hamcrest/hamcrest-php (v2.0.1)
- Locking laravel/framework (v10.1.5)
- Locking laravel/pint (v1.6.0)
- Locking laravel/sail (v1.21.0)
- Locking laravel/sanctum (v3.2.1)
- Locking laravel/serializable-closure (v1.3.0)
- Locking laravel/tinker (v2.8.1)
- Locking league/commonmark (2.3.9)
- Locking league/config (v1.2.0)
- Locking league/flysystem (3.12.3)
- Locking league/mime-type-detection (1.11.0)
- Locking mockery/mockery (1.5.1)
- Locking monolog/monolog (3.3.1)
- Locking myclabs/deep-copy (1.11.0)
- Locking nesbot/carbon (2.66.0)
- Locking nette/schema (v1.2.3)
- Locking nette/utils (v4.0.0)
- Locking nikic/php-parser (v4.15.3)
- Locking nunomaduro/collision (v7.0.5)
- Locking nunomaduro/termwind (v1.15.1)
- Locking phar-io/manifest (2.0.3)
- Locking phar-io/version (3.2.1)
- Locking phpoption/phpoption (1.9.1)
- Locking phpunit/php-code-coverage (10.0.1)
- Locking phpunit/php-file-iterator (4.0.1)
- Locking phpunit/php-invoker (4.0.0)
- Locking phpunit/php-text-template (3.0.0)
- Locking phpunit/php-timer (6.0.0)
- Locking phpunit/phpunit (10.0.14)
- Locking psr/container (2.0.2)
- Locking psr/event-dispatcher (1.0.0)
- Locking psr/http-client (1.0.1)
- Locking psr/http-factory (1.0.1)
- Locking psr/http-message (1.0.1)
- Locking psr/log (3.0.0)
- Locking psr/simple-cache (3.0.0)
- Locking psy/psysh (v0.11.12)
- Locking ralouphie/getallheaders (3.0.3)
- Locking ramsey/collection (2.0.0)
- Locking ramsey/uuid (4.7.3)
- Locking sebastian/cli-parser (2.0.0)
- Locking sebastian/code-unit (2.0.0)
- Locking sebastian/code-unit-reverse-lookup (3.0.0)
- Locking sebastian/comparator (5.0.0)
- Locking sebastian/complexity (3.0.0)
- Locking sebastian/diff (5.0.0)
- Locking sebastian/environment (6.0.0)
- Locking sebastian/exporter (5.0.0)
- Locking sebastian/global-state (6.0.0)
- Locking sebastian/lines-of-code (2.0.0)
- Locking sebastian/object-enumerator (5.0.0)
- Locking sebastian/object-reflector (3.0.0)
- Locking sebastian/recursion-context (5.0.0)
- Locking sebastian/type (4.0.0)
- Locking sebastian/version (4.0.1)
- Locking spatie/backtrace (1.2.2)
- Locking spatie/flare-client-php (1.3.5)
- Locking spatie/ignition (1.4.5)
- Locking spatie/laravel-ignition (2.0.0)
- Locking symfony/console (v6.2.7)
- Locking symfony/css-selector (v6.2.7)
- Locking symfony/deprecation-contracts (v3.2.1)
- Locking symfony/error-handler (v6.2.7)
- Locking symfony/event-dispatcher (v6.2.7)
- Locking symfony/event-dispatcher-contracts (v3.2.1)
- Locking symfony/finder (v6.2.7)
- Locking symfony/http-foundation (v6.2.7)
- Locking symfony/http-kernel (v6.2.7)
- Locking symfony/mailer (v6.2.7)
- Locking symfony/mime (v6.2.7)
- Locking symfony/polyfill-ctype (v1.27.0)
- Locking symfony/polyfill-intl-grapheme (v1.27.0)
- Locking symfony/polyfill-intl-idn (v1.27.0)
- Locking symfony/polyfill-intl-normalizer (v1.27.0)
- Locking symfony/polyfill-mbstring (v1.27.0)
- Locking symfony/polyfill-php72 (v1.27.0)
- Locking symfony/polyfill-php80 (v1.27.0)
- Locking symfony/polyfill-uuid (v1.27.0)
- Locking symfony/process (v6.2.7)
- Locking symfony/routing (v6.2.7)
- Locking symfony/service-contracts (v3.2.1)
- Locking symfony/string (v6.2.7)
- Locking symfony/translation (v6.2.7)
- Locking symfony/translation-contracts (v3.2.1)
- Locking symfony/uid (v6.2.7)
- Locking symfony/var-dumper (v6.2.7)
- Locking symfony/yaml (v6.2.7)
- Locking theseer/tokenizer (1.2.1)
- Locking tijsverkoyen/css-to-inline-styles (2.2.6)
- Locking vlucas/phpdotenv (v5.5.0)
- Locking voku/portable-ascii (2.0.1)
- Locking webmozart/assert (1.11.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 106 installs, 0 updates, 0 removals
- Downloading phpunit/phpunit (10.0.14)
- Installing doctrine/inflector (2.0.6): Extracting archive
- Installing doctrine/lexer (3.0.0): Extracting archive
- Installing symfony/polyfill-ctype (v1.27.0): Extracting archive
- Installing webmozart/assert (1.11.0): Extracting archive
- Installing dragonmantank/cron-expression (v3.3.2): Extracting archive
- Installing symfony/deprecation-contracts (v3.2.1): Extracting archive
- Installing psr/container (2.0.2): Extracting archive
- Installing fakerphp/faker (v1.21.0): Extracting archive
- Installing symfony/polyfill-mbstring (v1.27.0): Extracting archive
- Installing symfony/http-foundation (v6.2.7): Extracting archive
- Installing fruitcake/php-cors (v1.2.0): Extracting archive
- Installing psr/http-message (1.0.1): Extracting archive
- Installing psr/http-client (1.0.1): Extracting archive
- Installing ralouphie/getallheaders (3.0.3): Extracting archive
- Installing psr/http-factory (1.0.1): Extracting archive
- Installing guzzlehttp/psr7 (2.4.3): Extracting archive
- Installing guzzlehttp/promises (1.5.2): Extracting archive
- Installing guzzlehttp/guzzle (7.5.0): Extracting archive
- Installing symfony/polyfill-php80 (v1.27.0): Extracting archive
- Installing guzzlehttp/uri-template (v1.0.1): Extracting archive
- Installing laravel/pint (v1.6.0): Extracting archive
- Installing symfony/yaml (v6.2.7): Extracting archive
- Installing voku/portable-ascii (2.0.1): Extracting archive
- Installing phpoption/phpoption (1.9.1): Extracting archive
- Installing graham-campbell/result-type (v1.1.1): Extracting archive
- Installing vlucas/phpdotenv (v5.5.0): Extracting archive
- Installing symfony/css-selector (v6.2.7): Extracting archive
- Installing tijsverkoyen/css-to-inline-styles (2.2.6): Extracting archive
- Installing symfony/var-dumper (v6.2.7): Extracting archive
- Installing symfony/polyfill-uuid (v1.27.0): Extracting archive
- Installing symfony/uid (v6.2.7): Extracting archive
- Installing symfony/routing (v6.2.7): Extracting archive
- Installing symfony/process (v6.2.7): Extracting archive
- Installing symfony/polyfill-php72 (v1.27.0): Extracting archive
- Installing symfony/polyfill-intl-normalizer (v1.27.0): Extracting archive
- Installing symfony/polyfill-intl-idn (v1.27.0): Extracting archive
- Installing symfony/mime (v6.2.7): Extracting archive
- Installing symfony/service-contracts (v3.2.1): Extracting archive
- Installing psr/event-dispatcher (1.0.0): Extracting archive
- Installing symfony/event-dispatcher-contracts (v3.2.1): Extracting archive
- Installing symfony/event-dispatcher (v6.2.7): Extracting archive
- Installing psr/log (3.0.0): Extracting archive
- Installing egulias/email-validator (4.0.1): Extracting archive
- Installing symfony/mailer (v6.2.7): Extracting archive
- Installing symfony/error-handler (v6.2.7): Extracting archive
- Installing symfony/http-kernel (v6.2.7): Extracting archive
- Installing symfony/finder (v6.2.7): Extracting archive
- Installing symfony/polyfill-intl-grapheme (v1.27.0): Extracting archive
- Installing symfony/string (v6.2.7): Extracting archive
- Installing symfony/console (v6.2.7): Extracting archive
- Installing ramsey/collection (2.0.0): Extracting archive
- Installing brick/math (0.10.2): Extracting archive
- Installing ramsey/uuid (4.7.3): Extracting archive
- Installing psr/simple-cache (3.0.0): Extracting archive
- Installing nunomaduro/termwind (v1.15.1): Extracting archive
- Installing symfony/translation-contracts (v3.2.1): Extracting archive
- Installing symfony/translation (v6.2.7): Extracting archive
- Installing nesbot/carbon (2.66.0): Extracting archive
- Installing monolog/monolog (3.3.1): Extracting archive
- Installing league/mime-type-detection (1.11.0): Extracting archive
- Installing league/flysystem (3.12.3): Extracting archive
- Installing nette/utils (v4.0.0): Extracting archive
- Installing nette/schema (v1.2.3): Extracting archive
- Installing dflydev/dot-access-data (v3.0.2): Extracting archive
- Installing league/config (v1.2.0): Extracting archive
- Installing league/commonmark (2.3.9): Extracting archive
- Installing laravel/serializable-closure (v1.3.0): Extracting archive
- Installing laravel/framework (v10.1.5): Extracting archive
- Installing laravel/sail (v1.21.0): Extracting archive
- Installing laravel/sanctum (v3.2.1): Extracting archive
- Installing nikic/php-parser (v4.15.3): Extracting archive
- Installing psy/psysh (v0.11.12): Extracting archive
- Installing laravel/tinker (v2.8.1): Extracting archive
- Installing hamcrest/hamcrest-php (v2.0.1): Extracting archive
- Installing mockery/mockery (1.5.1): Extracting archive
- Installing filp/whoops (2.14.6): Extracting archive
- Installing nunomaduro/collision (v7.0.5): Extracting archive
- Installing sebastian/version (4.0.1): Extracting archive
- Installing sebastian/type (4.0.0): Extracting archive
- Installing sebastian/recursion-context (5.0.0): Extracting archive
- Installing sebastian/object-reflector (3.0.0): Extracting archive
- Installing sebastian/object-enumerator (5.0.0): Extracting archive
- Installing sebastian/global-state (6.0.0): Extracting archive
- Installing sebastian/exporter (5.0.0): Extracting archive
- Installing sebastian/environment (6.0.0): Extracting archive
- Installing sebastian/diff (5.0.0): Extracting archive
- Installing sebastian/comparator (5.0.0): Extracting archive
- Installing sebastian/code-unit (2.0.0): Extracting archive
- Installing sebastian/cli-parser (2.0.0): Extracting archive
- Installing phpunit/php-timer (6.0.0): Extracting archive
- Installing phpunit/php-text-template (3.0.0): Extracting archive
- Installing phpunit/php-invoker (4.0.0): Extracting archive
- Installing phpunit/php-file-iterator (4.0.1): Extracting archive
- Installing theseer/tokenizer (1.2.1): Extracting archive
- Installing sebastian/lines-of-code (2.0.0): Extracting archive
- Installing sebastian/complexity (3.0.0): Extracting archive
- Installing sebastian/code-unit-reverse-lookup (3.0.0): Extracting archive
- Installing phpunit/php-code-coverage (10.0.1): Extracting archive
- Installing phar-io/version (3.2.1): Extracting archive
- Installing phar-io/manifest (2.0.3): Extracting archive
- Installing myclabs/deep-copy (1.11.0): Extracting archive
- Installing phpunit/phpunit (10.0.14): Extracting archive
- Installing spatie/backtrace (1.2.2): Extracting archive
- Installing spatie/flare-client-php (1.3.5): Extracting archive
- Installing spatie/ignition (1.4.5): Extracting archive
- Installing spatie/laravel-ignition (2.0.0): Extracting archive
68 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
INFO Discovering packages.
laravel/sail .................................................................................................. DONE
laravel/sanctum ............................................................................................... DONE
laravel/tinker ................................................................................................ DONE
nesbot/carbon ................................................................................................. DONE
nunomaduro/collision .......................................................................................... DONE
nunomaduro/termwind ........................................................................................... DONE
spatie/laravel-ignition ....................................................................................... DONE
80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
INFO No publishable resources for tag [laravel-assets].
No security vulnerability advisories found
> @php artisan key:generate --ansi
INFO Application key set successfully.
Laravel UIパッケージをインストール
composerで設定します。
composer require laravel/ui
>cd TestApp
TestApp>composer require laravel/ui
Using version ^4.2 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
- Locking laravel/ui (v4.2.1)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Installing laravel/ui (v4.2.1): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
INFO Discovering packages.
laravel/sail .................................................................................................. DONE
laravel/sanctum ............................................................................................... DONE
laravel/tinker ................................................................................................ DONE
laravel/ui .................................................................................................... DONE
nesbot/carbon ................................................................................................. DONE
nunomaduro/collision .......................................................................................... DONE
nunomaduro/termwind ........................................................................................... DONE
spatie/laravel-ignition ....................................................................................... DONE
80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
INFO No publishable resources for tag [laravel-assets].
No security vulnerability advisories found
認証のスカフォールド構築
参考にしたアールエフェクト様の記事ではLaravel mixを使用してコンパイルしてますが、私が作成したバージョンではデフォルトでviteを使用していました。
package.json
{
"private": true,
"scripts": {
"dev": "vite", ←ここ
"build": "vite build"
},
"devDependencies": {
"@popperjs/core": "^2.11.6",
"@vitejs/plugin-vue": "^4.0.0",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.2",
"sass": "^1.56.1",
"vite": "^4.0.0",
"vue": "^3.2.37"
}
}
artisanコマンドでスカフォールド構築したときに「npm install && npm run devを実行してください」と警告が出ますが、npm run devだとviteのHMRが起動するだけです。
コンソール
VITE v4.1.1 ready in 1460 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
このコンソールは「q」で抜けられます。
artisan serveコマンドでローカルサーバを起動する場合はnpm run buildでコンパイルしたパッケージを配置します。
TestApp>php artisan ui vue --auth
INFO Authentication scaffolding generated successfully.
INFO Vue scaffolding installed successfully.
WARN Please run [npm install && npm run dev] to compile your fresh scaffolding.
TestApp>npm install
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
added 61 packages, and audited 62 packages in 26s
9 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
TestApp>npm run build
> build
> vite build
vite v4.1.4 building for production...
✓ 116 modules transformed.
public/build/manifest.json 0.26 kB
public/build/assets/app-67dcdfd2.css 192.28 kB │ gzip: 27.26 kB
public/build/assets/app-c4335dab.js 247.41 kB │ gzip: 88.09 kB
追記
都度ビルドせずとも、npm run devでviteを起動した状態で別のターミナルを開き、php artisan serveでlocalhostサーバを起動することで、js, css周りのフロントサイド開発を効率よくできます。(勉強不足でした…)
VSCodeを使用している場合は上記の画像のようにターミナル(ここではコマンドプロンプト)を複数開き、viteの開発サーバとWebサーバを同時に実行します。
データベース作成
TestApp>php artisan migrate
INFO Preparing database.
Creating migration table ................................................................................ 479ms DONE
INFO Running migrations.
2014_10_12_000000_create_users_table .................................................................... 406ms DONE
2014_10_12_100000_create_password_reset_tokens_table .................................................... 251ms DONE
2014_10_12_100000_create_password_resets_table ........................................................... 84ms DONE
2019_08_19_000000_create_failed_jobs_table .............................................................. 116ms DONE
2019_12_14_000001_create_personal_access_tokens_table .................................................... 80ms DONE
TestApp>
サーバを立ち上げて確認
Registerから適当なユーザ情報を入力して登録します。
ダッシュボード画面が表示されます。
アプリケーションの情報
TestApp>php artisan about
Environment ........................................................................................................
Application Name ........................................................................................... Laravel
Laravel Version ............................................................................................. 10.1.5
PHP Version ................................................................................................. 8.1.10
Composer Version ............................................................................................. 2.4.4
Environment .................................................................................................. local
Debug Mode ................................................................................................. ENABLED
URL ...................................................................................................... localhost
Maintenance Mode ............................................................................................... OFF
Cache ..............................................................................................................
Config .................................................................................................. NOT CACHED
Events .................................................................................................. NOT CACHED
Routes .................................................................................................. NOT CACHED
Views ....................................................................................................... CACHED
Drivers ............................................................................................................
Broadcasting ................................................................................................... log
Cache ......................................................................................................... file
Database ..................................................................................................... mysql
Logs ................................................................................................ stack / single
Mail .......................................................................................................... smtp
Queue ......................................................................................................... sync
Session ....................................................................................................... file
TestApp>
改造
vueファイルを自動的に読み込むように設定
\resources\js\app.js内の以下の部分のコメントアウトを外します。
app.js
Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
});
この部分で\resources\js\以下にあるVueファイルを自動的に登録してくれるようです。
ヘッダーコンポーネントを追加
\resources\js\components\にHeaderComponent.vueを追加します。
HeaderComponent.vue
<template>
<div class="container-fluid bg-dark mb-3">
<div class="container">
<nav class="navbar navbar-dark">
<span class="navbar-brand mb-0 h1">Test App</span>
<div>
<button class="btn btn-success">登録</button>
<button class="btn btn-success">検索</button>
</div>
</nav>
</div>
</div>
</template>
<script>
export default {}
</script>
丸パクリです(´ε｀；)
spanタグとbuttonタグのインナーテキストだけ変えてます。
このコンポーネントをhome.blade.phpで使ってみます。
\resources\views\home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<header-component></header-component>
</div>
@endsection
ビルドしてみましょう。
TestApp>npm run build
> build
> vite build
vite v4.1.4 building for production...
✓ 117 modules transformed.
public/build/manifest.json 0.26 kB
public/build/assets/app-67dcdfd2.css 192.28 kB │ gzip: 27.26 kB
public/build/assets/app-8c506e23.js 248.19 kB │ gzip: 88.57 kB
TestApp>php artisan serve
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server
こんな感じの画面になりました。
