refirio.org

127.0.0.1 laravel.local

$ cd docker/laravel/code $ curl -s https://laravel.build/laravel10?php=81 | bash

$ cd laravel10 $ ./vendor/bin/sail up

$ cd docker/laravel/code/laravel10 $ sail Command 'sail' not found

$ vi ~/.profile

$ cd docker/laravel/code/laravel10 $ sail Laravel Sail

$ cd docker/laravel/code/laravel10 $ sail up -d

$ sail shell $ sail php -v $ sail composer -V $ sail artisan -V $ sail node -v $ sail npm -v $ sail mysql $ exit

$ sail php -v PHP 8.3.6 (cli) (built: Apr 11 2024 20:23:38) (NTS) $ sail composer -V Composer version 2.7.2 2024-03-11 17:12:18 $ sail artisan -V Laravel Framework 10.48.7 $ sail node -v v20.12.2 $ sail npm -v 10.5.2 $ sail mysql Server version: 8.0.32 MySQL Community Server - GPL

$ sail down

$ sail shell $ date Tue Apr 2 09:25:59 UTC 2024 $ exit $ sail mysql > SELECT NOW(); +---------------------+ | NOW() | +---------------------+ | 2024-04-13 11:07:14 | +---------------------+ 1 row in set (0.00 sec) > SHOW VARIABLES LIKE '%char%'; +--------------------------+--------------------------------+ | Variable_name | Value | +--------------------------+--------------------------------+ | character_set_client | latin1 | | character_set_connection | latin1 | | character_set_database | utf8mb4 | | character_set_filesystem | binary | | character_set_results | latin1 | | character_set_server | utf8mb4 | | character_set_system | utf8mb3 | | character_sets_dir | /usr/share/mysql-8.0/charsets/ | +--------------------------+--------------------------------+ 8 rows in set (0.00 sec) mysql> QUIT

$ sail artisan sail:publish

ENV TZ=UTC ↓ ENV TZ="Asia/Tokyo"

[mysqld] character-set-server = utf8mb4 collation-server = utf8mb4_bin default-time-zone = 'Asia/Tokyo' [client] default-character-set = utf8mb4

volumes: - 'sail-mysql:/var/lib/mysql' ↓ volumes: - 'sail-mysql:/var/lib/mysql' - './docker/8.3/my.cnf:/etc/my.cnf'

$ sail down $ sail build $ sail up -d

$ sail shell $ date Sat Apr 13 20:20:07 JST 2024 $ exit $ sail mysql mysql> SELECT NOW(); +---------------------+ | NOW() | +---------------------+ | 2024-04-13 20:20:38 | +---------------------+ 1 row in set (0.00 sec) mysql> SHOW VARIABLES LIKE '%char%'; +--------------------------+--------------------------------+ | Variable_name | Value | +--------------------------+--------------------------------+ | character_set_client | utf8mb4 | | character_set_connection | utf8mb4 | | character_set_database | utf8mb4 | | character_set_filesystem | binary | | character_set_results | utf8mb4 | | character_set_server | utf8mb4 | | character_set_system | utf8mb3 | | character_sets_dir | /usr/share/mysql-8.0/charsets/ | +--------------------------+--------------------------------+ 8 rows in set (0.01 sec) mysql> QUIT

$ sail composer require barryvdh/laravel-debugbar --dev

$ sail composer require laravel/breeze --dev $ sail artisan breeze:install Which Breeze stack would you like to install? Blade with Alpine Would you like dark mode support? No Which testing framework do you prefer? PHPUnit $ sail artisan migrate Creating migration table ................................................................................ 238ms DONE 2014_10_12_000000_create_users_table .................................................................... 374ms DONE 2014_10_12_100000_create_password_reset_tokens_table .................................................... 440ms DONE 2019_08_19_000000_create_failed_jobs_table .............................................................. 411ms DONE 2019_12_14_000001_create_personal_access_tokens_table ................................................... 443ms DONE

$ sail composer require askdkc/breezejp --dev $ sail artisan breezejp Laravel Breeze用に日本語翻訳ファイルを準備します config/app.phpのlocaleをjaにします GitHubリポジトリにスターの御協力をお願いします (yes/no) [yes]: > yes sh: 1: xdg-open: not found Thank you! / ありがとう 日本語ファイルのインストールが完了しました!

'timezone' => 'UTC', 'locale' => 'en', 'faker_locale' => 'en_US', ↓ 'timezone' => 'Asia/Tokyo', 'locale' => 'ja', 'faker_locale' => 'ja_JP',

