Go to Qiita Advent Calendar Top
LoginSignup
33
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@morry_48in株式会社オープンロジ

[簡単]React x LaravelのSPAで作るチュートリアル④(API取得してReactで一覧表示)

Last updated at Posted at 2021-05-03

SPAで作るタスク管理アプリのチュートリアル - seederで作ったDBのデータをAPI取得してReactで一覧表示

今回は第④弾でReactで一覧テーブル作成する部分をやっていくで

①環境構築(Docker/Laravel/React.js/Material-UI)
②React側でルーティング設定
③API取得してReactで一覧テーブル作成
④API取得してReactで一覧表示
⑤新規登録機能
⑥編集・削除機能

今回の章から本格的にバックエンドとフロントエンドをAPI連携してデータ取得する部分を実装していくで。

APIの連携の部分だけをやりたい人もおるやろうからこの章のスタート地点としてのブランチを用意しといたから、この章から始める人はAPIっていうブランチがあるから、それを使ってな。

③章までやってきた人はそのままのブランチで大丈夫やで！

データ表示のためのDB周りの準備(テーブルとテストデータ作成)

postsテーブルを作成するためのマイグレーションファイルを作成する

// migrationファイルを作成
$ docker-compose exec app php artisan make:migration create_posts_table --create=posts

上記のコマンドを実行すると_create_posts_tableと名のつくファイルが生成されるのでup()の部分を更新する

_create_posts_table.php
    //ファイルを開くとfunction up()が存在するので書きを記載する
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('content');
            $table->timestamps();
        });
    }

migrateionを実行する

$ docker-compose exec app php artisan migrate                                         
Migrating: 2021_05_03_081009_create_posts_table
Migrated:  2021_05_03_081009_create_posts_table (31.42ms)

migratedされたらDBを確認

DBクライアントで確認する(mysqlコマンドで確認してもOKやで)
スクリーンショット 2021-05-03 17.24.35.png

postsテーブルが生成されて
id, name, content, create_at, updated_atカラムが生成されていればOKやで。

postsテーブルのテストデータを作成するためのseederファイルを作成するで

$ docker-compose exec app php artisan make:seeder PostsTableSeeder
Seeder created successfully.

上記実行するとdatabase/seeders/PostsTableSeeder.phpが作成されるので開くと既存コードがあるので
function run()に下記を記載する(3レコード分を記載するで)

PostsTableSeeder.php
    public function run()
    {
        //書きを記載する
        \DB::table('posts')->insert([
            [
                'name' => 'モーリー',
                'content' => '肩トレ',
                'created_at' => date('Y-m-d H:i:s'),
                'updated_at' => date('Y-m-d H:i:s'),
            ],
            [
                'name' => 'ドンキーコング',
                'content' => 'バナナ食う',
                'created_at' => date('Y-m-d H:i:s'),
                'updated_at' => date('Y-m-d H:i:s'),
            ],
            [
                'name' => 'データベース太郎',
                'content' => 'データ投入',
                'created_at' => date('Y-m-d H:i:s'),
                'updated_at' => date('Y-m-d H:i:s'),
            ]
        ]);
    }

記載したらdatabase/seeders/DatabaseSeeder.phpに実行するための設定をするで

function run()に下記を記載する

DatabaseSeeder.php
    public function run()
    {
        $this->call([
            PostsTableSeeder::class,    //追記する
        ]);
    }

追記したら、seederを実行するで

//dump-autoload
$ docker-compose exec app composer dump-autoload 

// seedを実行する
$ docker-compose exec app php artisan db:seed
Seeding: Database\Seeders\PostsTableSeeder
Seeded:  Database\Seeders\PostsTableSeeder (28.15ms)
Database seeding completed successfully.

データベース確認する

スクリーンショット 2021-05-03 18.05.18.png

3レコード分を登録出来ていることを確認。

確認出来たらコミットしておこうな

add .
git commit -m "postsテーブル作成とテストデータ投入"

Postのバックエンドを構築する

mvcに沿ってバックエンドを作っていくな。

この辺が分からん人は個別にLaravelの勉強とかMVCフレームワークをなにか一個やっとくとええと思うわ。
20190709233353.png

Postモデルを作成

$ docker-compose exec app php artisan make:model Post

今回のプロダクトはメモとしてCRUDするだけやからモデルでロジック的な部分は実装なしやな。

Postコントローラーを作成

今回はApiでやり取りするから/Apiの下に作る

$ docker-compose exec app php artisan make:controller Api/PostController

①コントローラーを作成したら作成したファイルにindex()を作成する
②(Postモデルをuseしておく)

PostController.php
<?php

namespace App\Http\Controllers\Api;//追記

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Post;  //Postをモデルをuseする

class PostController extends Controller
{
    // postの一覧を表示する
    public function index()
    {
        $posts = Post::all();
        return response()->json($posts, 200);
    }
}

Post::all()でpostの一覧を取得してJOSNを返す

ルーティングを記載する

こちらもapiなので、routes/api.php

api.php
Route::group(['middleware' => 'api'], function(){
    Route::get('posts', 'App\Http\Controllers\Api\PostController@index');
});

//下記は使わないので削除しておく
//Route::middleware('auth:api')->get('/user', function (Request //$request) {
//    return $request->user();
//});

ここまで出来たら
ルーティング
コントローラー
モデル
の流れが出来たからAPIのテストして見るな

Postmanを使ってAPIテストしてみる

APIの開発現場で、よく使うツールやから使えるようにしといたらええと思うわ。

まぁcurlとかで、確認してもええと思うけど

設定に対して投げるURIを確認する

