5
2

More than 1 year has passed since last update.

React.js + Laravel SPA開発チュートリアル(動画版)

Last updated at Posted at 2021-09-24

React.jsとLaravelを使用してSPAなToDoアプリを開発する講座を動画(Youtube)で作成しました。
よろしかったらぜひ!

第1回 アプリケーションのデモ

この講座で開発するアプリケーションの動作デモです。

第1回 アプリケーションのデモ

第2回 Laravel8のインストールと初期設定

バックエンドから作るので最初はLaravelのインストールです。

第2回 Laravel8のインストールと初期設定

第3回 データベースの設計と構築

Migrationでデータベースの作成と、Factory/Seederという機能を使用してダミーデータの登録を行います。

第3回 データベースの設計と構築

第4回 ToDoリスト一覧APIの作成

Laravelのコントローラーとルーターの設定してToDoリスト一覧APIの表示するところまで。

第4回 ToDoリスト一覧APIの作成

第5回 ユニットテスト(UnitTest)の設定と実行

Laravelのユニットテスト(UnitTest)の設定と実行方法について解説をしてます。
ターミナルからの実行とPhpStormというIDEからでも実行できるように設定します。

第5回 ユニットテスト(UnitTest)の設定と実行

第6回 LaravelでCRUD APIの作成

CRUD(登録・編集・削除)機能のAPIを実装して、ユニットテストでテストまで行っています。

第6回 LaravelでCRUD APIの作成

第7回 バリデーションで入力データ制限する

ユーザーの入力を制限するバリデーションの設定を行います。

第7回 バリデーションで入力データ制限する

第8回 LaravelにReact.jsとTypeScriptをインストール

この回からフロントの開発です。
最初は、LaravelにTypeScript+React.jsの開発環境を構築します。

第8回 LaravelにReact.jsとTypeScriptをインストール

第9回 ReactRouterでページを分ける

ReactRouterというライブラリを使用して、ページの切り分けを行います。

第9回 ReactRouterでページを分ける

第10回 AxiosとReactQueryでAPIからデータを取得する

AxiosとReactQueryというライブラリを使って、Laravelで作成したAPIからデータの取得と表示を行います。

第10回 AxiosとReactQueryでAPIからデータを取得する

第11回 コンポーネントとロジックの分割

今後拡張しやすいようにコンポーネントの分割やAPIの取得ロジックの切り分けを行います。

第11回 コンポーネントとロジックの分割

第12回 ToDoのチェック機能の実装

ToDoのチェック機能を作ってます。

第12回 ToDoのチェック機能の実装

第13回 ToDoの登録機能の実装

ToDoの登録機能を作ってます。

第13回 ToDoの登録機能の実装

第14回 ToDoの編集・削除機能の実装

ToDoの編集・削除機能を作ってます。

第14回 ToDoの編集・削除機能の実装

第15回 Laravel Sanctumでユーザー認証機能を作る

Laravel Sanctumというライブラリを使用してAPIの認証機能を作ります。

第15回 Laravel Sanctumでユーザー認証機能を作る

第16回 ログイン機能の作成

Laravelで作った認証APIを使用してReactでログインできるように作っていきます。

第16回 ログイン機能の作成

第17回 ユーザー毎のToDoの取得とポリシーの設定

ユーザー毎のToDoの取得と他のユーザーのタスクを編集できないようにするポリシー(認可)の実装します。

第17回 ユーザー毎のToDoの取得とポリシーの設定

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2