カテゴリー: システム開発技術

はじめに

LaravelはPHPフレームワークの中でも人気が高く、フロントエンドとの連携が簡単に行えます。本記事では、Laravel 11にBreezeを導入し、ReactとTypeScriptを使ったモダンな開発環境をローカルで構築する手順を紹介します。

必要なツールと環境

事前に以下のツールをインストールしておきましょう。

• PHP (バージョン8.1以上)
• Composer
• Node.js (LTS推奨)
• npm または Yarn
• データベース (例: MySQL)

また、Laravelの開発環境としてLaravel Sailを利用することもおすすめです。

環境構築手順

Laravel 11 プロジェクトの作成

まず、Composerを使って新しいLaravel 11プロジェクトを作成します。

composer create-project laravel/laravel laravel-react-ts

cd laravel-react-ts

Breezeのインストールと設定

Laravel Breezeは、認証を簡単にセットアップできる軽量なスターターパックです。

composer require laravel/breeze --dev

インストールが完了したら、BreezeをReactとTypeScriptオプション付きでセットアップします。

php artisan breeze:install react --typescript

npmパッケージのインストールとビルド

以下のコマンドを実行して、必要なnpmパッケージをインストールします。

npm install

コマンドを実行することで、フロントエンドの開発サーバーが起動します。

npm run dev

Laravel Debugbar追加

composer require --dev barryvdh/laravel-debugbar

設定ファイルの公開

php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

データベースの設定

.envファイルを編集して、データベースの接続情報を設定します。

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_db DB_USERNAME=root
DB_PASSWORD=your_password

設定を反映するために、以下のコマンドを実行してデータベースをマイグレーションします。

php artisan migrate

ローカル開発サーバーの起動

以下のコマンドでLaravelの開発サーバーを起動します。

php artisan serve

ブラウザでhttp://localhost:8000を開き、Laravelのトップページが表示されることを確認します。

Breeze + React + TypeScriptの動作確認

Breezeの初期セットアップにより、ログイン・登録画面がReactとTypeScriptで構築されています。これらの画面が正しく動作しているか確認しましょう。

よくある問題と解決策

npmパッケージのインストール時にエラーが発生する

依存関係の不整合が原因の場合があります。以下のコマンドで解決できる場合があります。

npm install --legacy-peer-deps

おわりに

この記事では、Laravel 11、Breeze、React、TypeScriptを使ったモダンな開発環境を構築する手順を紹介しました。この環境を基に、さらなるカスタマイズやプロジェクトの開発を楽しんでください！

はじめに

Laravelは、PHPの中でも便利なWebフレームワークの一つです。そしてReactは、モダンなUIの構築に便利なJavaScriptライブラリです。この記事では、Laravel 11とReactをインストールし、認証機能も含めたアプリの構築手順を解説します。デザイン系パッケージを使用するアプローチも追加しています。

システムの前提条件

• macOS
• PHP 8.2+ (バージョンにより違う可能性があります)
• Composer
• Node.js (最新バージョン)
• NPMまたはYarn

Laravelの新規プロジェクト作成

Laravelのプロジェクトを作成します。

composer create-project laravel/laravel laravel-react "^11.0"

既存のディレクトリに作成する場合、gitlabなどからクローン後などはクローン後などは一度空にしてから行う

composer create-project laravel/laravel . "^11.0"

プロジェクトディレクトリに移動します。

cd laravel-react

Laravelをローカルサーバーで起動して、正常に動作しているか確認します。

php artisan serve

ブラウザでhttp://127.0.0.1:8000を開き、Laravelのデフォルトページが表示されれば成功です。

Laravel Debugbar追加

composer require --dev barryvdh/laravel-debugbar

設定ファイルの公開

php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

Reactのインストール

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

composer require laravel/ui
php artisan ui react
npm install
npm run dev

この段階でReactのフロントエンドツールが構築され、resources/jsにReactのファイルが追加されます。

React Developer Toolsの追加

React Developer Toolsは、Reactアプリケーションのデバッグを支援するChrome拡張機能です。以下のリンクからインストールできます。

