はじめに 一週間前から初めて触るVue + Laravelの環境で新規案件を開発しはじめました。 入力フォームの情報を確認画面に渡し、入力ミスなどで入力フォームに戻る際に、Laravelでフォームの情報を受け渡ししようかと奮闘しましたができず、結局Javascriptの力技で解決しました。。。多分 本来のやり方ではないと思いますが、良かったら参考にしてください。 環境 バックエンド:PHP - Laravel8 フロントエンド:Vue.js DB:Mysql ver8.0 Docker使用 最初にやろうとしたこと 新規入力フォーム userCreate.vue <template> <form @submit.prevent="submit"> <label for="name">名前</label> <input type="text" id="name" name="name" v-model="form.name" /> <label for="email">メールアドレス</label> <input type="text" id="email" name="email" v-model="form.email" /> <button name="test" type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { return { 　　　　　　　　　　　　　// 戻った時に予め入力していた値を受け取り、フォームに復元する form: this.$inertia.form({ name: this.user.name, email: this.user.email, }), }; }, methods: { submit() { this.form.post(this.route("userconfirm")); }, }, }; </script> 入力確認フォーム userConfirm.vue <template> <form @submit.prevent="submit"> <table> <tbody> <tr> <td>名前</td> <td>{{ user.name }}</td> </tr> <tr> <td>email</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <button name="back" type="submit">戻る</button> <button name="send" type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { return { form: this.$inertia.form({ name: this.user.name, email: this.user.email, }), }; }, methods: { submit() { // data()内のformデータをコントローラに送る this.form.post(this.route("usercomplate")); }, }, }; </script> laravel側コントローラー userController.php <?php namespace App\Http\Controllers; use Inertia\Inertia; use Illuminate\Http\Request; use App\Models\User; class UserController extends Controller { public function create() { return Inertia::render('Mypage/UserCreate'); } public function confirm(Request $request) { $user = $request->all(); return Inertia::render('Mypage/UserConfirm', ['user' => $user]); } public function complete(Request $request) { if($request->has('send')){ // ここに保存の処理 }elseif($request->has('back')){ // ここに新規入力フォームに戻る処理 $user = $request->all(); return Inertia::render('Mypage/UserConfirm', ['user' => $user]); } } } ボタンのnameを受け取りif文で条件分岐処理を行うのがLaravelのベストプラクティスかと思われますが、どうやってもname属性を受け渡しできずにLaravelでの処理は諦めました。。。。。 URLから受け取る処理をVueで実装する 新規入力フォーム userCreate.vue <template> <form @submit.prevent="submit"> <label for="name">名前</label> <input type="text" id="name" name="name" v-model="form.name" /> <label for="email">メールアドレス</label> <input type="text" id="email" name="email" v-model="form.email" /> <button type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { 　　　　　　　　// ①ここを追加 　　　　　　　　let url = new URL(window.location.href); let params = url.searchParams; return { 　　　　　　　　　　　　　// ②パラメータを受け取り、フォームに復元する form: this.$inertia.form({ name: params.get("name"), email: params.get("email"), }), }; }, methods: { submit() { this.form.post(this.route("userconfirm")); }, }, }; </script> 入力確認フォーム userConfirm.vue <template> <form @submit.prevent="submit"> <table> <tbody> <tr> <td>名前</td> <td>{{ user.name }}</td> </tr> <tr> <td>email</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <div @click="backpage">戻る</div> <button type="submit">送信</button> </form> </template> <script> //中略 export default { 　　　　　props: { user: Object, }, data() { return { form: this.$inertia.form({ last_name: this.user.name, email: this.user.email, }), }; }, methods: { submit() { this.form.post(this.route("usercomplete")); }, 　　　　　　　　// 入力値が含まれるパラメーターを送る backpage() { this.form.get(this.route("usercreate")); }, }; </script> [戻る]をクリックしbackpageメソッド実行されると、下記のような入力データが入ったパラメータが送られるため①でURLを取得し、②で各項目をGetしてからdataに初期値を渡す。 http://localhost:8080//user/create?name=foobar&email=test@test.com 参考サイト URLに含まれるGETパラメータを取得する Laravelにて１つのFormで複数ボタンを実装する際の備忘録 正しい方法ではないかもしれませんがご参考まで

はじめに 今回は、Laravel8でアカウント作成後のリダイレクト先を変更する方法についてご紹介します！ また、ログイン後のリダイレクト先変更については、こちらの記事で紹介していますので是非参考にしてください。 https://qiita.com/yyy752/items/60511e1ef799f9943ee7 リダイレクト先変更 1.RegisterResponseを新規作成。 /app/Http/Responses/RegisterResponse.php <?php namespace App\Http\Responses; use Illuminate\Http\JsonResponse; use Illuminate\Http\Response; use Laravel\Fortify\Contracts\RegisterResponse as RegisterResponseContract; class RegisterResponse implements RegisterResponseContract { public function toResponse($request) { // below is the existing response // replace this with your own code return $request->wantsJson() ? new JsonResponse('', 201) : redirect('/list'); } } 2.JetstreamServiceProviderのbootを修正。 /app/Providers/JetstreamServiceProvider.php public function boot() { $this->configurePermissions(); Jetstream::deleteUsersUsing(DeleteUser::class); // register new RegisterResponse $this->app->singleton( \Laravel\Fortify\Contracts\RegisterResponse::class, \App\Http\Responses\RegisterResponse::class ); } まとめ 以上でアカウント作成後のリダイレクト先を変更できました！ 是非参考にしてみてください！ 参考サイト

原因、 Notification::send($friends, new friends_mail_send($user,$request->except('friend_ids'))); $friendsがnull値 もう今の所100%

はじめに 我が家の愛犬の世話は、家族で分担しています。 家族間で情報を共有し、愛犬の体調管理をスムーズにするために、散歩や餌の時間・量、排泄の回数などの記録（以下、お世話記録とする）を手軽に行えるアプリを作りたいと思います。 バックナンバー (1)【構想】 (2)【開発環境】 (3)【DB設計】　＜　今回はここ DB設計 どんなテーブルのデータベースが必要なのか考えていきます。 最終的にはグループウェアのように、複数人で一匹のペットに関する記録を投稿できるようにしたいですが、処理が複雑になりそうなので、まずは一人で使う前提です。 テーブル１：users カラム名 内容 カラムタイプ 備考 id ユーザID bigint(20) unsigned name ユーザ名 varchar(255) email メールアドレス varchar(255) password パスワード varchar(255) created_at 作成日時 timestamp updated_at 更新日時 timestamp テーブル２：walks（さんぽ） カラム名 内容 カラムタイプ 備考 id ID bigint(20) unsigned user_id ユーザID bigint(20) unsigned recorded_on お世話の実行時刻 dateTime time 散歩した時間 integer 単位：分 note メモ text created_at 作成日時 timestamp updated_at 更新日時 timestamp テーブル３：pees（おしっこ） カラム名 内容 カラムタイプ 備考 id ID bigint(20) unsigned user_id ユーザID bigint(20) unsigned recorded_on お世話の実行時刻 dateTime amount 量 integer 選択肢（少なめ/ふつう/多め） color 色 integer 選択肢（薄い黄色/黄色/濃い黄色/赤/その他） odor におい integer 選択肢（ふつう/くさい/異臭） note メモ text created_at 作成日時 timestamp updated_at 更新日時 timestamp テーブル３：poops（うんち） カラム名 内容 カラムタイプ 備考 id ID bigint(20) unsigned user_id ユーザID bigint(20) unsigned recorded_on お世話の実行時刻 dateTime amount 量 integer 選択肢（少なめ/ふつう/多め） color 色 integer 選択肢（薄い茶色/茶色/濃い茶色/赤/その他） odor におい integer 選択肢（ふつう/くさい/異臭） note メモ text created_at 作成日時 timestamp updated_at 更新日時 timestamp テーブル４：foods（ドッグフードのリスト） カラム名 内容 カラムタイプ 備考 id ID bigint(20) unsigned name ドッグフード名 varchar(255) maker メーカー名 varchar(255) calorie_published 基本カロリー integer 単位：kcal/100g note メモ text created_at 作成日時 timestamp updated_at 更新日時 timestamp テーブル５：feeds（ごはん） カラム名 内容 カラムタイプ 備考 id ID bigint(20) unsigned user_id ユーザID bigint(20) unsigned recorded_on お世話の実行時刻 dateTime food_name_1 ドッグフード名１ varchar(255) amount_1 量１ integer 単位：g food_name_2 ドッグフード名２ varchar(255) ※ドッグフード切替時のブレンドに対応 amount_2 量２ integer 単位：g calorie 摂取カロリー integer 単位：kcal、ドッグフード名と基本カロリー、量から計算 note メモ text created_at 作成日時 timestamp updated_at 更新日時 timestamp テーブル６：cares（その他のお世話リスト） カラム名 内容 カラムタイプ 備考 id ID bigint(20) unsigned name お世話名 varchar(255) created_at 作成日時 timestamp updated_at 更新日時 timestamp テーブル７：others（その他のお世話） カラム名 内容 カラムタイプ 備考 id ID bigint(20) unsigned user_id ユーザID bigint(20) unsigned care_name お世話名 varchar(255) recorded_on お世話の実行時刻 dateTime note メモ text created_at 作成日時 timestamp updated_at 更新日時 timestamp 今回は以上です。

皆さんこんにちはー 僕は現在LaravelとVueでシステム開発を行っています。 あまり記述の仕方がわかっていなかったので備忘録も兼ねて記事にしていきます。 Laravel8とVue3自体比較的新しいため新機能の情報自体少ないです。 そのため、今回紹介する記述の方法がQiitaには掲載がなかったので投稿しようと思いました。 間違っている箇所があったら指摘していただけると幸いです。 では参りましょう！！ 初期設定 PHPのバージョン $ php -v PHP 8.0.9 (cli) (built: Jul 29 2021 17:21:21) ( NTS ) Copyright (c) The PHP Group Zend Engine v4.0.9, Copyright (c) Zend Technologies with Zend OPcache v8.0.9, Copyright (c), by Zend Technologies Laravelのバージョン $ php artisan --version Laravel Framework 8.56.0 vueのバージョン "vue": "^3.0.5", //package.json こんな感じです。 ではこの状態からreaddubleを見ながらLaravelスタートさせましょう！ 今回は、LaravelパッケージのBreezeを利用します。 【インストール】 公式サイトを見ながらインストールしてきます。 composerが入っていない場合、事前にインストールをしておいて下さい。 composer create-project laravel/laravel example-app cd example-app php artisan serve ローカル環境で接続確認します。 http://127.0.0.1:8000/ Breezeのインストール 【breezeとは】 Laravelパッケージのjetstreamより軽量かつ、簡単にログイン機能が導入できるLaravelパッケージです。 Laravel/uiの代わりとしてLaravel８から導入されているようです。 全部で３種類あり、viewの実装方法で別れています。 １．bladeを利用して表示させる ２．Vue.jsを利用して表示させる ３．React.jsを利用して表示させる の３つです。 それぞれLinuxコマンドが違うので紹介していきます。 ちなみに今回はタイトル通り２番のVue.jsをつかうやーつです。 ２番（vue.js）と３番（react.js）のどちらかをインストールすることによって、同時にInertia.jsもインストールされます。 それではコマンドぽちぽちします。 blade_ver composer require laravel/breeze --dev php artisan breeze:install //ここだけ違う npm install npm run dev php artisan migrate vue_ver composer require laravel/breeze --dev php artisan breeze:install vue //ここだけ違う npm install npm run dev php artisan migrate react_ver composer require laravel/breeze --dev php artisan breeze:install react //ここだけ違う npm install npm run dev php artisan migrate お尻に追加するだけですね。 reddubleにも同様のことが書かれています。 再度ローカル環境で確認すると、右上にlog inとRegisterという項目が追加されています。 これでログイン機能の完成です。 次はファイル構造とルーティングを確認してみましょう。 どこからファイルを呼び出しているのか？ ルーティングを確認してみましょう！ routes/web.php Route::get('/', function () { return Inertia::render('Welcome', [ 'canLogin' => Route::has('login'), 'canRegister' => Route::has('register'), 'laravelVersion' => Application::VERSION, 'phpVersion' => PHP_VERSION, ]); }); Route::get('/dashboard', function () { return Inertia::render('Dashboard'); })->middleware(['auth', 'verified'])->name('dashboard'); require __DIR__.'/auth.php'; 全体的にBreezeによって手が加えられています。 routes/web.php Route::get('/', function () { return Inertia::render('Welcome' 　//←ここが作用しています このInertia::renderがvueファイルへ直接呼び出しています。 Laravelだと、初期設定のルーティングでresources/views/**.blade.phpを参照しますが、 Inertia::renderと記述するとresources/js/Pages/**.vueを参照するようになります。 bladeファイルは全スルーされます。 Inertiaのルーティングを説明してきます。 例 Inertia::render（ // '第一引数'、[ // 第二引数 //] ）； // 第一引数：　resources/js/Pages/の呼び出したいファイル名 // 第二引数:　渡したいデータを記述 というわかりやすい使い方です。 Vue.jsにはどのようにデータを渡すのか ではVue.jsではどのようにデータが渡るのでしょうか。 その点見てみましょう。 routes/web.php // ここを例に見ていきます Route::get('/', function () { return Inertia::render('Welcome', [ 'canLogin' => Route::has('login'), 'canRegister' => Route::has('register'), 'laravelVersion' => Application::VERSION, 'phpVersion' => PHP_VERSION, ]); }); return Inertia::render('Welcome'と記載があるので、 Welcome.vueを見てみます。 resources/js/Pages/Welcome.vue <!-- 重要なところがscriptタグ内なので、templateタグとstyleタグは省略しています。 --> <script> import { Head, Link } from '@inertiajs/inertia-vue3'; export default { components: { Head, Link, }, props: { canLogin: Boolean, canRegister: Boolean, laravelVersion: String, phpVersion: String, }, } </script> ルーティング側から渡っているデータは routes/web.php 'canLogin''canRegister''laravelVersion''phpVersion' です。 Vue側ではpropsで受け取っているだけです。 なんて簡単な・・・。 resources/js/Pages/Welcome.vue <!-- 重要なところがscriptタグ内なので、templateタグとstyleタグは省略しています。 --> <script> import { Head, Link } from '@inertiajs/inertia-vue3'; export default { components: { Head, Link, }, props: { canLogin: Boolean,　　　←ここ canRegister: Boolean,　　　←ここ laravelVersion: String,　　　←ここ phpVersion: String,　　　←ここ }, } </script> propsを書くだけで、Laravelからデータ受け取れます。 これでblade.phpとはおさらば？ですかね。 終わりに 以上が、Laravel8でフロント部分をbladeを使わずにVue3だけで書く方法（Inertia.js使用）です。 これからの開発の参考になれば幸いです。 ありがとうございました！！！

概要 チャット機能をつけるためにLaravel-echo-server + Redisにてソケット通信を行おうとしたところSameSiteの設定でIssueが出ていた。 無事動いたので備忘録。 チャット機能は以下を参考 Laravel Broadcasting (Laravel Echo)を試してみる 環境 Laravel Framework 6.20.32 MAMP 6.4 PHP 7.4.6 やったこと localhostのSSL設定 laravelのsame_siteの設定 laravel-echo-serverのSSL設定 接続先をhttpsへ変更 localhostのSSL設定 以下のサイトを参考。 他のやり方だと何故かうまく行かなかった。 ローカル開発環境にSSLを設定できるmkcertがめちゃくちゃ便利だった laravelのsame_siteの設定 {ルート}/session.phpで設定 session.php 'same_site' => 'lax', noneに設定すると怒られたのでlaxにしました。 Mark cross-site cookies as Secure to allow setting them in cross-site contexts laravel-echo-serverのSSL設定 laravel-echo-server.jsonをSSLに対応。 認証はMAMPの時に作成したもの。 laravel-echo-server.json "port": "6001", "protocol": "https", "socketio": {}, "secureOptions": 67108864, "sslCertPath": "/Applications/MAMP/conf/apache/keys/localhost.pem", "sslKeyPath": "/Applications/MAMP/conf/apache/keys/localhost-key.pem", 忘れずにサーバーを再起動。 laravel-echo-server start 接続先をhttpsへ変更 laravel-echoの設定を変更 bootstrap.js window.Echo = new Echo({ broadcaster: 'socket.io', host: 'https://' + window.location.hostname + ':6001' }); 忘れずにjsを更新。 npm run dev おわり これでとりあえずIssuesはなくなりました。