LoginSignup
188
171

More than 1 year has passed since last update.

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

[簡単]React x LaravelのSPAで作るチュートリアル①(環境構築編)

Last updated at Posted at 2021-04-29

SPAで作るタスク管理アプリのチュートリアル

勉強会に参加したりするとReact.jsとかVue.jsやってみたくて勉強はしてるけど、LaravelとかRailsと、どうつなぎ込んでいいか分からんって人が多いみたいやな。

転職用のポートフォリオでもSPA化すると評価は上がるらしいな。知らんけど。

独立した技術として本とかUdemyで触ったりしてるけど、SPA化するような本とか記事は少ないみたいやから困ってる人もいるみたいやね。

かく言う私も初めてSPAのプロジェクトに参加したときは、なんのこっちゃ分かれへんかったけど、自分でタスク管理アプリ作ってJSONで繋ぎこむ部分が理解出来たら、あとはフロントとバックエンドは別世界で考えられるからちょっとワカル状態なんやな。

予定では

①環境構築(Docker/Laravel/React.js/Material-UI)
②React側でルーティング設定
③Reactで一覧テーブル作成
④seederで作ったDBのデータをReactに渡して一覧に表示
⑤新規登録機能
⑥編集・削除機能

みたいな感じで進めていくつもりや
Laravelに関してはJSON返すだけやから、普段Railsの人がこのチュートリアルやってみたら、
Railsに置き換えることは簡単やと思うわ。

React.jsとVue.jsの違いは語れるほど理解できてないから何も言わんとくわな。

下のGIFみたいな感じで作っていくで。
転職用のポートフォリオ考えてる人とかはこのチュートリアルやってから、
自分のアプリ作っていったらええんちゃうかな。

Image from Gyazo

前提

Gitをインストール

https://git-scm.com
Mac GitHub SSH接続設定をしておく

Dockerを使えるようにインストール

https://www.docker.com/products/docker-desktop
[注意]npmやyarnのインストールで下記のエラーが出たらコンテナ内のリソース配分の問題かもしれんから、
preferencesからCPUとかメモリの割当を増やしてみてほしい

各種バージョンについて

バージョンはこんな感じ
- php 　　　v8.0.3
- Laravel 　v8.40.0
- MySQL 　　v8.0
- npm　　　　v6.14.4
- Node.js　　v14.2.0
- React.js 　　v17.0.2
- Material-UI 　v4.11

記事書いた時点ではそれなりにモダンな選定やと思われるな

Laravelの環境構築

環境構築はこちらの記事を使わせてもらうな。
【忙しい人向け】カップ麺より早く作るDockerでLaravel開発環境構築
(@ucan-lab さん)
エイリアスを設定してくれていたりで、かなり使いやすいし、
爆速で構築できる且つ環境一致させるのに最適なので、ぜひ使ってみるとええで。
今回の記事はSPAでバックエンドとフロントエンドでデータのやり取りするところをメインにしたいから、サクッと環境作れるのはマジ神やな。
また@ucan-labさんが解説も詳細に書いてくれているので、dockerに強くなりたい人とかチュートリアル中にわからんコマンドとかあったら読んでみるとええでと思うで。(https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4)

文中に登場するmakeコマンドはエイリアスやからMakefile見てもらえば実行内容は分かるようにしてくれてはるわ。

まぁ、dockerは別にええわって人はなれてる環境で構築してくれても大丈夫やわ。
その場合makeコマンドのところはMakefile見て良しなに置き換えてくれな。

手順

$ git clone https://github.com/ucan-lab/docker-laravel.git
$ cd docker-laravel
# バージョンを合わせる場合は下記コマンドの前に*バージョン対応を参照
$ make create-project


