This is a step by step Laravel 7 and Angular 10 Token-Based Authentication tutorial. In this tutorial, we will learn how to combine Laravel and Angular from scratch and create a secure user authentication application.

click here to read more:
https://www.positronx.io/laravel-angular-token-based-authentication-with-jwt/

Create Datatables in Laravel using a third-party package called Yajra Datatables.

click here to read more:

https://www.positronx.io/laravel-datatables-example/

Laravelを用いたプロジェクトの開発手順です。

Laravelのインストール

Composerを使用して、グローバル環境にLaravelをインストールします。

$ composer global require laravel/installer

laravel実行ファイルがどこに設置されても動作するように、composerシステム全体のvendor/binディレクトリに$PATHを登録します。
MACの場合は、下記をターミナルで記述します。

$ export PATH=$HOME/.composer/vendor/bin:$PATH

プロジェクトの作成

cdでプロジェクトを作成するディレクトリに移動して、laravel new プロジェクト名を実行します。

$ cd htdocs
$ laravel new quick_laravel

インストールされたアプリの確認

インストールが完了すると、このようにディレクトリにファイルが作成されます。

メインとなるアプリやディレクトリは、下記のようにそれぞれの役割があります。
.
├── app … アプリ本体コード
│ ├── Console … コンソールアプリ
│ ├── Exception … 例外処理関連
│ ├── Http … webアプリ
│ │ ├── Controllers … コントローラー（リクエストを受け取り、モデルを呼んだりビューに表示をさせる）
│ │ ├── Middleware
│ │ └── Kernel.php
│ ├── Prociders … プロバイダー関連
│ └── User.php
├── bootstrap … アプリ起動時に実行されるコード
├── cofig … アプリの共通設定
├── database … データベース関連
├── public … 公開するディレクトリ（Js、CSS）
├── resources … アプリのリソース関連（Viewファイルなど）
├── routes … ルーティング関連（ルーター：リクエストURLに応じて受け渡し先を決める）
├── storage … アプリが操作するファイルの保存先
├── tests … テストコード関連
├── vendor … Laravel本体とライブラリコード
├── artisan … artisanコマンドの設定
├── composer.json … composerの設定
├── package.json … npmの設定
├── phpunit.xml … テストツールの設定
└── server.php … サーバー起動時に実行するコード

サーバーの起動

php artisan serveでサーバーが立ち上がります。

$ php artisan serve

この画面が出たら、OKです。

サーバーは、ctr + cで終了できます。

今回の内容

モデル
モデルを使わずDB操作
モデルを使ってDB操作

前回のpart7で入れたデータを表示してみます。

モデルとは

モデルはMVCのMの部分で、データベースの操作を担当する。
DBに書き込んだり、データを取ってくるのが主な役割。

Laravelではモデルはひとつのphpファイルとして作成する。

モデルを使わずDB操作

まずはモデルを使わず、クエリビルダを使ってデータ取得する。
クエリビルダとは、Laravelのメソッドを呼んでいくと、SQL文は書かずにいい感じにデータ取得できる機能。
SQL文を実行する方法もありますが今回は記載しない。

コントローラ作成

php artisan make:controller FruitsController

DBクラスをuseで追加する。
tableメソッドの引数にテーブル名を指定し、getメソッドを呼び出す。
最後にviewを呼び出し、引数に取得したデータを渡してコントローラは完成。

FruitsController

use Illuminate\Support\Facades\DB;

class FruitsController extends Controller{
    public function index(){
        $fruits = DB::table('fruits')->get();
        return view('fruits_list', ['fruits'=> $fruits]);
    }
}

getでそのまま代入すると$fruitsにテーブルの全データが入ってくる。
データがひとつしかなくても配列型になるので注意。

View作成

/viewsに適当にビューのファイルを作成する。
今回はfruits_list.blade.phpという名前で作成する。

fruits_list.blade.php

<h1>Fruits list</h1>
<ul>
    @foreach($fruits as $fruit)
    <li>
        {{ $fruit->name }} {{ $fruit->price}}円
    </li>
    @endforeach
