【市場価値がわかる】エンジニア転職におすすめなサイト

Laravel9ニュースサイト②環境構築【Laravel9×React×TailwindCSS】

Larattoサムネ

前回までの記事

  1. ニュースサイト概要

開発環境

環境バージョン
MacBook AirMonterey 12.2.1
Docker20.10.7
PHP8.1
composer2.2.9
Laravel9.5.1
apache2.4
MySQL8.0
phpmyadmin
npm8.5
node12.22.11
React17
TailwindCSS3
Laravel/breezeログイン認証機能で使用
※Laravel8以降の場合に使用可。
Laravel6や7系はreact –authとか使います。
この記事でやること
  • dockerとLaravelの基本的な環境構築を済ます
  • 認証機能であるbreezeをインストール
  • ReactとTailwindCSSをセットアップ

以下の記事では、laravel_todoでディレクトリを作成していますが、お好みのサイト名で!

私の場合は、プロジェクト名は「Laratto」にしました。

困ったら、「yaaaaaa」(なかやまきんに君風)でもいいです。

また、下記の記事の.envは今回のプロジェクト用にしましょう。

上記の記事で、Laravel初期画面とphpmyadminにアクセスできてusersテーブルが作成されていればOKです。

ここからLaravel8系から使えるbreezeで認証機能(新規登録やログイン、ログアウト)、React、TailwindCSSの環境構築を追加していきます。
※Laravel6や7系だとbreezeは使えないので、uiコマンドを使うかと。この辺りは各自でお調べください。

breezeはTailwindcssをベースに作成されているので、breezeをインストールするとTailwindcssのインストールや設定が自動的にされます。

phpコンテナに入って各自実行していきます。

Contents

breeze&TailwindCSS

まずは、breezeが使えるように以下を実行しましょう。

/var/www# composer require laravel/breeze --dev

breezeをインストールします。

/var/www# php artisan breeze:install

npm install && npm run devは後ほど実行します。

この時点でpackage.jsonを確認すると、tailwindcssなどがすでに入っていることが確認できます。

    "devDependencies": {
        "@tailwindcss/forms": "^0.4.0",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "postcss-import": "^14.0.2",
        "tailwindcss": "^3.0.18"
    }

さらに、src/resources/css/app.cssを見てみると、tailwindcssを使用するのに必要な記述がbreezeをインストールしたことで自動的に追加されています。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

TailwindCSSの設定であるsrc/tailwind.config.jsも追加されているので以下のように少し処理を追加します。

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/*.blade.php',
        './resources/views/**/*.blade.php',
        './resources/views/**/**/*.blade.php',
        './resources/js/*.js',
        './resources/js/**/*.js',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

ここで一旦、ビルドします。※最初のビルドなので結構時間かかります。

/var/www# npm install && npm run dev

ビルドに成功すると以下のようになり、public > css, public > jsにビルドされます。

React

Reactをインストールしていきましょう。

/var/www# npm i -D react react-dom @types/react @types/react-dom

packeage.jsonを確認すると、Reactもインストールできていますね。

    "devDependencies": {
        "@tailwindcss/forms": "^0.4.0",
        "@types/react": "^17.0.43",
        "@types/react-dom": "^17.0.14",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "postcss-import": "^14.0.2",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "tailwindcss": "^3.0.18"
    }

最後にもう一度、npm install && npm run devします。

/var/www# npm install && npm run dev

必要なものがインストールできたか確認

ここまでで全てインストールできたかバージョンを確認してみましょう。