------------
docker compose exec app php artisan migrate:fresh --seed
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (53.49ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (45.63ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (44.11ms)
Database seeding completed successfully.

// migrationが実行されてsuccessfullyまで走りきればOK!

ローカルで既にPortが使われてたりするとエラーが出るからそのへんはええ感じにかぶらんように変えてくれておけやで(例：docker-compose.ymlのportsのpublishedを3306→3307に変更、webのportsの場合も同様)

*バージョン対応

  • Makefileのまま環境構築すると最新版のLaravelとなるため、バージョンを合わせたい場合はgit cloneしたディレクトリ直下のMakefileで下記変更を行ってからmake create-projectを行う
#Makefile ６行目をバージョン指定に変える
-   docker-compose exec app composer create-project --prefer-dist laravel/laravel . # こちらは削除
+   docker-compose exec app composer create-project --prefer-dist "laravel/laravel=8.4" . #こちらに変える

localhostにアクセスしLaravelの初期画面が表示されたらOKな

スクリーンショット 2021-06-10 6.33.44.png

ホンマにカップ麺食う暇もなかったな

LGTM１００個ぐらい押したいところやわ。

DBクライアントを利用する場合

コマンドラインで進められる方はスルーしてもOKな
MySQLが8.0のためTablePlus等を利用する(SeaquelProは8.0非対応のはず)

手順通り行っった場合は以下が接続情報となるわ
Host: 127.0.0.1
Password:secret
Port: 3306
User: phper
Database: laravel_local

レコードはまだ存在しないもののuserテーブルとか出来てるの確認できたらOKやね

スクリーンショット 2021-06-10 6.35.49.png

ここまでできたら変更差分を分かりやすくするためにブランチを切ってコミットしておくとええな

$ git checkout -b taskApp
$ git add .
$ git commit -m "TaskAppInit"

Reactの環境構築

UIのパッケージをインストールし、Reactの導入

npm関連で手順通りやってThis is probably not a problem with npm. There is likely additional logging output above.が出る場合はdockerのリソースの問題かもしれないから書いておくな

# npmを使えるようにしておく
$ make npm

# UIパッケージ導入
$ docker-compose exec app composer require laravel/ui

# React.js導入
$ docker-compose exec app php artisan ui react --auth

# 下記の様の出たらOK
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

npmでビルド

$ make npm-install

$ make npm-dev

コマンドにより生成された不要なファイルを削除しておく

resources/viewsの下はシングルページとするためapp.blade.phpのみとする

  • 下記4項目を削除する
    • /auth以下
    • layouts - (app.blade.phpをviews直下に移動させlayoutsディレクトリ自体を削除)
    • home.blade.php
    • welcome.blade.php
# 削除後にresources/viewsディレクトリ下は下記のようになっていればOK
resources
  ┗ views
    ┗ app.blade.php (layouts下に出来ていたものをviews下に移動する)

views/app.blade.phpを修正

  • 既存のコードに対してid="app"の中身を空っぽにするで
# views/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
    # id="app"の中身を空する変更
    </div>
</body>
</html>

resources/js/components/Example.jsを修正

  • id="app"としたため、getElementByIdを下記のように変更
    • example→app
Example.js
// 20行目以下を修正
export default Example;

if (document.getElementById('app')) {
    ReactDOM.render(<Example />, document.getElementById('app'));
}

routes/web.phpを修正

  • シングルページアプリケーションなのでどんなURLだったとしても/views/app.blade.phpを表示するように設定します。
web.php

// 既存コードの16行目以下を削除
// Route::get('/', function () {
//     return view('welcome');
// });

// Auth::routes();

// Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

// 追記
Route::get('{any}', function () {
    return view('app');
})->where('any','.*');
  • Reactを読み込む準備できたのでビルドする
$ make npm-dev
  • 画面をリロードしてExample Componentという文字列が表示されたらReactの導入はOK スクリーンショット 2021-04-29 16.26.16.png

これは何が表示されているかというとresources/js/components/Example.jsの中身が表示されている
laravel側のid="app"にExampleコンポーネントの中身を表示しているんやな

試しに下記変更を加えてみるな

  • Example.jp
    • className="card-headerの文字列
      • Example Component →　React導入できたわな？？
Example.js

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">React導入できたわな？？</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('app')) {
    ReactDOM.render(<Example />, document.getElementById('app'));
}

ビルド(make yarn-dev)すると下記のように表示されるはずやな

スクリーンショット 2021-04-29 16.33.39.png

Reactで修正したのに「あれ、、変わらん」みたいなことあるけど、だいたいビルド忘れてるか、キャッシュリロードできてないかどっちかのはずやわ。

ここまで来たらコミットしとこうな

$ git add .
$ git commit -m "React導入"

Material-UIを導入

日本語の公式ドキュメントがある
- MATERIAL-UI

そもそも何やねんって話なんやけどGoogleが提唱してるマテリアルデザインを実現するためのUIフレームワークで、
手っ取り早く見た目がええ感じになるから使っていくな。
https://qiita.com/nogson/items/804dd3a879f482fb7018

ドキュメント通りに進めればOKやから下記のコマンドで進めていくで

# コンテナ内でインストール
docker-compose exec web npm install @material-ui/core

ボタンをインポートしExample.jsの中で表示してみる

Example.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@material-ui/core'; //Buttonをインポート

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">React導入できたわな</div>

                        <div className="card-body">Im an example component!</div>
                        //ボタンを追記
                        <Button color="primary" variant="contained">Hello World</Button> 
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('app')) {
    ReactDOM.render(<Example />, document.getElementById('app'));
}

ビルド、リロードしてHELLO WORLDボタンが表示されたらMaterial-UIの導入はOK
スクリーンショット 2021-04-29 17.05.44.png

ドキュメントがしっかりしているので参考にしながら弄ってみるといいかもしれないな

追加したボタンを以下のように書き換えてみる

Expamle.js
  <Button color="secondary" variant="contained">ワイがMaterial-UIのボタンやな？？</Button>

基本的にインポートしたものはタグ的な感じで使えて
colerとかで簡単に見た目変えたりできるねん。
便利やな。

スクリーンショット 2021-04-29 17.09.59.png

マウスオーバーすると色が変わるようになってたり
色々タグやテンプレートがあったりするからイジってみるとええちゃうかな。

コミットしておくな

git add .
git commit -m "Material-UIの導入"

今日はここまでやわ。

次回はReactでルーティングの設定

react-router-domというライブラリ使って書きみたいなページ遷移する部分を実装していくで

Image from Gyazo

ほな、LGTMよろしゅーやで。
ソースはGitHubに乗せておくから分からんときはコミット履歴見たら解決できるかもな。
https://github.com/morry48/LaravelReactTaskApp

188
171
3

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
188
171