</ul>

今$fruitsは配列型になっているので@foreachで回す。
列名を参照するとその列の値を取得できるので、ループ内でそれぞれのnameとpriceを表示している。

ルーティング

あとはルーティングするだけ。

web.php

Route::get('/fruits-list', 'FruitsController@index');

ブラウザで/fruits-listにアクセスするとリンゴとバナナ（part7で入れたデータ）が表示される。

モデルを使って表示

モデル作成

まずはモデル作成。
下記コマンドでモデルの名前を指定して作成する。
今回はFruitモデルを作成する。

php artisan make:model Fruit

appフォルダにFruitモデルが作成される。

Laravelではテーブルを複数形、モデルを単数形の名前で作成すると、モデルとテーブルが自動で紐づくようになっている。
そのため、Fruitという名前でモデルを作成すれば勝手にfruisテーブルを参照するようになってくれる。

あとはFruitsControllerを書き換えるだけでいい
モデル名::all()と呼び出すだけで全レコードを取得してくれる。

FruitsController.php

use App\Fruit;

class FruitsController extends Controller{
    public function index(){
        $fruits = Fruit::all(); // ここだけ修正
        return view('fruits_list', ['fruits'=> $fruits]);
    }
}

React Relay

GraphQLクライアントです。
https://relay.dev/

他に代表的なものとしてApollo clientがありますが現状Relayを素振り中です。

Relayを選択したい(と今のところ思っている)理由

React Relayのフレームワークに乗っかった方が、生産性が高く、メンテするコード量も少なりそうなので、だったら一度全力で乗っかってみようというフェーズです。

Apollo clientと比較する点の一つとして、RelayではGraphQLサーバ側の仕様に制約を設けています。

• 識別子(ID)の定義の仕方
• コネクション(ページ情報)の定義の仕方 (cursor connection)
• mutation 引数の定義の仕方
• などなど...

https://relay.dev/docs/en/graphql-server-specification

制約があるというとネガティブな印象もありますが、これらの制約があるおかげで、オブジェクトの再取得を効率化できたり、ページネーション周りで必要なスキーマ定義が整備され、設計・実装時に考えることが（おそらく）減ります。
識別子に関しては、このRelayの制約がそのままベストプラクティスとしてGraphQL公式に書かれたりします。

https://graphql.org/learn/global-object-identification/

Lighthouse: LaravelベースのGraphQLサーバー

Lighthouseは、Laravelに組み込めるGraphQLサーバーです。
https://lighthouse-php.com/

Eloquentと統合可能なディレクティブが多数用意されていて、CRUDだけであればコード量も少なく、GraphQLエンドポイントを構築できそうです。
(リレーション定義等は必要なので、全く書かなくて良いわけではありませんでした。)

このディレクティブが非常に楽チンで、@hasManyとか書いておくだけで、Relayのコネクション定義を満たしたスキーマを生成してくれます。
例えばこのようなスキーマを書いたとします。

type User @model {
  id: ID! @globalId
  name: String!
  projects: [Project!] @hasMany(type: "connection", relation: "projects")
}

type Project @model {
  id: ID! @globalId
  name: String!
  status: ProjectStatus!
  createdAt: DateTime! @rename(attribute: created_at)
  updatedAt: DateTime! @rename(attribute: created_at)
}

Lighthouse側でディレクティブを解釈した結果は以下となります。（関連部分の抜粋)

type User implements Node {
  id: ID!
  name: String!
  ownerName: String!
  iconUrl: String
  projects(
    first: Int!
    after: String
  ): ProjectConnection
}

interface Node {
  id: ID!
}

type ProjectConnection {
  pageInfo: PageInfo!
  edges: [ProjectEdge]
}

type ProjectEdge {
  node: Project
  cursor: String!
}

type Project implements Node {
  id: ID!
  name: String!
  status: ProjectStatus!
  createdAt: DateTime!
  updatedAt: DateTime!
}

