Laravel × JavaScript(Fetch)× MySQL を利用した非同期通信(第1回:イントロ)

2022/06/25

Laravel の入門として、CRUD アプリのチュートリアルをよく見ますよね。

もちろん、当ブログにもエントリーしています。

 

ただ、非同期通信を使ったアプリはあまり見かけないんですよね。

そんなわけで、今回は Laravel × JavaScript(Fetch) × MySQL を利用した非同期通信のアプリの作成についてエントリーします。

なお、この手の非同期アプリでは JavaScript(Ajax)をよく使うのですが、 JavaScript(Fetch)で非同期通信処理を行い、jQuery は使わない方向でコードを書いてみます。

 

今回のチュートリアルを通して作成するゴール

↓クリックするとアニメーション Gif で確認できます。↓

 

使用するスキル

今回、開発した環境は以下になります。

・Laravel 6

・MySQL 5.7

・JavaScript(jQuery を使わずに JavaScript だけで DOM 操作を行います)

Laravelのバージョンはちょっと古くて6になります。

僕自身、まだ新しいバージョンの Laravel をチェックできていなくて 今回は慣れている6で開発しました。

ただ、全く違うフレームワークではないので、多少、バージョンに開きがあってもある程度の参考にはなるかと思います。

 

INDEX

何回かに分けてエントリーしていきます。

第1回:イントロ

第2回:一覧表示

第3回:詳細検索

第4回:追加機能

第5回:削除機能

 
今回はイントロまでとなります。

次回は「JavaScript(Fetch)」を使った非同期通信で一覧表示のご紹介をしようと思います。

以上です。

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-チュートリアル, 中級