Copilot on ララジャパン

カレンダー（２）Livewireを使いリアクティブとする

Sun, 20 Oct 2024 11:24:17 +0900

AI(Copilot)でコードを作成してカレンダーを表示できましたが、今度は今月の月間カレンダーだけなく前月と翌月のボタンを追加してクリックしたら表示をリアクティブに変更できるようにします。

Livewireに変換

前回で作成したカレンダー生成の関数を用いることになりますが、今回もCopilotを使って開発します。

さあ、働いてもらいましょう！

> Laravel Livewireを用いて、先月と翌月を表示できるようにしてください

この結果としてLivewireのコンポーネント、それが使用するブレード、そのコンポーネントを含むブレード、とルートの定義が出力されるのですが、残念なことにこれがLivewireの最新のバージョン３ではなく、バージョン２の出力なのです。

おかしいと思い、問いかけます。

> どのバージョンのLivewireを知っていますか？

私はLivewireの最新バージョンであるLivewire 3を知っています。Livewire 3は、リアクティブなUIを構築するための最新の機能と改善を提供しています。

そうなら、

> そうなら、Livewire3を使って書き直してください

とプッシュ。しかし残念なことに出力される結果は先ほどと同じとなりました。

どうやらLivewireのバージョン３の知識はないみたいです。

ということで、Copilotで出力されたコードと私のLivewireの学習、つまり人間とのコラボにより以下のコード生成となりました。

コンポーネントの作成

最新のバージョンのLaravelでプロジェクトを作成して、以下で最新（バージョン３ですよ）のLivewireのパッケージをインストールします。

$ composer require livewire/livewire

以下でコンポーネントを作成します。

$ php artisan make:livewire Calendar

作成されるファイルは２つあります。

new file:   app/Livewire/Calendar.php
new file:   resources/views/livewire/calendar.blade.php

まず、Calendar.phpを編集します。ここではCopilotで出力されたコードを入れますが、注意するのは、namespaceがバージョン３のLivewireでは、App\Http\LivewireからApp\Livewireに変わっています。

app/Livewie/Calendar.php

namespace App\Livewire;

use Livewire\Component;
use Carbon\Carbon;

class Calendar extends Component
{
    public $year;
    public $month;
    public $calendar = [];

    public function mount($year = null, $month = null)
    {
        $this->year = $year ?? Carbon::now()->year;
        $this->month = $month ?? Carbon::now()->month;
        $this->generateCalendar();
    }

    public function generateCalendar()
    {
        $startOfMonth = Carbon::createFromDate($this->year, $this->month, 1);
        $endOfMonth = $startOfMonth->copy()->endOfMonth();
        $startDayOfWeek = $startOfMonth->dayOfWeek;
        $totalDays = $endOfMonth->day;

        $this->calendar = [];
        $week = [];

        for ($i = 0; $i < $startDayOfWeek; $i++) {
            $week[] = null;
        }

        for ($day = 1; $day <= $totalDays; $day++) {<strong>
            $week[] = $day;

            if (count($week) == 7) {
                $this->calendar[] = $week;
                $week = [];
            }
        }

        if (count($week) > 0) {
            while (count($week) < 7) {
                $week[] = null;
            }
            $this->calendar[] = $week;
        }
    }

    public function previousMonth()
    {
        $this->month--;
        if ($this->month < 1) {
            $this->month = 12;
            $this->year--;
        }
        $this->generateCalendar();
    }

    public function nextMonth()
    {
        $this->month++;
        if ($this->month > 12) {
            $this->month = 1;
            $this->year++;
        }
        $this->generateCalendar();
    }

    public function render()
    {
        return view('livewire.calendar');
    }
}

コンポーネントに含まれる、generateCalendar()は前回と似ていますが、このクラスのプロパティの$month, $yearにより返す値が変わるようになっています。また、前月を表示するpreviousMonth()と次月を表示するnextMonth()のメソッドが追加されています。

今度はブレードですが、これもCopilotの出力ををもとに英語から日本語に私が編集しました。wire:clickにおいて先ほど追加関数名が指定されています。これらはLivewireのためのコードで、これによりカレンダーで表示する月を変えることができます。

/resources/views/livewire/calendar.blade.php

