MVCモデルでWebアプリケーションを開発できるオープンソースWebアプリケーションフレームワーク

Laravel

Amazon.comにより提供されているクラウドコンピューティングサービス

コンピュータプログラムで問題を解決するための手順や計算方法のこと

Algorithm

継続的インテグレーション＆継続的デリバリーの略で、アプリケーションの構築、テスト、および展開の自動化を指す

CI/CD

コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのDocker​社製オープンソースソフトウェア

Docker

GitHub社によって運営されているソースコードの変更履歴を管理するホスティングサービス

GitHub

静的なHTMLをベースに、JavaScriptを用いたAPIを通じて動的なコンテンツを扱うWebサービスのアーキテクチャ

Jamstack

Facebook社がOSSとして開発を進めているJavaScript用テスティングフレームワーク

Jest

GoogleのMaterialデザインをベースに開発された、ウェブ開発をより高速かつ簡単にするReactコンポーネント

Material-UI

Oracle社が中心となって開発しているオープンソースのリレーショナルデータベース管理システム

MySQL

Vercel社がOSSとして開発を進めているReactベースのフロントエンドフレームワーク

Next.js

The PHP Groupによってコミュニティベースで開発されているオープンソースの汎用プログラミング言語。

Facebook社とコミュニティによって開発されているUI構築のためのJavaScriptライブラリ

React

マイクロソフトが開発・販売しているGUIを採用したオペレーティングシステムの製品群

Windows

Laravel - Breathnote

SQLのJOINは、`ON`以降を`AND`で連結しますが、クエリビルダでは`on ()`のチェーンで同じ挙動になりました。

<div className="codeblock-filename">SQL</div>

```sql
SELECT *
FROM A
LEFT JOIN B
    ON A.PK1 = B.PK1
    AND A.PK2 = B.PK2
```

<div className="codeblock-filename">PHP</div>

```php
DB::table('a')->leftJoin('b', function ($join) {
    $join->on('a.pk1', 'b.pk1')->on('a.pk2', 'b.pk2');
})->get();
```

複合主キーテーブル同士をJOINするクエリビルダの書き方を紹介します。

Laravelのクエリビルダで複合主キーテーブルをJOINする

再帰クエリをサポートしていないDBMSではアンチパターンとなるナイーブツリー。

今回は、ナイーブツリーの中でも扱いが面倒な「隣接リストモデル」のテーブルを用いて、子孫レコードを取得、Laravel Bladeを用いて階層表示してみます。

## 開発環境

- PHP 7.3
- Laravel 6.20
- MySQL 5.7

## テーブル定義

本記事では以下の`divisions`テーブルを使用します。`id`と`parent_id`で部署の関係を表している階層構造のテーブルです。

| id | parent_id | name |
| :-------: | :------: | :-------: |
| 1 | NULL | 技術部 |
| 2 | 1 | 開発チーム |
| 3 | 1 | 設計チーム |
| 4 | 2 | クライアント班 |
| 5 | 2 | サーバ班 |
| 6 | 3 | 研究設計班 |
| 7 | 3 | 生産技術班 |
| 8 | NULL | 企画部 |
| 9 | NULL | 営業部 |

## 子孫レコードを取得してみる

技術部以下の部署を配列形式で取得します。

<div className="codeblock-filename">Division.php</div>

```php
<?php

namespace App\Models;

class Division extends Model
{
    protected $table = 'divisions';
    protected $primaryKey = ['id'];

    // 直下の部署を取得
    public function childDivs()
    {
        return $this->hasMany('App\Models\Division', 'parent_id', 'id');
    }

    // 傘下の部署を再帰的に取得
    public function allChildDivs()
    {
        return $this->childDivs()->with('allChildDivs');
    }

    // 指定した部署 + 傘下の部署を配列形式で取得
    public static function getDivFamily(Division $model)
    {
        static $divs = [];

        if ($model) {
            $divs[] = $model;

            foreach ($model->allChildDivs as $childDivs) {
                getDivFamily($childDivs);
            }
        }

        return $divs;
    }
}
```

<div className="codeblock-filename">DivisionController.php</div>

```php
<?php

namespace App\Http\Controllers;

use App\Models\Division;

class DivisionController extends Controller
{
    public function index(Request $request)
    {
        $div = Division::find('1');

        $divFamily = Division::getDivFamily($div);
    }
}
```

## 階層表示してみる