Relayの制約も既に考慮されていて、Laravelの資産も使えて、効率的にGraphQLエンドポイントが構築できます！

しかし、cursor connection には対応していなかった

これが非常に残念かつ致命的と思われるところで、Lighthouseのドキュメントに以下のような記述がありました。

Lighthouse does not support actual cursor-based pagination as of now, see https://github.com/nuwave/lighthouse/issues/311 for details. Under the hood, the "cursor" is decoded into a page offset.

以下のイシューで議論されているようですが、どうも対応予定がなさそうな感じです。
https://github.com/nuwave/lighthouse/issues/311

connectionの挙動確認

各種スキーマなど

RDBに以下のusersテーブルとレコードが格納されているとします。

`users` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) 

（* 名称は、php fakerでランダム生成したものです。）

id	name
1	若松 修平
2	藤本 千代
3	廣川 舞
4	宮沢 浩
5	小泉 涼平

そして、以下のGraphQLスキーマがあるとします。　
(model 等のディレクティブはLighthouse固有です。）

type User @model {
  id: ID! @globalId
  name: String!
}

type Query {
  users: [User!]! @paginate(type: "connection")
}

cursor connection 前提のクエリ

まずは以下のクエリを投げてみます。
（まだカーソルは指定していません。）

query users {
  users(first: 3) {
    pageInfo {
      count
      currentPage
      total
    }
    edges {
      cursor
        node {
        id
        ... on User {
          name    
        }
      }
    }
  }
}

その結果が以下です。

{
  "data": {
    "users": {
      "pageInfo": {
        "count": 3,
        "currentPage": 1,
        "total": 10
      },
      "edges": [
        {
          "cursor": "MQ==",
          "node": {
            "id": "VXNlcjox",
            "name": "若松 修平"
          }
        },
        {
          "cursor": "Mg==",
          "node": {
            "id": "VXNlcjoy",
            "name": "藤本 千代"
          }
        },
        {
          "cursor": "Mw==",
          "node": {
            "id": "VXNlcjoz",
            "name": "廣川 舞"
          }
        }
      ]
    }
  }
}

2番目のユーザ(id="VXNlcjoy")について返却されたcursorを指定して、今度はこのcursor移行のデータを要求するクエリを投げてみます。

query users {
  users(first: 3 after: "Mg==") {
    pageInfo {
      count
      currentPage
      total
    }
    edges {
      cursor
        node {
        id
        ... on User {
          name    
        }
      }
    }
  }
}

この結果は、先ほどのクエリと全く変化がありませんでした。
つまり、afterにcursorを指定しても、それが効いていないことになります。

期待動作としては、1番目のユーザ(id="VXNlcjox")が除外されて、2,3,4番目のユーザが返却される、というものでしたが、確かにcursor connectionに対応されていないようです。

非Relayならpaginatorを使用できる

Relayの場合は cursor connectionが必須ですが、そうでない場合(Apollo Clientなどを使用する場合）は、この制約はありません。
Lighthouseでは、cursor connectionの他に、paginatorもサポートしています。
これは、page番号を指定する方式でのページング機能です。

type Query {
  users: [User!]! @paginate(type: "paginator")
}

以下のようなクエリが書けて、こちらは期待通りに動作しました。

query users {
  users(first: 3 page: 2) {
    paginatorInfo {
      count
      currentPage
      total
      currentPage
    }
    data {
      id
      name
    }
  }
}

Relay対応の楽チンGraphQLサーバをもとめて...

Laravelという資産も生かせて、かつ簡単にGraphQLサーバ建てられそうで良いなあと思っていましたが、Relay前提では厳しそうです。惜しい。
そして今度は harura がいいかなと見始めています。

前回、part6 でテーブル作成しましたが、データが入っていないのでせっかくなのでシーディングで入れてみます。

今回の内容

シーディング
データ挿入
※part6で作成したテーブルを使用します。

シーディングとは

seeding
データベースに初期データやダミーデータなどのレコードを挿入できる機能。

シーディングするためのファイルをシーダー(seeder)という。

シーダーファイル作成

下記コマンドでファイル名を指定して実行。
今回はFruitsTableSeederという名前で作成する。

php artisan make:seeder FruitsTableSeeder

実行すると/database/seedsフォルダに指定したファイル名で作成される。

FruitsTableSeeder

<?php
use Illuminate\Database\Seeder;

class FruitsTableSeeder extends Seeder{
    public function run(){
        //
    }
}

runメソッドが用意されているのでここにinsert処理を書いていく。

FruitsTableSeeder

public function run(){
  $param = [
    'name' => 'バナナ',
    'price' => '120'
  ];
  DB::table('fruits')->insert($param);

  $param = [
    'name' => 'リンゴ',
    'price' => '250'
  ];
  DB::table('fruits')->insert($param);
}

シーダーファイルを登録

このままだとシーダーが作成されただけで動いてくれない。
DatabaseSeeder.phpに登録することでシーディングコマンドで実行されるようになる。

登録の仕方はDatabaseSeeder.phpにサンプルが書いてあるので同じように書く。

DatabaseSeeder.php

class DatabaseSeeder extends Seeder{
  public function run(){
    // $this->call(UserSeeder::class);
    $this->call(FruitsTableSeeder::class);
  }
}

シーディング実行

コマンドを実行すると登録したシーダーが実行される。

php artisan db:seed

確認

レコードが入ってればOK

目的

• 先輩の記事を参考にLaravel6の環境をDockerを用いて作成した話をまとめる

実施環境

• ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.5)
ハードウェア	MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ	2 GHz クアッドコアIntel Core i5
メモリ	32 GB 3733 MHz LPDDR4
グラフィックス	Intel Iris Plus Graphics 1536 MB

前提条件

• 特になし。

前提情報

• 職場の大先輩である@layzy_glpさんのQiitaの記事Dockerで始めるLaravel講座 - Laravel編の記事の方法を参考にLaravel6の環境をDockerを用いて作成する。

読後感

• Dockerコンテナ内のnginxのドキュメントルートディレクトリに「app」と言う名前のLaravel6のアプリを作成する。

概要

1. Docker Desktop for Macのインストール
2. DockerFileのcloneとコンテナの起動
3. Laravelインストーラの取得
4. Laravelのインストールとアプリ作成
5. 確認

　詳細

1. Docker Desktop for Macのインストール
   1. 下記の手順を参考にDocker Desktop for Macをインストールする。
      • Docker Desktop for Mac をインストールする
2. DockerFileのcloneとコンテナの起動とログイン
   1. 下記の先輩の記事の「Docker環境を作ろう」の部分を参考に全て実施して必要ファイルのcloneとコンテナの起動・コンテナへのログインを行う。
      • Dockerで始めるLaravel講座 - Laravel編
3. Laravelインストーラの取得
   1. 下記の先輩の記事の「Laravelのインストーラーをインストールしよう」の部分を参考に全て実施してインストーラーを取得する。
      • Dockerで始めるLaravel講座 - Laravel編

4. Laravelのインストールとアプリ作成

   1. 下記のコマンドを実行してnginxのドキュメントルートディレクトリに移動する。

      $ cd /usr/share/nginx/html
      

   2. 下記コマンドを実行してLaravelのインストールとアプリ作成を行う。

      $ composer create-project --prefer-dist laravel/laravel app "6.*"
      

   3. さきのコマンド実行完了後、作成されたappディレクトリに移動して下記コマンドを実行しアプリケーションキーを作成する。

      $ php artisan key:generate
      

5. 確認

   1. appディレクトリにて下記コマンドを実行しLaravelのバージョンが6.Xになっていることを確認する。

      $ php artisan -V
      

   2. ブラウザにてhttp://localhost:8080にアクセスし、下記の画面が出ることを確認する。

      

   3. 作成されたappディレクトリに移動して下記コマンドを実行しアプリケーションキーを作成する。

      $ php artisan key:generate