Zenn
🎃

Laravel勉強記録

2023/03/20に公開
Laravel
PHP
勉強記録
tech

環境構築

Laravelのインストール

下記コマンドでLaravel(バージョン7系)をインストールする

composer create-project "laravel/laravel=7.*" プロジェクト名 --prefer-dist

「Application key set successfully.」と表示されればOK！！
作成が完了したらプロジェクトのルートディレクトに移動する
↓
ルートディレクトに存在するpackage.jsonを確認する

{
  "private": true,
  "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "npm run development -- --watch",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
      "axios": "^0.19",
      "cross-env": "^7.0",
      "laravel-mix": "^5.0.1",
      "lodash": "^4.17.19",
      "resolve-url-loader": "^3.1.0",
      "sass": "^1.15.2",
      "sass-loader": "^8.0.0"
  }
}

laravel/uiのインストール

composerで「Laravel-ui」をインストールする
※「Laravel-ui」とはフロントエンドフレームワークを使うことができるライブラリで、このライブラリをインストールすることでVue.jsやReactをインストールできるようになる

composer require laravel/ui:^2.4

「Package manifest genarated successfully.」と表示されればOK！！

reactスカホールドのインストール

Laravel-uiライブラリがインストールできると、reactスカホールドがインストールできるようになる

php artisan ui react

「React scaffolding installed successfully.Please run “npm install && npm run dev” to compile your fresh scaffolding.」と表示されていればOK!!

ここでpackage.jsonに「@babel/preset-react」「react」「react-dom」の３つが追記されていることを確認

{
  "private": true,
  "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "npm run development -- --watch",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
      "@babel/preset-react": "^7.0.0",
      "axios": "^0.19",
      "bootstrap": "^4.0.0",
      "cross-env": "^7.0",
      "jquery": "^3.2",
      "laravel-mix": "^5.0.1",
      "lodash": "^4.17.19",
      "popper.js": "^1.12",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "resolve-url-loader": "^3.1.0",
      "sass": "^1.15.2",
      "sass-loader": "^8.0.0"
  }
}

Reactをインストールする

package.jsonに記述されているパッケージをインストール

npm install

ルートディレクトリ直下にnode_moduelsが生成されていることを確認

パッケージのインストールが完了したらプロジェクトのビルドを行う
※ビルドを行わないとReactの実行はできない

npm run dev

対象のファイルをコンパイルしてその後変更などあれば随時コンパイルを行う

npm run watch

Reactコンポーネントを使う

ローカルサーバを起動

php artisan serve

Laravelのプロジェクト内にReactのサンプルコンポーネントが用意されているのでそちらを使用

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">Example Component</div>

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

export default Example;

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

実際にbladeファイルにReactコンポーネントを埋め込んだサンプル

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    ... 省略 ...

    <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="flex-center position-ref full-height">
        ... 省略 ...

        <div class="content">
            <div class="title m-b-md">
                Laravel
            </div>

            <div class="links">
                <a href="https://laravel.com/docs">Docs</a>
                <a href="https://laracasts.com">Laracasts</a>
                <a href="https://laravel-news.com">News</a>
                <a href="https://blog.laravel.com">Blog</a>
                <a href="https://nova.laravel.com">Nova</a>
                <a href="https://forge.laravel.com">Forge</a>
                <a href="https://vapor.laravel.com">Vapor</a>
                <a href="https://github.com/laravel/laravel">GitHub</a>
            </div>

            <div id="example"></div>
        </div>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

Discussion