インストール後、Chromeのデベロッパーツールに「Components」や「Profiler」タブが追加され、Reactコンポーネントの構造や状態を視覚的に確認できます。

React Developer Toolsリンク

Breezeによる認証機能の構築

LaravelのBreezeパッケージを使用すると、認証機能を快速に構築できます。

Breezeのインストール

composer require laravel/breeze --dev
php artisan breeze:install react
npm install
npm run dev

.envを編集しMySQLを設定する：MySQLの起動が必要

rootやパスワードを変更の際は、MySQLから作成する必要がある。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=local_XXXX
DB_USERNAME=root
DB_PASSWORD=

DBなど作成する

php artisan migrate

ブラウザで認証ページを確認します。

http://127.0.0.1:8000/register

http://127.0.0.1:8000/login

認証関連の画面が正常に表示されれば完了です。

デザイン系パッケージの追加

最近のUIフレームワークを利用すると、デザイン構築が楽になります。下記はTailwind CSSを使用する例です。

Tailwind CSSのインストールinit

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.jsに構成を追加：既にある場合は作業不要

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Tailwind CSSをresources/css/app.cssで有効化：既にある場合は作業不要

@tailwindディレクティブを追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

CSSをビルド

npm run dev

Tailwind CSSが適用されることを確認LaravelのBladeテンプレート内でTailwindのクラスを使用して、デザインが適用されるか確認します。

開発の次のステップ

• コンポーネントの分割: Reactコンポーネントを分割して再利用性を高める。
• APIとの連携: LaravelのAPIとReactを連携して動的な機能を実装。
• テスト: LaravelのPHPUnitとReactのJestを活用してテスト環境を整える。
• デプロイ: 本番環境にデプロイし、パフォーマンスを最適化。

これでLaravel 11とReactを組み合わせたアプリケーションの基本的なセットアップが完了です！ Tailwind CSSを使用してデザインも強化されたため、次のステップとしてアプリケーションの機能拡張を進めてみてください。

Laravelは、認証機能を迅速に実装できる強力な機能を提供しています。本記事では、Laravel 11を使用して、CoreUIデザインテンプレートで認証機能を実装する方法を解説します。

Laravel 11のインストール

まずはLaravel 11をインストールします。以下のコマンドで新しいLaravelプロジェクトを作成します。

composer create-project --prefer-dist laravel/laravel laravel-auth-example

インストールが完了したら、プロジェクトディレクトリに移動します。

cd laravel-auth-example

CoreUIテンプレートのインストール

CoreUIは、管理画面向けのレスポンシブでモダンなデザインテンプレートです。CoreUIを使用するために、まずnpmを使って依存関係をインストールします。

npm install @coreui/coreui

次に、resources/js/app.jsにCoreUIのスタイルとスクリプトをインポートします。

import { createApp } from 'vue'
import CoreUI from '@coreui/coreui';
import App from './App.vue';

CoreUIのスタイルシートも追加します。

import '@coreui/coreui/dist/css/coreui.min.css';

Laravelの認証機能をセットアップ

Laravel 11では、artisanコマンドを使用して簡単に認証機能を設定できます。以下のコマンドで認証機能をインストールします。

composer require laravel/ui php artisan ui vue --auth npm install npm run dev

これで、基本的な認証機能（ログイン、登録、パスワードリセット機能）がインストールされます。

CoreUIスタイルに合わせたカスタマイズ

次に、認証ビューをCoreUIに合わせてカスタマイズします。resources/views/authディレクトリ内のファイル（login.blade.php、register.blade.php など）を開き、CoreUIのコンポーネントを使用してデザインを調整します。

例えば、ログインフォームのデザインを次のように変更します。

<div class="c-card">
    <div class="c-card-header">
        <h4 class="card-title">ログイン</h4>
    </div>
    <div class="c-card-body">
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="form-group">
                <label for="email">メールアドレス</label>
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autofocus>
                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            <div class="form-group">
                <label for="password">パスワード</label>
                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required>
                @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            <button type="submit" class="btn btn-primary btn-block">ログイン</button>
        </form>
    </div>
</div>

認証後のリダイレクト設定

