☆Yuus Memo☆
非エンジニアの方でも業務を効率化できるプログラムを紹介します!
Laravel

Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう!!【Laravel8対応】API作成編①

皆さんこんにちは!!
Laravel8とVue.jsを使用して「スケジュール管理アプリ」を作成するチュートリアルの第2回目は、LaravelでAPI機能を実装していきます。

前回の記事(準備編)をまだご覧になっていない方は、お先にご覧ください。

google-calendar-clone
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう!!【Laravel8対応】準備編LaravelでGoogleカレンダーと同等の機能をもつWEBアプリケーションを作成するチュートリアルです。 Laravel8を使用してAPI機能を開発します。...

それでは早速始めていきましょう!

データベースの設計・マイグレーション

今回、作成するアプリケーションは、最低3つのテーブルが必要になります。
作成するテーブルの簡単な説明図を載せるので、これに基づいて説明します。

g-cal-db_er

今回作成するスケジュール管理アプリは、ユーザーカレンダーイベントの3つがを管理することになるので、これら3つを管理するテーブルが必要になります。

また、データの関連性を次の様に関連付けして管理する必要があります。

  • ユーザーは複数のカレンダー(予定タイプ)を持つ
  • カレンダーは、複数のイベント(予定)を持つ

言葉にすると分かりにくいですが、それぞれのユーザーが、予定の種類に合わせてスケジュール帳に予定を登録できるようにする。
という機能を実装するだけです。

本来なら、もっと丁寧に説明するべきなのですが長くなりすぎるので、データベースの設計やデータの管理などについては別の機会に記事を書いていきたいと思います。

こんなテーブルを作るんだな、と覚えていただければ十分です。

Laravel/uiのインストール

前回の「準備編」でも書きましたが、ユーザー管理機能や認証機能については「Laravel/ui」を利用します。
Laravel6でデフォルトで入っていたモダンフロントエンドフレームワーク(Vue、React等)をLaravelで使う事ができるライブラリの事です。

今回使用しているLaravelは8系ですが、他の認証機能に比べ分かりやすいのでLaravel/uiを利用します。

他の認証機能を利用しても良いのですが、難易度が上がってしまうので今回は見送ります。
出来る方は、Jetstreamなどを使用しても良いと思います。

まず、ターミナルでドキュメントルートディレクトリへ移動し、次のコマンドを入力してください。

composer require laravel/ui

「Package manifest generated successfully.」と出れば問題なくパッケージを取得できています。

今回のチュートリアルはLaravel8系で進めていますが、もし、Laravel6や7の環境で始められた方は、次の様にしてLaravel/uiのインストールを行ってください。

#Laravel6.x 
composer require laravel/ui:^1.0 --dev

#laravel7
composer require laravel/ui:^2.4

続けて次のコマンドをターミナルで実行してください。

php artisan ui vue --auth

php artisan migrate

「Please run “npm install && npm run dev”」と出ているので、実行します。

npm install && npm run dev

もし「npm install」でエラーが発生した場合、再度「npm run dev」を実行してください。

ここまでで、Laravel/uiのインストールは完了し、認証機能ができているはずなので、確認します。
ターミナルで「php artisan serve」を実行し「

http://localhost:8000/」へアクセスして下さい。

図の様にホーム画面上部に「Login」「Register」のリンクが出来て、それぞれログイン画面、ユーザー登録画面と登録機能などユーザー認証機能が出来上がっています。

実際にユーザー登録などを行ってみて下さい。
また、どの様にデータが登録されているかデータベースも確認してみて下さい。

カレンダーテーブルとイベントテーブルの作成

それでは、カレンダーテーブルとイベントテーブルを作成します。
Laravelのマイグレーション機能を利用してテーブルを作成していきます。

ターミナルで次のコマンドを実行して下さい。

php artisan make:migration create_calendars_table

上記コマンドでカレンダーテーブルを作成するためのマイグレーションファイルが以下のディレクトリに作成されます。