`Laravel Blade`を利用して、傘下の部署を階層表示します。レイアウトには[TreeGrid jQuery plugin](https://www.jqueryscript.net/demo/Simple-Flexible-jQuery-Tree-Grid-Plugin-TreeGrid/)を使いました。導入方法は本題から逸れるので解説に含みません。

まず初めにコントローラを作りましょう。

<div className="codeblock-filename">DivisionController.php</div>

```php
<?php

namespace App\Http\Controllers;

use App\Models\Division;

class DivisionController extends Controller
{
    public function index(Request $request)
    {
        $rootDivs = Division::whereNull('parent_id')->get();

        return view('parent', [
            'rootDivs' => $rootDivs ?? [],
        ]);
    }
}
```

次に、親となるBladeファイルを作ります。

<div className="codeblock-filename">parent.blade.php</div>

```html
<table class="tree">
    <thead>
        <tr>
            <th>部署ID</th>
            <th>部署名</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($rootDivs as $rootDiv)
            <tr class="treegrid-{{ $rootDiv->id }}">
                <td>{{ $rootDiv->id }}</td>
                <td>{{ $rootDiv->name }}</td>
            </tr>
            @each('child', $rootDiv->allChildDivs, 'div')
        @endforeach
    </tbody>
</table>
```

最後に、子供となるBladeファイルを作ります。

<div className="codeblock-filename">child.blade.php</div>

```html
<tr class="treegrid-{{ $div->id }} treegrid-parent-{{ $div->parent_id }}">
    <td>{{ $div->id }}</td>
    <td>{{ $div->name }}</td>
</tr>
@each('child', $div->allChildDivs, 'div')
```

`child.blade.php`を再帰的に呼び出すことで、ツリー構造のテーブル表示を実現しています。

## 所感

正直なところ、あまり使い道は無いと思います。

再帰クエリをサポートしていないDBMSではアンチパターンとなるナイーブツリー。今回は、ナイーブツリーの中でも扱いが面倒な「隣接リストモデル」のテーブルを用いて、子孫レコードの取得や、Laravel Bladeを用いた階層表示を試してみます。

Laravel + MySQL：隣接リストモデルのテーブルからレコードを取得する

参考記事とほぼ同じ内容ですが、すぐ見返せるようまとめておきます。

- [Laravelでuniqueの対象から自分自身の値を外す](https://qiita.com/kaitaku/items/d38e9e498b094405dede)

## 記法

`user`テーブルの`email`カラムを更新します。

フォームリクエストを用いると以下になります。

<div className="codeblock-filename">Request.php</div>

```php
public function rules()
{
    return [
        'id' => 'required|string|max_len:20|exists:user,id',
        'email' => 'required|string|unique:user,email,' . $this->id . ',id',
    ];
}
```

単純なユニーク制約だと、更新前の自分自身を見つけてバリデーションエラーとなりますので、一緒に入力された`user`テーブルの主キー（ここでは`id`）を用いて、除外対象を指定します。

## 所感

[公式ドキュメント](https://readouble.com/laravel/8.x/ja/validation.html#rule-unique)には、上記以外の記法も紹介されていますので、参考にしてください。

Laravelのバリデーションでunique制約を付与する際、チェック対象のレコードをバリデーションの対象外とする方法を紹介します。

Laravel：uniqueバリデーションで自分自身を対象外としたい

Laravelを使ったとあるWEBシステムに、メール送信機能を実装しました。このシステムでは、メールを一括送信する要件があったため、メール送信部分は非同期で実装しました。

Laravelでは、タスクをバックグラウンドで処理させる仕組みとして「キュー」が存在します。Laravelキューは、データベース、Amazon SQS、Redisといったドライバをサポートしていますが、今回はAmazon SQSの「FIFOキュー」を利用して実装しました。

この記事では、Amazon SQSを用いたメールキューの実装方法をまとめています。

- [Laravel Queueを利用して非同期によるメール送信](https://noumenon-th.net/programming/2020/06/02/laravel-queue/)
- [LaravelでAmazon SQSのFIFOキューを使う方法](https://qiita.com/suzumurakk/items/d23e39c322c44c99f0ed)

## 動作環境

- Laravel 7.0
- `aws/aws-sdk-php`を導入済み
- メール送信機能を実装済み
- Amazon SQSのFIFOキューを準備済み

## 実装

### 1. キューにメッセージを送るサービスを作成

<div className="codeblock-filename">SqsFifoQueue.php</div>

```php
<?php

namespace App\Services;

use Illuminate\Queue\SqsQueue;

class SqsFifoQueue extends SqsQueue
{
    public function pushRaw($payload, $queue = null, $options = [])
    {
        $response = $this->sqs->sendMessage([
            'QueueUrl' => $this->getQueue($queue),
            'MessageBody' => $payload,
            'MessageGroupId' => uniqid(),
            'MessageDeduplicationId' => uniqid(),
        ]);

        return $response->get('MessageId');
    }
}
```

### 2. キューに接続するサービスを作成

<div className="codeblock-filename">SqsFifoConnector.php</div>

```php
<?php

namespace App\Services;

use Aws\Sqs\SqsClient;
use Illuminate\Support\Arr;
use Illuminate\Queue\Connectors\SqsConnector;

class SqsFifoConnector extends SqsConnector
{
    public function connect($config)
    {
        $config = $this->getDefaultConfiguration($config);

        if ($config['key'] && $config['secret']) {
            $config['credentials'] = Arr::only($config, ['key', 'secret']);
        }

        return new SqsFifoQueue(new SqsClient($config), $config['queue']);
    }
}
```

### 3. キュー接続用のサービスプロバイダを作成

<div className="codeblock-filename">SqsFifoServiceProvider.php</div>

```php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use App\Services\SqsFifoConnector;

class SqsFifoServiceProvider extends ServiceProvider
{
    public function register()
    {
        $this->app->afterResolving('queue', function ($manager) {
            $manager->addConnector('sqsfifo', function () {
                return new SqsFifoConnector;
            });
        });
    }
}
```

<div className="codeblock-filename">config/app.php</div>

```php
return [
    'providers' => [
        App\Providers\SqsFifoServiceProvider::class,
    ],
];
```

### 4. キューの接続情報を追加

<div className="codeblock-filename">config/queue.php</div>

```php
return [
    'connections' => [
        'sqsfifo' => [
            'driver' => 'sqsfifo',
            'key' => env('AWS_QUEUE_ACCESS_KEY_ID'),
            'secret' => env('AWS_QUEUE_SECRET_ACCESS_KEY'),
            'queue' => env('SQS_QUEUE'),
            'region' => env('AWS_DEFAULT_REGION'),
        ],
    ],
];
```

### 5. 環境変数を追加

<div className="codeblock-filename">.env</div>

```ini
# 変更
QUEUE_CONNECTION=sqsfifo

# 新規追加
AWS_QUEUE_ACCESS_KEY_ID=<[KEY_ID]>
AWS_QUEUE_SECRET_ACCESS_KEY=<[SECRET_KEY]>
SQS_QUEUE=<[END_POINT]>
AWS_DEFAULT_REGION=<[REGION]>
```

### 6. ジョブクラスの作成

<div className="codeblock-filename">SendSampleMail.php</div>

```php
<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Mail;

use App\Mail\SampleMail;

class SendSampleMail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    public $tries = 3; // 処理失敗時の最大試行回数

    public $data;

    public function __construct(array $data)
    {
        $this->data = $data;
    }

    public function handle()
    {
        Mail::to('<[YOUR_ADDRESS]>')->send(new SampleMail(
            $this->data,
        ));
    }
}
```

### 7. メール送信部分を修正

実装済みのメール送信部分を`dispatch()`に置き換えます。

<div className="codeblock-filename">SampleController.php</div>

```php
<?php

namespace App\Http\Controllers;

class SampleController extends Controller
{
    public function index(Request $request)
    {
        // Mail::to('<[YOUR_ADDRESS]>')->send(new SampleMail($request));

        SendSampleMail::dispatch($request);
    }
}
```

### 8. キューワーカーを起動して動作確認

`php artisan queue:work`でキューワーカーを起動して、実際にメールを送信してみましょう。

Amazon SQSのモニタリング画面でレスポンスの返却が確認できればOKです。

## 所感

本番環境でキューサービスを利用する際は、Supervisorの導入が欠かせません。

[こちらの記事](/posts/amazon-ilnux-2-supervisor)でSupervisorの導入方法を説明しています。興味のある方はどうぞ。

Webアプリケーションによくあるメール一括送信機能ですが、「キュー」を用いてバックグラウンドで処理させる場合が多いです。今回は、Amazon SQSを利用したキューサービスを、Laravelのメール送信機能に追加してみます。

Amazon SQSを使ったLaravelメールキューを実装する

AWSのロードバランサを経由してLaravel（EC2）にアクセスすると、SSL通信にならない場合があります。

Laravel側の設定で解消できるので、対処法をアウトプットしておきます。

- [Amazon CloudFrontを経由したL製のaravelがHTTPSにならないとき](https://liginc.co.jp/490895)

## 原因

クライアントとLaravelのあいだにロードバランサを挟むことにより、元々のクライアントリクエストがSSL通信か否か、Laravelが判断できなくなるからです。

本件において、最終的にLaravelへアクセスするのはロードバランサです。Laravelがロードバランサからのアクセスを信用せず、リクエストヘッダを読み取らない場合、HTTPで通信してしまうようです。

## 対処法

Laravelが信用するプロキシの一覧に、ロードバランサのIPアドレスを追加しましょう。

AWSのロードバランサはIPアドレスが動的なので、ワイルドカードで全て許可するようにしています。

<div className="codeblock-filename">TrustProxies.php</div>

```php
<?php

namespace App\Http\Middleware;

use Fideloper\Proxy\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    // protected $proxies;
    protected $proxies = '*';
}
```

Laravelに対してロードバランサ以外からアクセスがある場合は、別途リクエストヘッダのカスタマイズも実施しておくことをおすすめします。

AWSのロードバランサを経由してLaravelにアクセスすると、SSL通信にならない場合があります。Laravel側の設定で解消できるので、対処法をアウトプットしておきます。

ロードバランサを経由してLaravelにアクセスするとSSL通信にならない

[この記事](https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4)を参考に、LaravelのDocker環境を構築したのですが、データベースのマイグレーションでエラーが発生しました。エラーの原因はつまらないものでしたが、備忘録として残しておきます。

## エラー内容

<div className="codeblock-filename">shell</div>

```
user@Desktop:~/workspace/project$ make fresh
docker compose exec app php artisan migrate:fresh --seed

   Illuminate\Database\QueryException  : SQLSTATE[HY000] [2002] Connection refused (SQL: SHOW FULL TABLES WHERE table_type = 'BASE TABLE')

  at /work/backend/vendor/laravel/framework/src/Illuminate/Database/Connection.php:664
    660|         // If an exception occurs when attempting to run a query, we'll format the error
    661|         // message to include the bindings with SQL, which will make this exception a
    662|         // lot more helpful to the developer instead of just the database's errors.
    663|         catch (Exception $e) {
  > 664|             throw new QueryException(
    665|                 $query, $this->prepareBindings($bindings), $e
    666|             );
    667|         }
    668|

  Exception trace:

  1   PDOException::("SQLSTATE[HY000] [2002] Connection refused")
      /work/backend/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  2   PDO::__construct("mysql:host=127.0.0.1;port=3306;dbname=forge", "forge", "", [])
      /work/backend/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  Please use the argument -v to see more details.
make: *** [Makefile:74: fresh] Error 1
```

## 原因

Dockerの環境変数が、Laravelの環境変数を上書きできていませんでした。

Docker側のDB接続設定は以下のとおり。

<div className="codeblock-filename">docker-compose.yml</div>

```yaml
services:
  app:
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST=db
      - DB_PORT=3306
      - DB_DATABASE=laravel
      - DB_USERNAME=root
      - DB_PASSWORD=secret
```

しかしエラーには`PDO::__construct("mysql:host=127.0.0.1;port=3306;dbname=forge", "forge", "", [])`とあります。

LaravelのDB設定を確認。

<div className="codeblock-filename">database.php</div>

```php
'connections' => [
    'mysql' => [
        'driver' => 'mysql',
        'url' => env('DATABASE_URL'),
        'host' => env('DB_HOST_1', '127.0.0.1'),
        'port' => env('DB_PORT_1', '3306'),
        'database' => env('DB_DATABASE_1', 'forge'),
        'username' => env('DB_USERNAME_1', 'forge'),
        'password' => env('DB_PASSWORD_1', ''),
    ],
],
```

Docker側で指定した環境変数名と、プロジェクトで利用されている環境変数名が異なっていました。

## 解決策

環境変数名を既存プロジェクトの名称で統一しました。

<div className="codeblock-filename">docker-compose.yml</div>

```yaml
services:
  app:
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST_1=db
      - DB_PORT_1=3306
      - DB_DATABASE_1=laravel
      - DB_USERNAME_1=root
      - DB_PASSWORD_1=secret
```

`php artisan config:clear`でキャッシュを削除して再挑戦。

<div className="codeblock-filename">shell</div>

```shell
docker compose exec app php artisan migrate:fresh --seed

Dropped all tables successfully.
Migration table created successfully.
Database seeding completed successfully.
```

うまくいきました。

ネット記事を参考に、Laravelの開発環境をDockerで構築してみたのですが、データベースのマイグレーション中にエラーが発生しました。エラーの原因はつまらないものでしたが、備忘録として残しておきます。

Docker × Laravel × MySQL：データベースのマイグレーション中にエラー（Connection refused ...）

Laravelを使ったWEBシステムの帳票発行機能に[laravel-dompdf](https://github.com/barryvdh/laravel-dompdf)を利用したのですが、CSSを用いた改行ルールの変更に苦労しました。

## 問題点

dompdfは、Bladeに記述したHTMLをもとに、PDFを生成します。

HTMLを利用できるため、レイアウトもCSSを用いてスタイリングできるわけですが、dompdfは、改行関係のCSSプロパティとして`white-space`のみ有効です。

<div className="codeblock-filename">CSS</div>

```css
/* 効く */
white-space: nowrap;

/* 効かない */
line-break: anywhere;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
```

何故でしょうか？

## 原因

PDF生成時、dompdf側で独自の改行処理を行っているからです。

コードとしては`vendor\dompdf\dompdf\src\FrameReflower\Text.php`の`$_wordbreak_pattern`。

<div className="codeblock-filename">Text.php</div>

```php
// The regex splits on everything that's a separator (^\S double negative), excluding nbsp (\xa0), plus dashes
// This currently excludes the "narrow nbsp" character
public static $_wordbreak_pattern = '/([^\S\xA0]+|\-+|\xAD+)/u';
```

上記の正規表現に合致する文字列が強制的に改行対象となるため、CSSでスタイリングしても意味がないのです。

## 対処法

パッケージのオーバーライドが大変かもしれませんが、正規表現を書き換えましょう。

<div className="codeblock-filename">Text.php</div>

```php
// The regex splits on everything that's a separator (^\S double negative), excluding nbsp (\xa0), plus dashes
// This currently excludes the "narrow nbsp" character
// public static $_wordbreak_pattern = '/([^\S\xA0]+|\-+|\xAD+)/u';
public static $_wordbreak_pattern = '//u';
```

これで、dompdf側が改行処理を挟まなくなりました。CSSで指定した改行ルールが適用されます。

## 所感

パッケージライブラリって、大多数がアルファベット前提でセッティングされているので、思わぬ部分で困る時があります。

Laravelを使ったWEBシステムの帳票発行機能にlaravel-dompdfを利用したのですが、CSSを用いた改行ルールの指定に苦労しました。忘れないよう備忘録として残しておきます。

laravel-dompdfの改行ルールを変更する

Laravelのクエリビルダにおいて、検索条件の指定に利用できるwhereとorWhere。これらを連結して複数条件を組み立てる場合、論理演算の優先度に気を付ける必要があります。特に、orWhereを挟む場合は、クロージャによる優先度の調整が必要になる場合があります。

今回は、複数条件の記法としてよく使うものを紹介します。

## 記法一覧

### ① A and B or C

<div className="codeblock-filename">A and B or C</div>

```php
Model::where('a', $a)->where('b', $b)->orWhere('c', $c);
```

### ② A and (B or C)

<div className="codeblock-filename">A and (B or C)</div>

```php
Model::where('a', $a)->where(function ($query) use ($b, $c) {
    $query->where('b', $b)->orWhere('c', $c);
});
```

### ③ (A or B) and C

`C and (A or B)`として②の形で書いてもOK。

<div className="codeblock-filename">(A or B) and C</div>

```php
Model::where(function ($query) use ($a, $b) {
    $query->where('a', $a)->orWhere('b', $b);
})->where('c', $c);
```

### ④ A or B and C

`B and C or A`として①の形で書いてもOK。

<div className="codeblock-filename">A or B and C</div>

```php
Model::where('a', $a)->orWhere(function ($query) use ($b, $c) {
    $query->where('b', $b)->where('c', $c);
});
```

## 所感

検索対象が同じカラムであれば、`whereIn`とか使えるんですけどね…。

Laravelのクエリビルダにおいて、検索条件の指定に利用できるwhereとorWhere。これらを連結して複数条件を組み立てる場合、論理演算の優先度に気を付ける必要があります。本記事では、複数条件の記法としてよく使うものを紹介しています。