認証が成功した後、ユーザーをどのページにリダイレクトするかを設定するには、app/Http/Controllers/Auth/LoginController.phpのredirectToプロパティを設定します。

protected $redirectTo = '/dashboard';

これで、ログイン後にユーザーがダッシュボードページにリダイレクトされるようになります。

CoreUIダッシュボードの作成

次に、ログイン後に表示されるダッシュボードページを作成します。resources/views/dashboard.blade.phpを作成し、CoreUIのコンポーネントを使用して管理画面をデザインします。

<div class="c-dashboard">
    <h1>ダッシュボード</h1>
    <p>ようこそ、{{ Auth::user()->name }} さん！</p>
</div>

ユーザーの作成

usersテーブルのデータを作成する

php artisan make:seeder UsersTableSeeder 

シーダーファイルサンプル

database/seeders/UsersTableSeeder.php

use Illuminate\Database\Seeder;
use App\Models\User;

class UsersTableSeeder extends Seeder
{
    public function run()
    {
        // 管理者ユーザーを作成
        User::create([
            'name' => 'Admin User',
            'email' => 'admin@example.com',
            'password' => bcrypt('password123'), // パスワードは必ずハッシュ化
        ]);

        // 一般ユーザーを複数作成
        User::factory()->count(10)->create(); // Factoryが利用可能な場合
    }
}

DatabaseSeeder に登録

public function run()
{
    $this->call([
        UsersTableSeeder::class,
    ]);
}

シーディングを実行

php artisan db:seed

認証機能の確認

http://127.0.0.1:8000/loginへアクセス

ログイン後の画面

セキュリティ強化の設定

Laravelはデフォルトでセキュリティが強化されていますが、必要に応じて、config/auth.phpや.envファイルで詳細な設定を行うことができます。特に、パスワードのハッシュアルゴリズムやセッションの設定などを確認しておきましょう。

結論

Laravel 11とCoreUIを使用することで、迅速に美しい認証機能を実装できます。基本的なセットアップが完了した後は、デザインやユーザー体験をカスタマイズして、自分のプロジェクトに最適な認証機能を作り上げていきましょう。

Laravelは、使いやすいフレームワークとして多くの開発者に支持されています。しかし、デザイン面で魅力的なテンプレートを無料で探すのは意外と手間がかかるものです。この記事では、無料で使えるおすすめのLaravelデザインテンプレートをいくつかご紹介します。また、これらを使って数名のユーザーがログインし、データを更新し、APIでWordPressと連携する方法についても解説します。

無料のLaravelデザインテンプレートの特徴

無料で提供されているLaravelテンプレートの中には、以下のような特徴を持つものが多いです。

• レスポンシブデザイン対応
• シンプルかつモダンなUI
• カスタマイズが容易
• 一般的な認証システムの統合済み

以下に具体例を挙げていきます。

おすすめLaravelデザインテンプレート

AdminLTE

AdminLTEは、Laravelで使える無料の管理画面テンプレートとして非常に人気があります。Bootstrapをベースにしており、管理者用ダッシュボードや統計情報の表示に最適です。

• 特徴：カスタマイズ性が高い、多彩なUIコンポーネント
• ダウンロード：公式サイト

CoreUI

CoreUIは、軽量で使いやすいLaravel用の無料テンプレートです。基本的な管理画面を素早く構築でき、API連携にも適しています。

• 特徴：多言語対応、グラフやチャート機能
• ダウンロード：公式サイト

Material Dashboard Laravel

Material DashboardはGoogleのMaterial Designを基に作られたテンプレートです。視覚的に洗練されており、ユーザーエクスペリエンスを向上させます。

• 特徴：カラフルで視覚的に魅力的なデザイン
• ダウンロード：公式サイト

ユーザーがログインしデータを更新する仕組み

Laravelを使うことで、数名のユーザーがログインしてデータを更新する機能を簡単に構築できます。以下のステップで進めることができます。

認証機能の実装

Laravelの認証機能はphp artisan make:authコマンド（Laravel 8以降ではlaravel/uiパッケージを使用）を実行するだけでセットアップできます。

データ更新機能の構築