/my-calendar/database/migrations/******

ファイル名は、2021_09_12_143520_migration_name と作成日時とマイグレーション名称になります。

今作成された、マイグレーションファイルを開いてみて下さい。
私の場合、「2021_09_12_081837_create_calendars_table.php」という名前でファイルが作られていました。

編集前は、下記の内容です。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCalendarsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('calendars', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('calendars');
    }
}

簡単に説明すると「upメソッド」がテーブルを作成・更新するメソッドを記述するメソッドの雛形で、「downメソッド」が変更を元に戻すメソッドを記述するメソッドの雛形です。

それでは「upメソッド」を次の様に書き換えて下さい。

public function up()
    {
        Schema::create('calendars', function (Blueprint $table) {
            $table->id();
            // 追加
            $table->string('name', 100);
            $table->string('color')->nullable();
            $table->boolean('visibility')->default(true);
            $table->foreignId('user_id')->constrained();
    // ここまで追加
            $table->timestamps();
        });
    }

記述できたら次のコードをターミナルで実行して下さい。

php artisan migrate

http://localhost/phpmyadmin/へアクセスして、「calendarsテーブル」が定義通りに作成できていることをご確認ください。

マイグレーションについて詳しく知りたい場合は、
Laravel 8.x マイグレーションをご覧ください。

補足として、「user_id」へログインユーザーのIDを保存することで、どのユーザーのカレンダーなのかを特定する様に管理します。

続けて、「eventsテーブル」のマイグレーションも行います。
ターミナルを開いて次の様に実行して下さい。

php artisan make:migration create_events_table

続いて、作成されたマイグレーションファイルの「upメソッド」を下記の通り変更します。

public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->id();
            // ここから追加
            $table->string('name', 100);
            $table->dateTime('start');
            $table->dateTime('end');
            $table->boolean('timed')->nullable()->default(false);
            $table->text('description')->nullable();
            $table->string('color')->nullable();
            $table->foreignId('calendar_id')->constrained();
            // ここまで追加
            $table->timestamps();
        });
    }

ターミナルでマイグレーションを実行して下さい。

php artisan migrate

http://localhost/phpmyadmin/へアクセスして、「eventsテーブル」が定義通りに作成できていることをご確認ください。

これで、スケジュール管理に最低限必要なデータベースの設定は完了です。
本来なら、テストデータを作成するのにシーディングなどを行うのですが、今回は割愛します。

シーディングは、全ての機能を作り終わって、テストなどの解説を行う際に併せて解説します。
APIの動作を確認したいので、手動で「カレンダーテーブル、イベントテーブル」へデータを数件登録して下さい。

マイグレーションについての補足

calendars テーブルの定義では、user_id が別のテーブルへの参照、外部キーとなります。
外部キーとはデータの整合性をデータベースに保証されるという意味を与える制約のことです。わかりやすくいうと、Calrendar テーブルの user_id は users テーブルの id カラムに存在する値しか入れられない制約ということです。

eventsテーブルのcalendar_idにも同じ制約を付けていますね。
リレーションを理解する上で外部キーを理解することはとても重要です。

この外部キーの定義が $table->foreignId('user_id')->constrained();  $table->foreignId('calendar_id')->constrained(); です。
constrained() は少し特殊で自動的に foreignId('user_id') などで指定されたカラム名から対象のテーブル名とカラム名を算出して、指定してくれます。

constrained() を使わない場合は $table->foreign('user_id')->references('id')->on('users') となりますが、これは冗長であるということで foreignId('')->constrained() が使用できるようになりました。

さらにマイグレーションについて知りたい場合は、
Laravel 8.x マイグレーション をご覧ください。

モデルの作成

Laravelには、データベースの扱いを簡単にする、Eloquentという機能があります。Eloquentを使用する場合、各データベーステーブルには対応する「モデル」があり、そのテーブルとの対話に使用します。Eloquentモデルでは、データベーステーブルからレコードを取得するだけでなく、テーブルへのレコード挿入、更新、削除も可能です。

MVCについて

モデルの作成前にMVCについて簡単に解説します。

LaravelはMVCというアプリケーションを実装するためのデザインパターンに基づいています。
MVCはModel(モデル)View(ビュー)、 Controller(コントローラー) の頭文字を並べた言葉で、それぞれは以下のような役割を持ちます。

モデル: データベースとのやり取りを行う。ビューを作成するのに必要なデータの取得や、新しいデータの保存などを行う。

ビュー: 渡されたデータを元にブラウザで表示するためのHTMLを作成する。

コントローラ: ユーザからのリクエストに応じてモデル及びビューとやり取りをして、ブラウザにHTMLを返す。

MVCについての詳しい内容は理解していなくても問題ありませんが、上記の内容は頭に入れておくと良いです。

カレンダーモデル・イベントモデルの作成

早速、モデルを作りましょう!
ターミナルを開き、次のコマンドを実行して下さい。

Model名は単数形であることに注意して下さい。

php artisan make:model Calendar

php artisan make:model Event

それぞれ「app/Models/」ディレクトリ以下にphpファイルが作成されます。
取り敢えず Calendar.phpを開いてみて下さい。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Calendar extends Model
{
    use HasFactory;
}

1つのテーブルデータを扱うだけならこのままで「CRUD操作」全てができます。
ただ、今回はカレンダーに紐づくイベントデータを取得したりする必要があるので、紐付けを行います。
Calendar.phpを下記の様に変更して下さい。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Calendar extends Model
{
    use HasFactory;

    protected $table = 'calendars';

    public function events()
    {
        return $this->hasMany(Event::class);
    }
}

eventsというメソッドを定義しました。
このメソッドを定義することで、次の様にイベントデータへアクセスできます。

$calendar->events();

今の段階では何が便利か分からなくて大丈夫です。
こんな風に書くんだと覚えてもらえれば問題ありません。

リレーションについての詳細は、

Laravel 8.x Eloquent:リレーションをご覧ください。

続いてイベントモデルも編集します。
「app/Models/Event.php」を開き、下記の様に編集して下さい。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Event extends Model
{
    use HasFactory;

    protected $table = 'events';

    public function calendar()
    {
        return $this->belongsTo(Calendar::class);
    }
}

これでカレンダーとイベントの紐付けは完了です!
お疲れ様でした。

ユーザーテーブルの紐付けなどは後で行います。
取り敢えず、スケジュール管理部分の作り込み(API・フロントエンド)を先に行います。

リレーションについての補足

今回モデルに、hasManybelongsToいうメソッドを使い紐付けを定義しました。
その辺りについて簡単に解説します。

リレーションシップの利用目的の多くは、下記のようなものです。

  • ある部署に所属している社員一覧を得たい。
  • 社員一覧を照会した際、部署をidではなく日本語名で得たい。

SQLでいうところのテーブル結合です。
SQLでは正規化されたテーブルを結合するにはJOIN句を利用しますが、これをEloquentでより簡単にしたいということになります。

今回のアプリケーションでは、カレンダーに属するイベントを取得したいので、リレーションを定義しているということです。

リレーションについての詳細は、

Laravel 8.x Eloquent:リレーションをご覧ください。

API作成編①のまとめ

お疲れ様でした!!
本当は、コントローラとルーティングの定義まで1回で書き切ろうかと考えていたのですが、大切な部分なので補足していたら、長くなりすぎてしまったので、「コントローラー・ルーティング」は次回に解説します。

一応、API編は次回で終わり、その次はフロントエンド編に入ります。
API編は地味な作業が多くWEBでの派手な画面で確認出来たりしないので、面白くないかも知れませんが、骨格をしっかりと作り上げておくことで、上層部を実装するのがとても楽になります。

一緒に頑張りましょう!!
次回をお楽しみに!!

Laravelの基礎的な部分を学習する場合、下記の書籍がおすすめです。
環境構築などにもつまづく事がなく、プログラミングを始めたばかりの初学者の方にもおすすめです。


逆にある程度知識のある方がLaravelを学ばれる場合、下記の書籍がおすすめです。
Udemyなどの講座も見てみましたが、下記の書籍程、Laravelを詳しく解説しているものはありませんでした。

コメントを残す