$ sail npm run dev

$ sail npm run build

$ sail artisan make:migration create_categories_table

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { /** * Run the migrations. */ public function up(): void { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->timestamps(); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('categories'); } };

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { /** * Run the migrations. */ public function up(): void { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name')->comment('名前'); $table->integer('sort')->comment('並び順'); $table->timestamps(); $table->softDeletes(); $table->comment('分類'); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('categories'); } };

$ sail artisan migrate

$ sail artisan make:model Category

<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Category extends Model { use HasFactory; }

<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\SoftDeletes; class Category extends Model { use SoftDeletes; protected $fillable = [ 'name', 'sort', ]; }

$ sail artisan make:request CategoryCreateRequest

<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class CategoryCreateRequest extends FormRequest { /** * Determine if the user is authorized to make this request. */ public function authorize(): bool { return false; } /** * Get the validation rules that apply to the request. * * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string> */ public function rules(): array { return [ // ]; } }

<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class CategoryCreateRequest extends FormRequest { /** * Determine if the user is authorized to make this request. */ public function authorize(): bool { return true; } /** * Get the validation rules that apply to the request. * * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string> */ public function rules(): array { return [ 'name' => ['required', 'string', 'max:20'], 'sort' => ['required', 'integer'], ]; } public function attributes(): array { return [ 'name' => '名前', 'sort' => '並び順', ]; } }

<?php namespace App\Http\Requests; class CategoryUpdateRequest extends CategoryCreateRequest { }

$ sail artisan make:controller CategoryController

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class CategoryController extends Controller { // }

<?php namespace App\Http\Controllers; use App\Http\Requests\CategoryCreateRequest; use App\Http\Requests\CategoryUpdateRequest; use Illuminate\Http\RedirectResponse; use App\Models\Category; use Illuminate\Support\Facades\Redirect; use Illuminate\View\View; class CategoryController extends Controller { public function index(): View { $category = new Category; return view('category.index', [ 'categories' => $category->get(), ]); } public function create(): View { return view('category.form'); } public function store(CategoryCreateRequest $request): RedirectResponse { $category = new Category; $category->fill($request->all())->save(); return Redirect::route('category.index')->with('message', '登録しました。'); } public function edit($id): View { $category = Category::findOrFail($id); return view('category.form', [ 'category' => $category, ]); } public function update(CategoryUpdateRequest $request, $id): RedirectResponse { $category = Category::findOrFail($id); $category->fill($request->all())->save(); return Redirect::route('category.index')->with('message', '編集しました。'); } public function destroy($id): RedirectResponse { $category = Category::findOrFail($id); $category->delete(); return Redirect::route('category.index')->with('message', '削除しました。'); } }

<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> 分類 </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6"> <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg"> <div class="max-w-xl"> <section> <header> <h2 class="text-lg font-medium text-gray-900"> 分類一覧 </h2> <p class="mt-1 text-sm text-gray-600"> 分類を管理します </p> </header> @if (session('message')) <p class="text-green-600 bg-green-100 my-4 p-4 border-l-4 border-green-400">{{ session('message') }}</p> @elseif (session('error')) <p class="text-red-600 bg-red-100 my-4 p-4 border-l-4 border-red-400">{{ session('error') }}</p> @endif <p class="my-4"><a class="underline text-gray-600 hover:text-gray-900" href="{{ route('category.create') }}">分類登録</a></p> <table class="w-full border shadow"> <thead> <th class="border p-2">名前</th> <th class="border p-2">並び順</th> <th class="border p-2">編集</th> </thead> <tbody> @foreach ($categories as $category) <tr> <td class="border p-2"><div>{{ $category->name }}</div></td> <td class="border p-2"><div>{{ $category->sort }}</div></td> <td class="border p-2"><a class="underline text-gray-600 hover:text-gray-900" href="{{ route('category.edit', ['id' => $category->id]) }}">編集</a></td> </tr> @endforeach </tbody> </table> </section> </div> </div> </div> </div> </x-app-layout>

<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> 分類 </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6"> <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg"> <div class="max-w-xl"> <section> <header> <h2 class="text-lg font-medium text-gray-900"> @if (Request::is('*/edit')) {{ '編集' }} @else {{ '登録' }} @endif </h2> <p class="mt-1 text-sm text-gray-600"> 分類を管理します </p> </header> <form method="post" action="{{ Request::is('category/edit/*') ? route('category.update', ['id' => $category->id]) : route('category.store') }}" class="mt-6 space-y-6"> @if (Request::is('category/edit/*')) {{ method_field('patch') }} @endif {{ csrf_field() }} <div> <x-input-label for="name" value="名前" /> <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" value="{{ old('name', isset($category) ? $category->name : '') }}" autofocus autocomplete="name" /> <x-input-error class="mt-2" :messages="$errors->get('name')" /> </div> <div> <x-input-label for="sort" value="並び順" /> <x-text-input id="sort" name="sort" type="text" class="mt-1 block w-full" value="{{ old('sort', isset($category) ? $category->sort : '') }}" autocomplete="sort" /> <x-input-error class="mt-2" :messages="$errors->get('sort')" /> </div> <div class="flex items-center gap-4"> <x-primary-button>@if (!Request::is('*/create')) {{ '編集' }} @else {{ '登録' }} @endif</x-primary-button> </div> </form> </section> </div> </div> @if (Request::is('category/edit/*')) <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg"> <div class="max-w-xl"> <section> <header> <h2 class="text-lg font-medium text-gray-900"> 削除 </h2> <p class="mt-1 text-sm text-gray-600"> 分類を削除します </p> </header> <form method="post" action="{{ route('category.destroy', ['id' => $category->id]) }}" class="mt-6 space-y-6"> {{ method_field('delete') }} {{ csrf_field() }} <div class="flex items-center gap-4"> <x-danger-button>削除</x-danger-button> </div> </form> </section> </div> </div> @endif </div> </div> </x-app-layout>

use App\Http\Controllers\CategoryController; Route::middleware('auth')->group(function () { Route::get('/category', [CategoryController::class, 'index'])->name('category.index'); Route::get('/category/create', [CategoryController::class, 'create'])->name('category.create'); Route::post('/category/store', [CategoryController::class, 'store'])->name('category.store'); Route::get('/category/edit/{id}', [CategoryController::class, 'edit'])->name('category.edit'); Route::patch('/category/update/{id}', [CategoryController::class, 'update'])->name('category.update'); Route::delete('/category/destroy/{id}', [CategoryController::class, 'destroy'])->name('category.destroy');

$ sail artisan make:migration create_entries_table

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { /** * Run the migrations. */ public function up(): void { Schema::create('entries', function (Blueprint $table) { $table->id(); $table->timestamps(); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('entries'); } };

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { /** * Run the migrations. */ public function up(): void { Schema::create('entries', function (Blueprint $table) { $table->id(); $table->dateTime('datetime')->comment('日時'); $table->string('title')->comment('タイトル'); $table->text('text')->comment('本文'); $table->foreignId('user_id'); $table->timestamps(); $table->softDeletes(); $table->comment('記事'); }); Schema::create('category_entry', function (Blueprint $table) { $table->foreignId('category_id'); $table->foreignId('entry_id'); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('entries'); Schema::dropIfExists('category_entry'); } };

$ sail artisan migrate

$ sail artisan make:model Entry

<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Entry extends Model { use HasFactory; }

<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\SoftDeletes; use Illuminate\Database\Eloquent\Relations\BelongsTo; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class Entry extends Model { use SoftDeletes; protected $fillable = [ 'datetime', 'title', 'text', 'user_id', ]; protected $casts = [ 'datetime' => 'datetime', ]; public function user(): BelongsTo { return $this->belongsTo(User::class); } public function categories(): BelongsToMany { return $this->belongsToMany(Category::class); } }

$ sail artisan make:request EntryCreateRequest

<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class EntryCreateRequest extends FormRequest { /** * Determine if the user is authorized to make this request. */ public function authorize(): bool { return false; } /** * Get the validation rules that apply to the request. * * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string> */ public function rules(): array { return [ // ]; } }

<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class EntryCreateRequest extends FormRequest { /** * Determine if the user is authorized to make this request. */ public function authorize(): bool { return true; } /** * Get the validation rules that apply to the request. * * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string> */ public function rules(): array { return [ 'datetime' => ['required'], 'title' => ['required', 'string', 'max:80'], 'text' => ['required', 'string', 'max:1000'], 'user_id' => ['required', 'integer'], 'categories' => ['required'], ]; } public function attributes(): array { return [ 'datetime' => '日時', 'title' => 'タイトル', 'text' => '本文', 'user_id' => 'ユーザ', 'categories' => 'カテゴリ', ]; } }

<?php namespace App\Http\Requests; class EntryUpdateRequest extends EntryCreateRequest { }

$ sail artisan make:controller EntryController

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class EntryController extends Controller { // }

<?php namespace App\Http\Controllers; use App\Http\Requests\EntryCreateRequest; use App\Http\Requests\EntryUpdateRequest; use Illuminate\Http\RedirectResponse; use App\Models\Entry; use App\Models\User; use App\Models\Category; use Illuminate\Support\Facades\Redirect; use Illuminate\View\View; class EntryController extends Controller { public function index(): View { $entry = new Entry; return view('entry.index', [ 'entries' => $entry->with('user')->get(), ]); } public function create(): View { $users = new User; $categories = new Category; return view('entry.form', [ 'categories' => $categories->get(), 'users' => $users->get(), ]); } public function store(EntryCreateRequest $request): RedirectResponse { $entry = new Entry; $entry->fill($request->all())->save(); $entry->categories()->sync($request->categories); return Redirect::route('entry.index')->with('message', '登録しました。'); } public function edit($id): View { $entry = Entry::findOrFail($id); $users = new User; $categories = new Category; return view('entry.form', [ 'entry' => $entry, 'categories' => $categories->get(), 'users' => $users->get(), ]); } public function update(EntryUpdateRequest $request, $id): RedirectResponse { $entry = Entry::findOrFail($id); $entry->fill($request->all())->save(); $entry->categories()->sync($request->categories); return Redirect::route('entry.index')->with('message', '編集しました。'); } public function destroy($id): RedirectResponse { $entry = Entry::findOrFail($id); $entry->delete(); return Redirect::route('entry.index')->with('message', '削除しました。'); } }

<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> 記事 </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6"> <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg"> <div class="max-w-xl"> <section> <header> <h2 class="text-lg font-medium text-gray-900"> 記事一覧 </h2> <p class="mt-1 text-sm text-gray-600"> 記事を管理します </p> </header> @if (session('message')) <p class="text-green-600 bg-green-100 my-4 p-4 border-l-4 border-green-400">{{ session('message') }}</p> @elseif (session('error')) <p class="text-red-600 bg-red-100 my-4 p-4 border-l-4 border-red-400">{{ session('error') }}</p> @endif <p class="my-4"><a class="underline text-gray-600 hover:text-gray-900" href="{{ route('entry.create') }}">記事登録</a></p> <table class="w-full border shadow"> <thead> <th class="border p-2">日時</th> <th class="border p-2">タイトル</th> <th class="border p-2">ユーザ</th> <th class="border p-2">カテゴリ</th> <th class="border p-2">編集</th> </thead> <tbody> @foreach ($entries as $entry) <tr> <td class="border p-2"><div>{{ $entry->datetime->format('Y/m/d H:i:s') }}</div></td> <td class="border p-2"><div>{{ $entry->title }}</div></td> <td class="border p-2"><div>{{ $entry->user->name }}</div></td> <td class="border p-2"> @foreach ($entry->categories as $category) <div>{{ $category->name }}</div> @endforeach </td> <td class="border p-2"><a class="underline text-gray-600 hover:text-gray-900" href="{{ route('entry.edit', ['id' => $entry->id]) }}">編集</a></td> </tr> @endforeach </tbody> </table> </section> </div> </div> </div> </div> </x-app-layout>

<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> 記事 </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6"> <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg"> <div class="max-w-xl"> <section> <header> <h2 class="text-lg font-medium text-gray-900"> @if (Request::is('*/edit')) {{ '編集' }} @else {{ '登録' }} @endif </h2> <p class="mt-1 text-sm text-gray-600"> 記事を管理します </p> </header> <form method="post" action="{{ Request::is('entry/edit/*') ? route('entry.update', ['id' => $entry->id]) : route('entry.store') }}" class="mt-6 space-y-6"> @if (Request::is('entry/edit/*')) {{ method_field('patch') }} @endif {{ csrf_field() }} <div> <x-input-label for="datetime" value="日時" /> <x-text-input id="datetime" name="datetime" type="text" class="mt-1 block w-full" value="{{ old('datetime', isset($entry) ? $entry->datetime : '') }}" autofocus autocomplete="datetime" /> <x-input-error class="mt-2" :messages="$errors->get('datetime')" /> </div> <div> <x-input-label for="title" value="タイトル" /> <x-text-input id="title" name="title" type="text" class="mt-1 block w-full" value="{{ old('title', isset($entry) ? $entry->title : '') }}" autocomplete="title" /> <x-input-error class="mt-2" :messages="$errors->get('title')" /> </div> <div> <x-input-label for="text" value="本文" /> <textarea id="text" name="text" rows="10" cols="10" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full" class="form-control">{{ old('text', isset($entry) ? $entry->text : '') }}</textarea> <x-input-error class="mt-2" :messages="$errors->get('text')" /> </div> <div> <x-input-label for="user_id" value="ユーザ" /> <select name="user_id" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block"> <option value=""></option> @foreach ($users as $user) <option value="{{ $user->id }}" @if (old('user_id', isset($entry) ? $entry->user_id : '') == $user->id) selected @endif>{{ $user->name }}</option> @endforeach </select> <x-input-error class="mt-2" :messages="$errors->get('user_id')" /> </div> <div> <x-input-label for="categories" value="カテゴリ" /> @foreach ($categories as $category) <div> <label><input type="checkbox" name="categories[]" value="{{ $category->id }}" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" @if (in_array($category->id, old('categories', isset($entry) ? array_column($entry->categories->toArray(), 'id') : []))) checked @endif> {{ $category->name }}</label> </div> @endforeach <x-input-error class="mt-2" :messages="$errors->get('categories')" /> </div> <div class="flex items-center gap-4"> <x-primary-button>@if (!Request::is('*/create')) {{ '編集' }} @else {{ '登録' }} @endif</x-primary-button> </div> </form> </section> </div> </div> @if (Request::is('entry/edit/*')) <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg"> <div class="max-w-xl"> <section> <header> <h2 class="text-lg font-medium text-gray-900"> 削除 </h2> <p class="mt-1 text-sm text-gray-600"> 記事を削除します </p> </header> <form method="post" action="{{ route('entry.destroy', ['id' => $entry->id]) }}" class="mt-6 space-y-6"> {{ method_field('delete') }} {{ csrf_field() }} <div class="flex items-center gap-4"> <x-danger-button>削除</x-danger-button> </div> </form> </section> </div> </div> @endif </div> </div> </x-app-layout>

use App\Http\Controllers\EntryController; Route::middleware('auth')->group(function () { Route::get('/entry', [EntryController::class, 'index'])->name('entry.index'); Route::get('/entry/create', [EntryController::class, 'create'])->name('entry.create'); Route::post('/entry/store', [EntryController::class, 'store'])->name('entry.store'); Route::get('/entry/edit/{id}', [EntryController::class, 'edit'])->name('entry.edit'); Route::patch('/entry/update/{id}', [EntryController::class, 'update'])->name('entry.update'); Route::delete('/entry/destroy/{id}', [EntryController::class, 'destroy'])->name('entry.destroy');

public function store(Request $request): RedirectResponse { /* ここに処理を書くものとする */ return Redirect::route('category.index')->with('message', '登録しました。'); }

$name = $request->get('name'); $sort = $request->get('sort'); $test = $request->get('test', 'テスト'); // 項目が存在しない場合のデフォルト値を指定できる dd([$name, $sort, $test]);

$inputs = $request->all(); Category::create($inputs); dd($inputs);

$inputs = $request->only(['name', 'sort']); Category::create($inputs); dd($inputs);

$category = new Category; $category->name = $request->name; $category->sort = $request->sort; $category->save();

$category = Category::findOrFail($id); $category->name = $request->name; $category->sort = $request->sort; $category->save();

$validated = $request->validate([ 'name' => ['required', 'max:20'], 'sort' => ['required'], ]); Category::create($validated); dd($validated);

127.0.0.1 laravel-react.local

$ cd docker/laravel/code $ curl -s https://laravel.build/laravel-react?php=81 | bash $ cd laravel-react $ ./vendor/bin/sail up

$ sail composer require laravel/breeze --dev $ sail artisan breeze:install react … TypeScriptを使用したい場合、オプション「--typescript」を追加指定する。 $ sail artisan migrate

$ sail composer require askdkc/breezejp --dev $ sail artisan breezejp $ sail npm run build

$ sail npm run dev

$ sail npm run build

import GuestLayout from '@/Layouts/GuestLayout'; import { Head } from '@inertiajs/react'; export default function Hello() { return ( <GuestLayout> <Head title="Hello" /> <div> <h2 className="font-semibold text-xl text-gray-800 leading-tight pb-4">Hello!</h2> <p>これはテストページです。</p> </div> </GuestLayout> ); }

Route::get('/hello', function () { return Inertia::render('Hello'); });

import React, { useState } from 'react'; import GuestLayout from '@/Layouts/GuestLayout'; import { Head } from '@inertiajs/react'; export default function Hello() { // 名前の状態を管理するためのuseStateフック const [name, setName] = useState(''); // 名前が入力されているかに基づいて表示するメッセージを決定 const greetingMessage = name ? `こんにちは！${name}さん。` : '名前を入力してください。'; return ( <GuestLayout> <Head title="Hello" /> <div> <h2 className="font-semibold text-xl text-gray-800 leading-tight pb-4">Hello!</h2> <p className="text-gray-600">{greetingMessage}</p> <input type="text" value={name} onChange={e => setName(e.target.value)} className="mt-4 p-2 border border-gray-400 rounded" placeholder="名前" /> </div> </GuestLayout> ); }

import GuestLayout from '@/Layouts/GuestLayout'; ↓ import GuestLayout from '../Layouts/GuestLayout';

{ "compilerOptions": { "allowJs": true, 〜略〜 "noEmit": true, "baseUrl": ".", … 追加。 "paths": { "@/*": ["./resources/js/*"], "ziggy-js": ["./vendor/tightenco/ziggy"] } }, "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts"] }

import React, { useState } from 'react'; import Modal from '@/Components/Modal'; //export default function Hello() { const Hello: React.FC = () => { const [isModalOpen, setIsModalOpen] = useState(false); const openModal = () => { setIsModalOpen(true); }; const closeModal = () => { setIsModalOpen(false); }; return ( <div className="min-h-screen flex items-center justify-center"> <button onClick={openModal} className="bg-blue-500 text-white px-4 py-2 rounded" > Open Modal </button> <Modal show={isModalOpen} onClose={closeModal} maxWidth="md"> <div className="p-6"> <h2 className="text-xl font-bold mb-4">Modal Title</h2> <p className="mb-4">This is a sample modal content.</p> <button onClick={closeModal} className="bg-red-500 text-white px-4 py-2 rounded" > Close </button> </div> </Modal> </div> ); }; export default Hello;

$ sail artisan make:migration create_tasks_table

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { /** * Run the migrations. */ public function up(): void { Schema::create('tasks', function (Blueprint $table) { $table->id(); $table->string('name')->comment('タスク名'); $table->timestamps(); $table->comment('タスク'); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('tasks'); } };

$ sail artisan migrate

$ sail artisan make:model Task

<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Task extends Model { protected $fillable = [ 'name', ]; }

$ sail artisan make:controller TaskController

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Http\RedirectResponse; use App\Models\Task; use Illuminate\Support\Facades\Redirect; use Inertia\Inertia; use Inertia\Response as InertiaResponse; class TaskController extends Controller { public function index(): InertiaResponse { $tasks = Task::all(); return Inertia::render('Task/Index', [ 'tasks' => $tasks, ]); } public function store(Request $request): RedirectResponse { Task::create($request->validate([ 'name' => ['required', 'max:20'], ])); return Redirect::route('task.index'); } }

import GuestLayout from '@/Layouts/GuestLayout'; import { Head, useForm } from "@inertiajs/react"; export default function TaskPage({ tasks }) { const { data, setData, post, errors } = useForm({ name: '' }); const submit = e => { e.preventDefault(); post('/task', { onSuccess: () => setData('name', '') }); }; return ( <GuestLayout> <Head title="Task" /> <div> <h2 className="font-semibold text-xl text-gray-800 leading-tight pb-4">Tasks</h2> <form onSubmit={submit} className="mb-4"> <div> <label className="me-2">タスク</label> <input value={data.name} onChange={ e => setData('name', e.target.value) } className="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 me-2" /> <button type="submit" className="items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150"> 登録 </button> {errors.name && <div className="mt-2 text-red-600">{errors.name}</div>} </div> </form> <ul> {tasks.map((task, index) => ( <li key={index} className="mb-2"> {task.id}: {task.name} </li> ))} </ul> </div> </GuestLayout> ); }

use App\Http\Controllers\TaskController; Route::get('/task', [TaskController::class, 'index'])->name('task.index'); Route::post('/task', [TaskController::class, 'store']);

export default interface Task { id: number; name: string; }

import GuestLayout from '@/Layouts/GuestLayout'; import { Head, useForm } from "@inertiajs/react"; import Task from '@/Models/Task'; // 型の指定を読み込む export default function TaskPage({ tasks }: { tasks: Array<Task> }) { // 型の指定 const { data, setData, post, errors } = useForm({ name: '' }); const submit = (e: React.FormEvent<HTMLFormElement>) => { // 型の指定 e.preventDefault(); post('/task', { onSuccess: () => setData('name', '') }); }; return ( <GuestLayout> 〜略〜 </GuestLayout> ); }

export default function TaskPage({ tasks }: { tasks: Array<Task> }) { ↓ export default function TaskPage({ tasks }: { tasks: Task[] }) {

export default function TaskPage({ tasks }: { tasks: Array<any> }) { // 型の指定 const { data, setData, post, errors } = useForm({ name: '' }); const submit = (e: any) => { // 型の指定

import Task from '@/Models/Task';

export default function Task({ tasks }: { tasks: Array<Task> }) {

export default function TaskIndex({ tasks }: { tasks: Array<Task> }) {

import { default as TaskModel } from '@/Models/Task';

function sample() { return { name: 'John Doe', age: 24, occupation: 'Developer', isAdult: function() { if (age >= 20) { return true; } else { return false; } } }; } // オブジェクトの分割代入を使ってプロパティを取り出す const { name, age, isAdult } = sample(); console.log(name); // John Doe console.log(age); // 24 console.log(isAdult()); // true

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Http\RedirectResponse; use App\Models\Task; use Illuminate\Support\Facades\Redirect; use Inertia\Inertia; use Inertia\Response as InertiaResponse; class TaskController extends Controller { public function index(): InertiaResponse { $tasks = Task::all(); return Inertia::render('Task/Index', [ 'tasks' => $tasks, ]); } public function store(Request $request): RedirectResponse { Task::create($request->validate([ 'name' => ['required', 'max:20'], ])); return Redirect::route('task.index'); } public function update(Request $request, Task $task): RedirectResponse { $task->update($request->validate([ 'name' => ['required', 'max:20'], ])); return Redirect::route('task.index'); } public function destroy(Task $task): RedirectResponse { $task->delete(); return Redirect::route('task.index'); } }

import GuestLayout from '@/Layouts/GuestLayout'; import { Head, useForm } from "@inertiajs/react"; import { useState } from 'react'; function TaskForm({ submit, data, setData, errors, closeModal }) { return ( <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"> <div className="bg-white p-6 rounded shadow-lg w-1/3"> <form onSubmit={submit} className="mb-4"> <div> <label className="me-2">タスク</label> <input value={data.name} onChange={e => setData('name', e.target.value)} className="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 me-2" /> <button type="submit" className="items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150"> 保存 </button> {errors.name && <div className="mt-2 text-red-600">{errors.name}</div>} </div> <button onClick={closeModal} type="button" className="mt-4 items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 focus:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150"> キャンセル </button> </form> </div> </div> ); } export default function TaskPage({ tasks }) { const [showModal, setShowModal] = useState(false); const [editingTask, setEditingTask] = useState(null); const { data, setData, post, put, delete: destroy, errors, reset, clearErrors } = useForm({ name: '' }); const startCreating = () => { reset(); clearErrors(); setEditingTask(null); setShowModal(true); }; const startEditing = task => { setData('name', task.name); clearErrors(); setEditingTask(task); setShowModal(true); }; const closeModal = () => { setShowModal(false); clearErrors(); }; const submitCreate = e => { e.preventDefault(); post('/task/store', { onSuccess: () => { reset(); closeModal(); } }); }; const submitEdit = e => { e.preventDefault(); if (editingTask) { put(`/task/update/${editingTask.id}`, { onSuccess: () => { reset(); closeModal(); } }); } }; const submitDelete = task => { destroy(`/task/destroy/${task.id}`, { onSuccess: () => reset() }); }; return ( <GuestLayout> <Head title="Task" /> <div> <h2 className="font-semibold text-xl text-gray-800 leading-tight pb-4">Tasks</h2> <button onClick={startCreating} className="items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 mb-4" > 登録 </button> {showModal && ( <TaskForm submit={editingTask ? submitEdit : submitCreate} data={data} setData={setData} errors={errors} closeModal={closeModal} /> )} <ul> {tasks.map(task => ( <li key={task.id} className="mb-2"> {task.id}: {task.name} <button onClick={() => startEditing(task)} className="ms-4 items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150" > 編集 </button> <button onClick={() => submitDelete(task)} className="ms-2 items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 focus:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150" > 削除 </button> </li> ))} </ul> </div> </GuestLayout> ); }

Route::get('/task', [TaskController::class, 'index'])->name('task.index'); Route::post('/task/store', [TaskController::class, 'store']); Route::put('/task/update/{task}', [TaskController::class, 'update']); Route::delete('/task/destroy/{task}', [TaskController::class, 'destroy']);

127.0.0.1 laravel-next.local

$ cd docker/laravel/code $ curl -s https://laravel.build/laravel-next?php=81 | bash $ cd laravel-next $ ./vendor/bin/sail up

$ git clone https://github.com/laravel/breeze-next.git frontend $ rm -rf frontend/.git $ rm -rf frontend/.github $ cp frontend/.env.example frontend/.env.local

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000 ↓ NEXT_PUBLIC_BACKEND_URL=http://localhost

$ sail composer require laravel/breeze --dev $ sail artisan breeze:install api $ sail artisan migrate

APP_URL=http://localhost ↓ APP_URL=http://localhost:8000 FRONTEND_URL=http://localhost:3000

APP_URL=http://localhost:8000 FRONTEND_URL=http://localhost:3000 ↓ APP_URL=http://localhost FRONTEND_URL=http://localhost:3000

$ sail down

services: frontend: image: 'node:20' volumes: - './frontend:/var/www/frontend' working_dir: '/var/www/frontend' ports: - '3000:3000' command: bash -c 'npm install && npm run dev'

$ sail up -d

NEXT_PUBLIC_BACKEND_URL=http://localhost ↓ NEXT_PUBLIC_BACKEND_URL=http://laravel-next.local

APP_URL=http://localhost FRONTEND_URL=http://localhost:3000 ↓ APP_URL=http://localhost FRONTEND_URL=http://laravel-next.local:3000

$ sail composer require askdkc/breezejp --dev $ sail artisan breezejp $ sail npm run build npm error code ENOENT npm error syscall open npm error path /var/www/html/package.json npm error errno -2 npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/var/www/html/package.json' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: /home/sail/.npm/_logs/2024-05-02T06_15_19_112Z-debug-0.log refirio@WorkComputer:~/docker/laravel/code/laravel-next$

function HelloPage() { return <div>Hello!</div>; } export default HelloPage;

export default function Layout({ children }) { return ( <div> <header style={{ background: '#333', color: '#fff', padding: '10px 20px', textAlign: 'center' }}> <h1>My Application</h1> </header> <main style={{ margin: '20px' }}> {children} </main> <footer style={{ background: '#333', color: '#fff', padding: '10px 20px', textAlign: 'center' }}> (C) 2023 My Application </footer> </div> ); }

import Layout from '../components/Layout'; function HelloPage() { return ( <Layout> <div>Hello!</div> </Layout> ); } export default HelloPage;

$ curl -s https://laravel.build/laravel10?php=81 | bash latest: Pulling from laravelsail/php81-composer bb263680fed1: Pulling fs layer 0825793cba86: Pulling fs layer de3c011d207b: Pulling fs layer 7e3c5bd9650e: Waiting c395372934a3: Waiting a88c6339ee21: Waiting 18ff862cabb1: Waiting 03123220ec69: Waiting 99ea1d02d401: Waiting a11c342f1dfb: Waiting 33fb090a3a9a: Waiting 510bc6d0dddd: Waiting 4f4fb700ef54: Waiting ebcdb978b735: Waiting 5b83abcd47c2: Waiting docker: error pulling image configuration: Get https://production.cloudflare.docker.com/registry-v2/docker/registry/v2/blobs/sha256/cf/cf75b1614400... x509: certificate has expired or is not yet valid. See 'docker run --help'. bash: line 17: cd: laravel10: No such file or directory bash: line 23: ./vendor/bin/sail: No such file or directory bash: line 24: ./vendor/bin/sail: No such file or directory Get started with: cd laravel10 && ./vendor/bin/sail up

$ sudo hwclock --hctosys

git config --global --add safe.directory "%(prefix)///wsl$/Ubuntu-20.04/home/refirio/docker/laravel/code/laravel10" git config --global --list

git config --global --add safe.directory '%(prefix)///wsl$/Ubuntu-20.04/home/refirio/docker/laravel/code/laravel10'

git config --global --add safe.directory "%(prefix)///wsl$/Ubuntu-20.04/home/refirio/docker"

$ sail shell $ mysql -h mysql -u root -p > CREATE DATABASE laravel10 DEFAULT CHARACTER SET utf8mb4; > GRANT ALL PRIVILEGES ON laravel10.* TO sail; > QUIT $ mysql -h mysql -u sail -p > SHOW DATABASES; +--------------------+ | Database | +--------------------+ | information_schema | | laravel | | laravel10 | | performance_schema | | testing | +--------------------+ 5 rows in set (0.01 sec) > QUIT