LoginSignup
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@spuall24

Laravel 11 & React でサービス作成【環境構築編】

Posted at

最終的に作るもの

  • laravelとreactを使用したwebサービス
  • amazonの欲しいものリストを取得して商品ごとにメモを作成

サービスでやりたいこと

  • googleアカウントもしくはメールアドレス&パスワードでユーザー登録をする。
  • amazonアカウントと紐付けして欲しいものリストを取得（複数のリストの取得可能）
  • 欲しいものリストを指定して取得可能（リンクから取得）

この記事でやること

Laravel & React の環境構築

Laravelのインストール

  • 公式サイトのインストールガイドを参考にLaravelをインストールする
    PHPとComposerがすでにインストールされていたので、Composer経由で Laravelインストーラーをインストールした
composer global require laravel/installer

プロジェクトを作成

  • プロジェクトを作成したい場所に移動
    cd xxxxで作成場所に移動
  • laravel new xxxxでプロジェクトを作成
  • 「スターターキットをインストールするかどうか」を尋ねられるのでNo starter kitを選択
 ┌ Would you like to install a starter kit?────────────────────┐
 │ › ● No starter kit                                          │
 │   ○ Laravel Breeze                                          │
 │   ○ Laravel Jetstream                                       │

選択肢の説明

  • No starter kit（デフォルト）
    • 認証機能やUIは追加されません。
    • 最小限のLaravelプロジェクトがセットアップされます。
    • 自分で認証機能やフロントエンドを追加したい場合に適しています。
  • Laravel Breeze
    • 簡単な認証機能（ログイン、ログアウト、登録など）が含まれます。
    • Tailwind CSSがデフォルトで組み込まれた軽量なスターターキット。
    • 基本的な認証機能をすぐに使いたい場合に適しています。
  • Laravel Jetstream
    • 高度な認証機能（チーム管理、APIトークン管理など）を含みます。
    • Tailwind CSSに加え、LivewireまたはInertia.jsを使用する選択肢があります。
    • 複雑な認証やチーム管理が必要な場合に適しています。
  • テストフレームワークとしてPestまたはPHPUnitを選択するか聞かれるのでPestを選択
Which testing framework do you prefer? ──────────────────────┐
 │ › ● Pest                                                  │
 │   ○ PHPUnit                                               │

選択肢の特徴

  • Pest
    • モダンで簡潔な記法を特徴とするテストフレームワーク。
    • PHPUnitをベースに構築されているため、PHPUnitの拡張機能や既存のスキルを活用可能。
    • テストコードが読みやすく、学習曲線が緩やか。
    • 初心者にとっても取り組みやすい。
  • PHPUnit
    • Laravelにデフォルトで含まれている、PHPの標準的なテストフレームワーク。
    • 非常に柔軟で、PHPの大規模なプロジェクトでも広く使用されています。
    • Pestほどシンプルではないが、Laravelの公式ドキュメントやリソースが豊富。
  • データベースは何を使うか聞かれるのでMariaDBを選択
 ┌ Which database will your application use? ───────────────────┐
 │ › ● SQLite                                                   │
 │   ○ MySQL                                                    │
 │   ○ MariaDB                                                  │
 │   ○ PostgreSQL                                               │
 │   ○ SQL Server (Missing PDO extension)                       │
  • 「デフォルトのデータベースマイグレーションを実行するか」聞かれるのでYesを選択
 ┌ Default database updated. Would you like to run the default database migrations? ┐
 │ ● Yes / ○ No

選択肢の説明

  • Yes
    Laravelが提供する初期のデータベース構造（users、password_resets などのテーブル）をMariaDBに作成します。
    すぐにユーザー登録や認証機能を追加する準備が整います。
    初期状態でマイグレーションを実行することをおすすめします。
  • No
    初期のテーブルを作成しません。手動でマイグレーションを実行したり、後でカスタムテーブルを作成したい場合に選択します。
    必要になるまでマイグレーションを保留にしたい場合に有効です。

これでLaravelの初期状態のデータベース構造（users テーブルなど）がMariaDBに作成されました。

Reactのセットアップ

  • ReactをLaravelプロジェクトのルートディレクトリにインストールする
npm install react react-dom
  • React用のBabelプリセットをインストール
npm install --save-dev @babel/preset-react
  • Reactのエントリーポイントを作成
    既存のresources/js/app.jsを削除してapp.jsxを作成、以下を記述する。
import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
    return <h1>Hello, React in Laravel!</h1>;
};

ReactDOM.createRoot(document.getElementById('app')).render(<App />);
  • BladeファイルでReactをレンダリング
    resources/views/welcome.blade.phpに以下を追加
<head>
// 省略
    @viteReactRefresh // これがないとapp.jsxgホットリロードされない
    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
</head>

<div id="app"></div>
@vite('resources/js/app.jsx')
  • Laravelのvite.config.jsにReactプラグインを追加
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});
  1. 必要なパッケージをインストール
    @vitejs/plugin-react をインストールします。
npm install @vitejs/plugin-react
npm install vite@latest @vitejs/plugin-react@latest --save-dev
  • 開発サーバーの起動
  • Viteの開発サーバーを起動してReactをレンダリングできるか確認
npm run dev

出力はこんな感じ

> dev
> vite

  VITE v5.4.11  ready in 423 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v11.34.2  plugin v1.1.1

  ➜  APP_URL: http://localhost

サーバーを起動

php artisan serve
  • DBとの接続エラーが発生
    DBが存在するか確認
mysql --version

以下が表示されなければ作成が必要

mysql  Ver 15.1 Distrib 10.6.14-MariaDB, for osx10.16 (x86_64) using readline 5.1

作成する場合

brew install mariadb

起動を確認

brew services list

mariadb の状態が started でなければ、以下のコマンドで起動します。

brew services start mariadb

MariaDBにログイン

sudo mysql -u root

// 現在存在するデータベースを確認
SHOW DATABASES;

// 既存のDBを選択する場合
USE your_database_name;

// 終了コマンド
exit;

パスワードはPCのパスワードを入力

Laravel用のデータベースを作成

MariaDBにログインした状態で以下実行（laravel_dbという名前のデータベースが作成されます）

CREATE DATABASE laravel_db;

ユーザーの作成

CREATE USER 'user_name'@'localhost' IDENTIFIED BY 'your_password';
// 権限の付与(すべての権限付与)
GRANT ALL PRIVILEGES ON laravel_db.* TO 'user_name'@'localhost';
// 権限の適用(権限情報を再読み込み)
FLUSH PRIVILEGES;

.envファイルを更新

DB_CONNECTION=mariadb
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=amazon_memo_project
DB_USERNAME=develop
DB_PASSWORD=develop

Laravelのマイグレーション実行(テーブルを作成)

php artisan migrate

Laravelの開発サーバーを起動

php artisan serve
  • Laravel開発サーバーの役割
    Laravelのバックエンド処理を担当します。
    • ルーティング、コントローラー、データベース操作（Eloquent ORMなど）。
    • Bladeテンプレートのレンダリング。

Viteのビルドを実行

npm run build

Viteの開発サーバーを起動

npm run dev
  • Viteの開発サーバーの役割
    • Reactのフロントエンドアセット（JavaScriptやCSS）を開発環境でホットリロード（自動更新）しながら提供します。
    • Reactコンポーネントやスタイル変更がリアルタイムで反映される。
      ※ 本番環境ではnpm run buildでで生成されたアセットを使用するので起動の必要なし

ブラウザでhttp://localhost:8000 にアクセス

localhost_8000_.png
が表示されればLaravelのセットアップは完了。

0
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
Sign upLogin
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?