Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Vue、React、Laravel11-12で作るインボイス対応受注入力システム、Xserver公開、請求書PDF発行
Rating: 3.9 out of 5(20 ratings)
231 students

Vue、React、Laravel11-12で作るインボイス対応受注入力システム、Xserver公開、請求書PDF発行

顧客からの注文情報を顧客、最大三商品を選択し、オーダー情報に登録します。ページ遷移なしのデータの表示や検索などを有効に用い、実務的なシステムを作成します。金額の集計や消費税の計算も行います。請求書はPDFとして出力します。Xサーバーで公開
Created byちからえもん Chikaraemon
Last updated 9/2025
Japanese

What you'll learn

  • 今トレンドのVueJS、Reactをフロントエンドにして、単純なデータベースの登録・編集・削除や表示を超えたインタラクティブなシステムを開発できるようになります。
  • VueJS、ReactとLaravelで、複数のテーブルのリレーションや、ページング、登録フォームのバリデーションを学べます
  • リアルタイムのデータ表示や、ページ遷移なしにモーダルウインドウで検索などVueJS、Reactらしいトリッキーなフロント技術を構築できるようになります。
  • consoleを有効に使うことで、フロント側でどのように記載すべきか理解できるようになります
  • VueJS、ReactとLaravelの認証システムを構築できるようになります
  • VueJS、ReactのuseFormを使って、データバインドすることができるようになります
  • VueJSのcomputed、Reactのfilterを使って、曖昧検索をすることができるようになります
  • バックエンドにLaravelを用いています。Laravelのコントローラーやルーティングを学べます
  • 作成したVueJS、React＋LaravelアプリをレンタルサーバXserverで公開する方法を学べます

Course content

6 sections • 50 lectures • 4h 46m total length

  • 環境構築Laravel、Breeze、vueのインストール8:18
  • 環境構築緊急追加2025/9/213:28

    Laravelのマイナーバージョンアップに伴う弊害と推察されますが、

    環境構築時にViteに由来する　エラーが出るようになりました。

    2025/9/21確認


    Laravelの

    vite が 7.1.6

    @vitejs/plugin-vue が 5.2.4 で、vite のバージョンは ^5.0.0 || ^6.0.0 のみ対応

    plugin-vue が Vite 7 に対応していない ので npm が依存解決できない様です。


    私の環境での対処方法を記載させていただきます。


    環境の構築


    cd ~/Desktop/laravel 


    composer create-project laravel/laravel プロジェクト名


    .envファイル

    DB_CONNECTION=mysql

    DB_HOST=127.0.0.1

    DB_PORT=8889

    DB_DATABASE=データベース名

    DB_USERNAME=root

    DB_PASSWORD=root


    php artisan migrate


    composer require laravel/breeze --dev


    php artisan breeze:install vue


    php artisan serve


    npm install

    ここで下の同様のエラーが出ました。


    npm install

    npm error code ERESOLVE

    npm error ERESOLVE unable to resolve dependency tree

    npm error

    npm error While resolving: undefined@undefined

    npm error Found: vite@7.1.6

    npm error node_modules/vite

    npm error   dev vite@"^7.0.4" from the root project

    npm error

    npm error Could not resolve dependency:

    npm error peer vite@"^5.0.0 || ^6.0.0" from @vitejs/plugin-vue@5.2.4

    npm error node_modules/@vitejs/plugin-vue

    npm error   dev @vitejs/plugin-vue@"^5.0.0" from the root project

    npm error

    npm error Fix the upstream dependency conflict, or retry

    npm error this command with --force or --legacy-peer-deps

    npm error to accept an incorrect (and potentially broken) dependency resolution.

    npm error

    npm error

    npm error For a full report see:

    npm error /Users/macintosh/.npm/_logs/2025-09-20T15_04_12_763Z-eresolve-report.txt

    npm error A complete log of this run can be found in: /Users/macintosh/.npm/_logs/2025-09-20T15_04_12_763Z-debug-0.log


    この様にしてみてください。

    npm install @vitejs/plugin-vue@latest --save-dev



    added 233 packages, and audited 234 packages in 28s

    58 packages are looking for funding

      run `npm fund` for details

    found 0 vulnerabilities


    フロント側サーバの起動

    npm run dev



    > dev

    > vite

      VITE v7.1.6  ready in 906 ms

      ➜  Local:   http://localhost:5173/

      ➜  Network: use --host to expose

      ➜  press h + enter to show help

      LARAVEL v12.30.1  plugin v2.0.1

      ➜  APP_URL: http://localhost

    こちらで無事　register login含む　Laravelの初期画面（Laravel v12.30.1 (PHP v8.3.8)）が表示されましたので、

    開発できるものと思います。