artisan route:listで現在の設定を確認できるで

% docker-compose exec app php artisan route:list
+--------+----------+-----------+------+-----------------------------------------------+------------+
| Domain | Method   | URI       | Name | Action                                        | Middleware |
+--------+----------+-----------+------+-----------------------------------------------+------------+
|        | GET|HEAD | api/posts |      | App\Http\Controllers\Api\PostController@index | api        |
|        | GET|HEAD | api/user  |      | Closure                                       | api        |
|        |          |           |      |                                               | auth:api   |
|        | GET|HEAD | {any}     |      | Closure                                       | web        |
+--------+----------+-----------+------+-----------------------------------------------+------------+

App\Http\Controllers\Api\PostController@indexを叩くには
http://localhost/api/postsをgetで叩けばいいことが分かるね。

Postmanでhttp://localhost/api/posts叩く

スクリーンショット 2021-05-04 0.55.49.png

JSON形式でDBに設定した3レコードがjson形式で返ってきたな。
React側でこのデータを取得すればええことが分かるね。
次のところでやっていくからここまで出来たら
コミットしておこうな

$ git add .
$ git commit -m "laravel側でindex()でpost一覧の取得を実装"

React側でデータを取得する

固定データを表示してるHome.jsにデータをを表示する部分をやっていくで。

既存コードにデータ取得用のコードを追記する

Home.js
import React, { useState, useEffect }　from 'react'; //1行目にuseStateを変更する
import axios from 'axios';　//追記する

useStyle();している下に
ステートの定義(posts)とaxiosの定義をする

Home.js
    //定義したスタイルを利用するための設定
    const classes = useStyles();  //既存コードなのでこの下に書く

    //postsの状態を管理する
    const [posts, setPosts] = useState([]);

　　//バックエンドからpostsの一覧を取得する処理
    axios
        .get('/api/posts')
        .then(response => {
            setPosts(response.data);     //バックエンドから返ってきたデータでpostsを更新する
            console.log(response.data);　//取得データ確認用のconsole.log()
        })
        .catch(() => {
            console.log('通信に失敗しました');
        });

    return (

ステートとはフロント側で状態を管理するために定義するもの。
初期値としてから配列を定義しておいてバックエンドから返ってきたresponse.dataで更新する。

axiosの説明記事
https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9

ビルドする

$ make npm-dev

画面リロードするとデータが取得できている事がわかる。

スクリーンショット 2021-05-03 18.55.34.png

３つデータが取れているが繰り返しリクエストが送られてしまっているため、useEffectを利用して対処する(詳しくは記事参照)

先程のコードに対して、axiosの処理部分を関数化してuseEffect()の中で呼び出すことで、画面についた際の一回だけリクエストするようにする

Home.js
import React, { useState, useEffect }　from 'react'; //useEffectする

    //画面に到着したらgetPostsDataを呼ぶ
    useEffect(() => {
        getPostsData();
    },[])

    //一覧情報を取得しステートpostsにセットする
    const getPostsData = () => {
        axios
            .get('/api/posts')
            .then(response => {
                setPosts(response.data);
            })
            .catch(() => {
                console.log('通信に失敗しました');
            });
    }

ビルドする

$ make npm-dev

スクリーンショット 2021-05-03 19.03.35.png
上記の様に、データが取れたらOK。画面についた時点では空の状態でその後リクエストが投げられてデータが取得出来ていることが分かるね

次はデータを一覧表示するためにrowsにpostsを繋ぎこむで

その前にコミットしておこうな

$ git add .
$ git commit -m "DBのpostsデータをフロント側で取得しステート(posts)にセット"

バックエンドから取得したデータを一覧表につなぎこむ

Home.js(旧コード)
let rows = [
    {
        name: "モーリー",
        content: "肩トレ",
        editBtn: <Button color="secondary" variant="contained">編集</Button>,
        deleteBtn: <Button color="primary" variant="contained">完了</Button>,
    },{
        name: "ドンキーコング",
        content: "バナナ補給",
        editBtn: <Button color="secondary" variant="contained">編集</Button>,
        deleteBtn: <Button color="primary" variant="contained">完了</Button>,
    },
];

getPostDataの下にpostsを整形したデータを入れるrowsを定義する

Home.js(新コード)
    const getPostsData = () => {
        axios
            .get('/api/posts')
            .then(response => {
                setPosts(response.data);
            })
            .catch(() => {
                console.log('通信に失敗しました');
            });
    }

    //空配列として定義する
    let rows = [];
    //postsの要素ごとにrowsで使える形式に変換する
    posts.map((post) =>
        rows.push({
            name: post.name,
            content: post.content,
            editBtn: <Button color="secondary" variant="contained">編集</Button>,
            deleteBtn: <Button color="primary" variant="contained">完了</Button>,
        })
    );

ちょっと何してるかわかりにくいかもしれんけど空配列rowsにmap中のpostのデータを整形して配列の要素として追加してるな。

バックエンド側から取得したデータ(posts)を フロントエンド側で使う形に整形する変数(rows)に加工し 表示

という流れはよく使うからマスターしとこうな

ビルドする

$ make npm-dev

表示確認

スクリーンショット 2021-05-03 19.20.11.png

一番下にデータ投入という行が追加されてたら、実装成功やで

纏め

フロントエンドからAPI叩いてデータ取得
データを整形して表示という部分をやっていったな。

次の⑤ではデータの新規登録をやっていくで

github乗っけとくわな。
https://github.com/morry48/LaravelReactTaskApp

ほな、LGTMよろしゅーやで

33
12
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
Sign upLogin
33
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?