<div>
    <table>
        <caption>
            <button wire:click="previousMonth">前</button>
            <strong>{{ $year }}年{{ $month }}月</strong>
            <button wire:click="nextMonth">次</button>
        </caption>
        <thead>
            <tr>
                <th>日</th>
                <th>月</th>
                <th>火</th>
                <th>水</th>
                <th>木</th>
                <th>金</th>
                <th>土</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($calendar as $week)
                <tr>
                    @foreach ($week as $day)
                        @if (is_null($day))
                            <td></td>
                        @else
                            <td>{{ $day }}</td>
                        @endif
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

ルートの定義は以下となりますが、これはコンポーネントを全画面として表示する設定です。

routes/web.php

use App\Livewire\Calendar;
use Illuminate\Support\Facades\Route;

Route::get('/calendar', Calendar::class);

そして、この全画面表示のためにレイアウトのブレードが必要です。

resources/views/components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

これで完了です。

う～ん。ちょっと醜いですね。Copilotに少し恰好良くしてもらいましょう。

> コンポーネントのブレードをTailwind cssを利用してベターなルックにしてください

以下のようにブレードは変わります。

/resources/views/livewire/calendar.blade.php

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-center">{{ $year }}年{{ $month }}月</h1>
    <div class="flex justify-between mb-4">
        <button wire:click="previousMonth" class="bg-blue-500 text-white px-4 py-2 rounded">前</button>
        <button wire:click="nextMonth" class="bg-blue-500 text-white px-4 py-2 rounded">次</button>
    </div>
    <table class="min-w-full bg-white border border-gray-200">
        <thead>
            <tr>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">日</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">月</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">火</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">水</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">木</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">金</th>
                <th class="py-2 px-4 border border-gray-200 bg-gray-100">土</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($calendar as $week)
                <tr>
                    @foreach ($week as $day)
                        @if (is_null($day))
                            <td class="py-2 px-4 border border-gray-200"></td>
                        @else
                            <td class="py-2 px-4 border border-gray-200">
                                {{ $day }}
                            </td>
                        @endif
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

レイアウトの方は、以下となります。

resources/views/components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ $title ?? 'Page Title' }}</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

    </head>
    <body class="bg-gray-100">
        <div class="container mx-auto p-4">
            {{ $slot }}
        </div>
    </body>
</html>

以下となりました。レスポンシブ対応ともなっています。

以上、Copilotと私のコラボの作品です。CopilotのLivewireの知識が最新でないのは残念ですが、知ったふりをしては欲しくないですね。

カレンダー（１）AIで生成

Tue, 15 Oct 2024 11:24:06 +0900

カレンダーに関連するプロジェクトは、そのダイナミックなデータの性質上とても面白いです。また、店舗休日を表示するための月間カレンダーの生成とか、場所や部屋や物の予約のためのカレンダーのアプリとか実用的なものが多いです。私のお客さんのサイトでもチェックアウト画面でお客さんが届け日を指定するために月間のカレンダーが表示されます。カレンダーを題材にLaravelでどんなことが簡単にできるかをいくつかの投稿に分けて紹介します。

欲しいもの

簡単なところからということで、まず今月のカレンダーの表示から始めます。これを書いているのは2024年の10月なので、以下のような表示です。

Copilotでカレンダーの生成

私が生きている間にAIが開発者をヘルプできる時代になるとはまったく信じられなかったことですが、私も時代の流れに逆らえず、開発者のツールとしてマイクロソフトのCopilotを常時使用しています。Copilotは現時点ではChatGPT4を使用しており、VSCODEエディターの中からAIとの対話が可能です。

まず、以下の質問をCopilotに問います。

> 今月の月間のカレンダーを週と日にちの配列として生成するphp関数をCarbonのパッケージを使用して作成してください

以下のコードを作成してくれました。

以下は、Carbonパッケージを使用して今月の月間カレンダーを週と日にちの配列として生成するPHP関数です。

use Carbon\Carbon;