Requirements

  • HTML,CSSはある程度の理解が必要です。PHPやjavascriptの知識は少し必要です。
  • MacでMAMP、Laravelを少しでも操作したことがある方向けです。あるいは、windows11でXAMPP、Laravelを少しでも操作したことがある方向けです。
  • Xserverで公開するには、自力でSSH接続、Filezillaを使えることが前提となります。

Description

顧客からのオーダー情報を登録・更新するWEBアプリケーションを作成します。

フロントにVUEと　REACT、バックエンドにLaravelをInertia経由で違和感なく開発する方法を学ぶことができます。

単純なCRUD（Create, Read, Update, Delete）を超えた機能を提供するアプリを提供します。

前半はVUEで作成します。後半　ほぼ同じアプリをREACTで作成します。

作成したWEBアプリをレンタルサーバーXserverで公開デプロイする方法を説明します。

撮影時はLaravel11でしたが、laravel12にも対応しています。

web-web．work／react1／　こちらでデモをXサーバーで公開しています。　左のURLのドット、スラッシュを打ち直してブラウザでご確認ください。id: test@web-web.work Password: testtestでご確いただけます。


1. ユーザー体験の向上

単なるデータの追加や削除にとどまらず、ユーザーのニーズに応じた高度な操作が可能になります。例えば、検索機能やリアルタイムでのデータ更新により、ユーザーはより直感的に操作でき、スムーズな体験が提供されます。

2. 効率的なデータ管理

単純なCRUD操作ではデータの基本的な管理にとどまりますが、高度な機能により、データのフィルタリングや詳細情報の表示、インタラクティブな操作が可能になります。これにより、データの利用効率が大幅に向上します。

3. 柔軟な機能の提供

単なるデータの表示や変更だけでなく、検索やモーダルウィンドウなどの追加機能を組み込むことで、ユーザーの様々な要望に応えられる柔軟なシステムが構築できます。これにより、複雑な要件にも対応できます。

4. 直感的な操作性

ユーザーはページ遷移や複雑な操作なしで、必要な情報に迅速にアクセスできるため、操作が直感的で使いやすくなります。これにより、学習コストが低く、ユーザーの満足度が向上します。

8. ビジネスニーズへの適応

インボイスに対応した請求書を発行します。非常に実務的なアプリです。


カリキュラムの時間は合4.5時間と短いように思えますが、土日の二日間でしっかりWEBアプリが作成できるようになります。

また、コードやコマンドは　各レクチャーのリソースにおいておりますので、どんどんコピーアンドペーストをしてください。


商品情報には、商品名だけではなく、価格、コード、税率が含まれます。

オーダー情報には、顧客、商品１～３が含まれます。

ピュアなLaravelでは困難な、ページ遷移なしで商品情報を出力したり、モーダルウインドウで検索して、検索結果から該当する商品を選択するとそれが反映されるなどVueJSやReactらしい処理を加えています。

詳細画面では金額の計算や消費税の計算をコントローラーで行い、VUEファイル、tsxファイルに渡します。通常税率、軽減税率の区分毎に集計しますので、インボイスにも対応します。

詳細画面から請求書としてPDFファイルを出力することができます。

請求書には、軽減税率対応品は※印が付きます。


Vue.jsとREACTを用いて表示・登録・編集・削除する基本的なCRUDアプリを構築できる。

選択ボックスで商品を選択すると、商品詳細情報（コード、価格、税率）をページ遷移無しにブラウザに表示する方法が分かる。

顧客や商品を文字列から検索する方法が学べる。

複数のテーブルをリレーションしたデータの出力・表示方法が分かる。

顧客選択ボックスに顧客テーブルをセレクトボックスに展開する方法が分かる。

登録時の誤入力を防止するバリデーションが学べる。

バリデーションを実現するためにLaravelのRequestの使い方が分かる。

一覧表示のページングが学べる。

Laravelのコントローラー側で検索する方法とVue側で検索する方が学べる。

Vue.js、ReactとLaravelをInertia経由で操作する方法を学べる。

Laravel Breezeでアカウントの作成、ログイン認証機能を作れる。

consoleを有効に使ってLaravelのコントローラーから返却されるデータの確認ができる。

Vue.js、Reactで取得したデータの表示方法、バリデーション、ページングへの活用方法が分かる。

Laravelでのテーブルの作成方法、ダミーデータの挿入方法が分かる。

Vue.js、ReactでLaravelにアクセスして、登録・編集・削除処理ができるようになる。

ReactのInterfaceの概念が理解できるようになる。

Who this course is for:

  • これからWEBエンジニアになりたい方や、最新のフロントサイドのVueJSでCRUDを作成したい方、認証システムを作成されたい方
  • mySQLをデータベースにしたVuetJS、React Laravel WEBアプリを構築したい方

Report abuse