Laravel講座第4弾になります。
6月頃に受講者の方向けにお願いしたアンケート結果に基づき、
Vue.js3 (CompositionAPI + script setup) + Laravel (Breeze + Inertia)
という開発環境で、
顧客管理システム(CRM)を作ってみるという内容になっています。
時間はトータル12時間、動画本数約115本。
最新クーポン情報はこちら
Laravel Udemy第4弾講座の内容
以前のアンケート結果をもとに講座を作成しております。
以前アンケート結果
Vue.jsはver3.0でCompositionAPIが追加され、
ver3.2 でより簡単に書ける script setup 構文が追加されていますので、
ほぼ全てのコンポーネントで『script setup』で書いております。
■フロントエンド Vue.js3
CompositionAPI + script setup
defineProps, defineEmits, ref, reactive, computed, onMounted, v-show, v-if, v-on, v-bind, v-for
バックエンドはLaravelになりますが、
Vue.jsとの開発環境の作りやすさを優先して、【Laravel Breeze (Inertia) 】で構築しています。
また顧客管理システムということで、
4つのテーブルをjoinしてサブクエリを作った状態をベースにする『グローバルスコープ』や、
中間テーブルを操作する『attach』や『sync』などは
今回初めて扱ったメソッドかなと思います。
■ バックエンド Laravel
LaravelBreeze, Inertia, Ziggy, Link,
Sanctum (API)、クエリスコープ、リレーション(1対多、多対多, attach, sync)、ページネーション、トランザクション、Inertiaミドルウェア、フラッシュメッセージ、バリデーション、カスタムリクエスト、Seeder、Faker、Factory、
■データ分析
期間指定、日別分析、月別分析、デシル分析、RFM分析 など
使っているライブラリは下記です。
yubinbango-core2, micromodal.js, axios, vue-charts-3
■動画収録時の環境
- PHP 8.0.8
- Laravel 9.3.0
- composer 2.2.4
- vue 3.2.0
無料公開分の動画
■ Laravel Breeze + Inertiaのインストール
■ aタグとLinkコンポーネントの違い
■ Vue.js3の概要
■ スロットと名前付きスロット
■ CRMについて
■ API通信 ( sanctum + axios)
■グローバルスコープ
今回の講座の苦労話
Ajaxでクエリ結果を取得しグラフ描画するのですが、
最初に試した vue3-chartsというライブラリではどうにもうまくいかず(1度目の取得は描画されるけど2度目からは目盛りがおかしくなる)
うんうん試して結果的にライブラリ側のミスだと判断し、
別のvue-charts-3 に変更したらあっさり描画されました。
ライブラリは楽だけれどしっかり試さないといけないですね。
リリース後の追加予定
デシル分析、RFM分析は追加予定です。
(分析はきりがないのでRFM分析くらいまでで一旦止める予定です。)
->追加しました。
Laravel第4弾講座を作成してみて
script setupは少し慣れればかなり描き心地がよく、これからはこれで書いていくことになるなと実感できました。
コンポーネント分割や関数化などまだまだ改善できるとは思いますが、
かなりたくさんの技術を盛り込んでおりますので、
フロントエンド、バックエンド、クエリなどをまとめて習得できる講座になっていると自負しておりますので、
ぜひご活用いただければ幸いです。
最新クーポン情報はこちら
もしよろしければフロントエンドについてReactもあると思うのですが、Vue.jsを選定された理由があればお教えいただけますでしょうか？
特に理由はなくて、
以前からVueを触っていたのでその流れで作った、になります。