• ルーティング：routes/web.phpでルートを設定します。
• コントローラー：php artisan make:controllerコマンドでコントローラーを作成し、データ更新ロジックを記述します。
• ビュー：Bladeテンプレートを使用して、データ入力フォームを作成します。

APIでWordPressとデータ連携

LaravelからWordPressにデータを連携するためには、REST APIを利用します。以下はその流れです。

WordPress REST APIの設定

WordPressには標準でREST APIが組み込まれています。/wp-json/wp/v2/postsエンドポイントを使用して投稿データを更新できます。

LaravelからAPIを呼び出す

LaravelではGuzzleHTTPやHttpファサードを使用してAPIを呼び出せます。

トークン認証の設定

WordPressのAPIを利用するには、認証が必要です。JWT Authentication for WP REST APIプラグインを導入し、適切なアクセストークンを発行します。

まとめ

Laravelの無料デザインテンプレートを活用することで、迅速に美しいアプリケーションを開発できます。また、ログイン機能やデータ更新機能を組み込み、APIでWordPressと連携することで、高度な機能を持つアプリケーションを実現できます。ぜひ、この記事を参考にして開発を進めてみてください。

[temp id=3]

Laravelは、モダンなWebアプリケーションを開発するためのPHPフレームワークです。この記事では、MacにLaravelをインストールし、簡単な開発環境を構築する方法を解説します。

Laravel var11

Laravelインストールの前提条件

Laravelをインストールするためには、以下のソフトウェアが必要です。

必要なソフトウェア

1. Homebrew（Mac用のパッケージマネージャ）
2. PHP（バージョン8.x以上を推奨）
3. Composer（PHPの依存管理ツール）
4. Node.js（フロントエンドアセットの管理用）

必要なソフトウェアのインストール

1 Homebrewのインストール

Homebrewを使うと、Macに必要なソフトウェアを簡単にインストールできます。ターミナルを開き、以下のコマンドを実行してください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストールが終わったら、brew コマンドが正しく動作するか確認します。

brew --version

PHPのインストール

Homebrewを使ってPHPをインストールします。

brew install php

インストール後、以下のコマンドでPHPのバージョンを確認します。

php -v

Composerのインストール

次に、Composerをインストールします。

brew install composer

インストール後、以下のコマンドでComposerのバージョンを確認します。

composer --version

Node.jsのインストール

Laravelのフロントエンドアセットを管理するために、Node.jsをインストールします。

brew install node

インストール後、以下のコマンドでNode.jsとnpmのバージョンを確認します。

node -v npm -v

Laravelプロジェクトの作成

新しいLaravelプロジェクトの作成

以下のコマンドを実行して、Laravelプロジェクトを作成します。

composer create-project --prefer-dist laravel/laravel my-project

これにより、my-project という名前のLaravelプロジェクトが作成されます。

プロジェクトフォルダに移動

作成したプロジェクトのフォルダに移動します。

cd my-project

開発サーバの起動

以下のコマンドでLaravelの開発サーバを起動します。

php artisan serve

起動が成功すると、次のようなメッセージが表示されます。

Starting Laravel development server: http://127.0.0.1:8000

ブラウザで http://127.0.0.1:8000 にアクセスすると、Laravelのウェルカムページが表示されます。

フロントエンドアセットのセットアップ

Laravelのフロントエンドアセットを利用するには、Node.jsを使って依存関係をインストールする必要があります。

依存関係のインストール

以下のコマンドを実行して、node_modules をインストールします。

npm install

開発用アセットのビルド

以下のコマンドでフロントエンドアセットをビルドします。

npm run dev

これにより、Laravelのフロントエンドアセットが開発環境で使用できるようになります。

まとめ

これで、MacにLaravelをインストールし、開発環境を構築する手順が完了しました。以下の手順を実行すれば、いつでもプロジェクトを再開できます。

1. プロジェクトディレクトリに移動：cd my-project
2. 開発サーバを起動：php artisan serve

Laravelを使えば、簡単にモダンなWebアプリケーションを開発できます。ぜひ、今回の手順を参考にして、Laravelでの開発を楽しんでください！