/var/www# npm list --depth=0
www@ /var/www
...
+-- react-dom@17.0.2
+-- react@17.0.2
`-- tailwindcss@3.0.23

React17,tailwindcss3がインストールできています。

ブラウザでも確認してみましょう。
※私の環境では、http://localhost:28878でWEB画面、http://localhost:28898でphpmyadminにアクセスできるように設定しています。各々の環境で設定した内容で確認してください。

http://localhost:28878

右上にLog in Registerがあるのでそれぞれクリックすると、ログイン画面と新規登録画面にいけます。

新規登録画面

ログイン

上記でユーザーの新規登録すると、usersテーブルにデータが保存され、ダッシュボードにリダイレクトされる挙動となっています。

breezeの認証機能を理解する

新規登録・ログインの機能は、web.phpを見てみると以下のように記述されています。

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth'])->name('dashboard');

require __DIR__.'/auth.php';

/registerや/loginにアクセスすると、新規登録やログイン画面が表示されるのですが、この辺りの処理はauth.phpに記述されています。

<?php

use App\Http\Controllers\Auth\AuthenticatedSessionController;
use App\Http\Controllers\Auth\ConfirmablePasswordController;
use App\Http\Controllers\Auth\EmailVerificationNotificationController;
use App\Http\Controllers\Auth\EmailVerificationPromptController;
use App\Http\Controllers\Auth\NewPasswordController;
use App\Http\Controllers\Auth\PasswordResetLinkController;
use App\Http\Controllers\Auth\RegisteredUserController;
use App\Http\Controllers\Auth\VerifyEmailController;
use Illuminate\Support\Facades\Route;

Route::middleware('guest')->group(function () {
    Route::get('register', [RegisteredUserController::class, 'create'])
                ->name('register');

    Route::post('register', [RegisteredUserController::class, 'store']);

    Route::get('login', [AuthenticatedSessionController::class, 'create'])
                ->name('login');

    Route::post('login', [AuthenticatedSessionController::class, 'store']);

    Route::get('forgot-password', [PasswordResetLinkController::class, 'create'])
                ->name('password.request');

    Route::post('forgot-password', [PasswordResetLinkController::class, 'store'])
                ->name('password.email');

    Route::get('reset-password/{token}', [NewPasswordController::class, 'create'])
                ->name('password.reset');

    Route::post('reset-password', [NewPasswordController::class, 'store'])
                ->name('password.update');
});

Route::middleware('auth')->group(function () {
    Route::get('verify-email', [EmailVerificationPromptController::class, '__invoke'])
                ->name('verification.notice');

    Route::get('verify-email/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
                ->middleware(['signed', 'throttle:6,1'])
                ->name('verification.verify');

    Route::post('email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
                ->middleware('throttle:6,1')
                ->name('verification.send');

    Route::get('confirm-password', [ConfirmablePasswordController::class, 'show'])
                ->name('password.confirm');

    Route::post('confirm-password', [ConfirmablePasswordController::class, 'store']);

    Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
                ->name('logout');
});

上記を見てみると、新規登録やログインの処理は、RegisteredUserControllerで処理されていることがわかりますね。

なので、RegisteredUserControllerを見にいきましょう。

src/app/Http/Controllers/Auth/RegisteredUserController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use App\Providers\RouteServiceProvider;
use Illuminate\Auth\Events\Registered;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules;

class RegisteredUserController extends Controller
{
    /**
     * Display the registration view.
     *
     * @return \Illuminate\View\View
     */
    public function create()
    {
        return view('auth.register');
    }

    /**
     * Handle an incoming registration request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\RedirectResponse
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'confirmed', Rules\Password::defaults()],
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        event(new Registered($user));

        Auth::login($user);

        return redirect(RouteServiceProvider::HOME);
    }
}

createアクションではauth.registerのビューファイルをreturnし、storeアクションではユーザーの保存処理をしたらRouteServiceProvider::HOMEにリダイレクトするように書いてあります。

breezeをインストールしたときに、resources > views > auth配下にlogin.blade.phpやregister.blade.phpが追加されます。

なので、最終的にこれらのビューファイルを読みこんで先ほどの画面を表示していることがわかります。

さらに、RouteServiceProvider::HOMEとあるので、リダイレクト指定しているsrc/app/Providers/RouteServiceProvider.phpを見にいきます。

<?php

namespace App\Providers;

use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Facades\Route;

class RouteServiceProvider extends ServiceProvider
{
    /**
     * The path to the "home" route for your application.
     *
     * This is used by Laravel authentication to redirect users after login.
     *
     * @var string
     */
    public const HOME = '/dashboard';

    /**
     * Define your route model bindings, pattern filters, etc.
     *
     * @return void
     */
    public function boot()
    {

真ん中あたりにpublic const HOME = ‘/dashboard’;とデフォルトでは指定されてあります。

なので、開発を進めていく中でユーザーが新規登録やログインした後のリダイレクト先を変更したい場合は上記を変更すればいいです。

TailwindCSSが効くかテストしてみる

最後にTailwindCSSが効くか試してみましょう。

TailwindCSSでスタイルを変更した場合は、npm run devでソースをビルドして反映する必要があります。

しかし….いちいちnpm run devでビルドするのはめんどくさい….

npm run watchを使いましょう。
ソースが変更されたか監視してくれます。
ソースを変更したら、macならコマンド+Sで下書き保存することでビルド開始します。

/var/www# npm run watch

私が実際に開発するときは、ターミナルを3つ起動させています。※1つ目は、Laratto % , 2つ目は、/var/www# phpコンテナに入った状態でphp artisanコマンドを実行するもの, 3つ目は/var/www# でnpm run watchを実行している状態。

それでは、TailwindCSSでスタイルの変更を試してみましょう。

以下を実行した状態でスタイルを変更します。

/var/www# npm run watch

src/resources/views/test.blade.phpを作成し、web.phpは以下のように/testにアクセスしたときにtest.blade.phpを呼ぶようにします。

test.blade.phpを以下のように編集します。※ビルドされたcss/app.cssを読み込まないとスタイルは反映されません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Styles -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div class="text-2xl font-bold text-red-500">TailwindCSSスタイルテスト</div>
</body>
</html>

以下のように出力されればOKです。

今後の開発でもそうですが、npm run watchでスタイルがある程度できたら最後にnpm run devを実行しましょう。

なぜなら、不要なcssスタイルを削除してくれるので、cssファイルが軽くなるメリットがありますからです。

TailwindCSSのスタイルテストもできたので、test.blade.phpは削除し、test.blade.phpで追加したweb.phpも削除します。

// テスト用
Route::get('/test', function() {
    return view('test');
});

ここまでお疲れ様でした。

環境構築は以上になるので、気分転換に外の空気でも吸ってきて、実際に開発していきましょう!

>>>③総合トップ画面の作成へ進む

スキルを売り買いするならココナラ

オンライン動画学習ならUdemy

コメント

コメントする

CAPTCHA


Contents
閉じる