function getMonthlyCalendar()
{
    // 現在の月と年を取得
    $now = Carbon::now();
    $startOfMonth = $now->copy()->startOfMonth();
    $endOfMonth = $now->copy()->endOfMonth();

    // 月の最初の日の曜日を取得
    $startDayOfWeek = $startOfMonth->dayOfWeek;
    $totalDays = $endOfMonth->day;

    // カレンダーを作成する配列
    $calendar = [];
    $week = [];

    // 最初の週の空の日を追加
    for ($i = 0; $i < $startDayOfWeek; $i++) {
        $week[] = null; // 空のセル
    }

    // 日付を週に追加
    for ($day = 1; $day <= $totalDays; $day++) {
        $week[] = $day;

        // 7日ごとに新しい週を作成
        if (count($week) == 7) {
            $calendar[] = $week;
            $week = [];
        }
    }

    // 最後の週を追加
    if (count($week) > 0) {
        while (count($week) < 7) {
            $week[] = null; // 空のセル
        }
        $calendar[] = $week;
    }

    return $calendar;
}

説明のコメントつきでわかりやすいです。月間カレンダーはたいてい7x5あるいは7x4のグリッドですが、先月となる日や翌月となる日を非表示とする配慮が必要です。この関数が返すデータを見せてもらいましょう。

> 今月は2024年10月として、上の関数が返す配列を見せてください

[
    [null, null, 1, 2, 3, 4, 5], // 1週目
    [6, 7, 8, 9, 10, 11, 12],    // 2週目
    [13, 14, 15, 16, 17, 18, 19], // 3週目
    [20, 21, 22, 23, 24, 25, 26], // 4週目
    [27, 28, 29, 30, 31, null, null] // 5週目
]

今月というのを説明しないと2023年の10月となってしまいますので注意を。期待していた週と日の２次元の配列です。先月や翌月となっているところは、皆nullとなっています。

ここまでできるなら、後全部やってもらいましょう！

> それを利用したLaravelのコントローラとブレードを作成してください

以下はCopilotからの出力です。

以下は、提供されたコードを利用してLaravelのコントローラとブレードテンプレートを作成する方法です。

コントローラの作成
まず、CalendarControllerを完成させます。

app/Http/Controllers/CalendarController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Carbon\Carbon;

class CalendarController extends Controller
{
    public function show()
    {
        $calendar = $this->getMonthlyCalendar();

        return view('calendar', compact('calendar'));
    }

    function getMonthlyCalendar()
    {
        // 現在の月と年を取得
        $now = Carbon::now();
        $startOfMonth = $now->copy()->startOfMonth();
        $endOfMonth = $now->copy()->endOfMonth();

        // 月の最初の日の曜日を取得
        $startDayOfWeek = $startOfMonth->dayOfWeek;
        $totalDays = $endOfMonth->day;

        // カレンダーを作成する配列
        $calendar = [];
        $week = [];

        // 最初の週の空の日を追加
        for ($i = 0; $i < $startDayOfWeek; $i++) {
            $week[] = null; // 空のセル
        }

        // 日付を週に追加
        for ($day = 1; $day <= $totalDays; $day++) {
            $week[] = $day;

            // 7日ごとに新しい週を作成
            if (count($week) == 7) {
                $calendar[] = $week;
                $week = [];
            }
        }

        // 最後の週を追加
        if (count($week) > 0) {
            // 残りの空の日を追加
            for ($i = count($week); $i < 7; $i++) {
                $week[] = null;
            }
            $calendar[] = $week;
        }

        return $calendar;
    }
}

ルートの定義
次に、ルートを定義します。

routes/web.php

use App\Http\Controllers\CalendarController;

Route::get('/calendar', [CalendarController::class, 'show']);

ブレードテンプレートの作成
最後に、カレンダーを表示するためのブレードテンプレートを作成します。

resources/views/calendar.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Calendar</title>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20table%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-collapse%3A%20collapse%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20th%2C%20td%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20black%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20th%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23f2f2f2%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>
    <h1>Calendar for {{ \Carbon\Carbon::now()->format('F Y') }}</h1>
    <table>
        <tr>
            <th>Sunday</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
        </tr>
        @foreach ($calendar as $week)
            <tr>
                @foreach ($week as $day)
                    <td>{{ $day ?? '' }}</td>
                @endforeach
            </tr>
        @endforeach
    </table>
</body>
</html>

曜日は英語ですが、あっという間にできてしまいました。

次の投稿では、Livewireを使ってカレンダーをリアクティブにします。