Vue.jsでLaravelのリレーション(belongsTo, hasMany)の値を表示

## Messageモデル
– usersテーブルに対し、messagesテーブルがbelongsToのリレーション関係

public function user(){
        return $this->belongsTo('App\User');
    }

## controller

$messages =Message::where(function($q) use ($foo, $hoge){
// 省略
})->orderBy('***','ASC')->get();

### 通常時のblade
– $message->user->name で名前を呼び出す

@foreach($messages as $message)
// 省略
{{ $message->user ? $message->user->name : '削除済ユーザ' }}
// 省略
@endforeach

# Vue.js使用時
## controller
– with(‘user’)でユーザテーブルの情報も取得する

return Message::with('user')->where(function($q) use ($foo, $hoge){
// 省略
})->orderBy('***','ASC')->get();

## blade
– vueで表示する際は、m.user.name と書く

<div v-for="m in messages">
  // 省略
  <span v-text="m.user.name"></span>
  // 省略
</div>

belongsToもVueで表示できるのか！？　表示できないなら、Vueは断念しようかと思ってた。

Vue.jsでattribute(class, align, imgなど)の三項演算子

## laravel bladeでの三項演算子

@foreach($messages as $message)
 <tr align="{{ $message->id == $id ? 'left' : 'right' }}"> 
 // 省略
@endforeach

## Vue.jsでの三項演算子
– attributeの前にコロン(:)をつける
– 条件判定はカッコ()で囲う

<div v-for="m in messages">
  <tr :align="(m.id === {{ $id }}) ? 'left' : 'right'"> 
  // 省略
</div>

できるんかいな。ワクワクします。

Vue.jsでスクロール下固定

## 通常時(vue未使用)スクロール下固定

<div class="box">
 // content
</div>

<script>
var obj = document.querySelector('.box');
obj.scrollTop = obj.scrollHeight;
</script>

## jQueryでアニメーションでスクロールを下に移動

<div class="box">
 // content
</div>

<script>
$(function(){
   $('.box').delay(100).animate({
     scrollTop: $(document).height()
  }, 1000);
});
</script>

## vue.js使用時
– this.$nextTickを使用
– updatedのコールバックで読み込む

<div id="box">
   <div v-for="m in messages">
   // content
   </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
  message: '',
  messages: []
  },
  methods: {
    // 省略
    scrollToEnd(){
      this.$nextTick(() => {
        const chatLog = document.getElementById('box');
        if (!chatLog) return
        chatLog.scrollTop = chatLog.scrollHeight
        })
    },
　mounted(){
    // 省略
  },
  updated(){
    this.scrollToEnd();
  },

スクロール領域はdivタグで囲っているから、obj.scrollTop = obj.scrollHeight;のままでいけるかと勘違いして少し嵌りました。

Laravel : gitリポジトリからローカル環境でのプロジェクト複製の流れ

———————
$ git clone https://github.com/***/***.git
$ cd ***
$ git branch ${issue}
$ git checkout ${issue}
// vendorの作成
$ php composer.phar install
// .envファイルの作成　※.env.exampleの複製ではなく、必要に応じてMAIL_DRIVER、AWS_ACCESS_KEY、PUSHER_APP_IDなどを記述する
.env
$ php artisan key:generate
// mysql
mysql> create database ***_dev
mysql> use ***_dev

$ php artisan migrate
// テーブルの初期値入力

$ php composer.phar dump-autoload
$ php artisan storage:link
———————

– .env作成のところは、DATABASEだけでなく、MAIL_DRIVER、AWS_ACCESS_KEY、PUSHER_APP_IDを自分用のアカウントで作らないといけないので、丁寧にドキュメントを作成する必要がありそう。
– シンボリックリンクは、git push, git cloneでは設定が反映されないので、改めて設定する必要がある。

extendsの条件分岐

非同期などの機能を実装する際に、同じルーティングで、blade内のインクルードファイルを切り分けたい時
-> if elseだと両方のextendsが読み込まれる為、 三項演算子(?:;)で切り分ける

## 前

@if($id == 1)
	@extends('layouts.hoge')
@else
	@extends('layouts.foo')
@endif

## 後

@extends(($id == 1) ? 'layouts.hoge':'layouts.foo')

ルーティングは要検討か。

laravel 6.x Mailgunからメール送信する書き方

公式ドキュメント: https://readouble.com/laravel/6.x/ja/mail.html

# 前準備
### mailgun
mailgun登録
https://app.mailgun.com/

### guzzleインストール
$ php composer.phar require guzzlehttp/guzzle

※guzzleとは？
https://github.com/guzzle/guzzle
-> Guzzle is a PHP HTTP client that makes it easy to send HTTP requests and trivial to integrate with web services.

### .env

MAIL_DRIVER=mailgun
MAILGUN_DOMAIN=**********.mailgun.org
MAILGUN_SECRET=**********

### config/mail.php
driverをsmtpからmailgunに変更

'driver' => env('MAIL_DRIVER', 'mailgun'),

### config/services.php
特に変更なし

 'mailgun' => [
        'domain' => env('MAILGUN_DOMAIN'),
        'secret' => env('MAILGUN_SECRET'),
        'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'),
    ],

// route, controller, bladeは省略

以上

smtpとは異なり、.envにMAILGUN_DOMAINとMAILGUN_SECRETを設定する必要がある。
services.phpのendpointはデフォルトのまま

smtpを独自に作るとなると大変だが、APIだとサクッと書ける

Laravelでgmailから送信する設定

# gmailから送信する設定
### メール送信するgoogle account
– セキュリティ->2段階認証プロセス on
– アプリパスワード->(メール, mac(or windows))を選択

### .env

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=${domain}@gmail.com
MAIL_PASSWORD=${生成されたアプリ パスワード}
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=${domain}@gmail.com
MAIL_FROM_NAME=sample

$ php artisan config:cache

// route, controller, bladeは省略

587ポートとは？
->メール送信時に使われてきたTCP25番ポート以外で、メール送信の為の専用ポート
->25番ポートブロックでも送信可能になる

outlookでもsmtpホストがありますが、殆ど使われていないのでしょうか。

メール送信時のcontroller・mailableクラスの変数の書き方

– to, cc, bccなど宛先はcontrollerで書く
– mailableクラスのコンストラクターに引数を渡す
– constructorに初期値を設定し、callback関数でルートからプレビューを行うこともできる
– メール本文は、text, htmlどちらも可能。改行はbrタグ

### controller

use Illuminate\Support\Facades\Mail;
use App\Mail\TestMail;
public function index()
    {
        //
        $name = '山本太郎';
        $date = '2020/02/11';
        $status = '完了';
        $to = 'test@gmail.com';
        $cc = 'cc@gmail.com';
        
        Mail::to($to)
            ->cc($cc)
            ->send(new TestMail($name, $date, $status));
        return "its works";
    }

### app/Mail/TestMail.php
$ php artisan make:mail TestMail

public function __construct($name='山田太郎', $date='2020/01/01', $status='テスト')
    {
        //
        $this->title = $date . 'テスト送信';
        $this->date = $date;
        $this->name = $name;
        $this->status = $status;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this
            ->from('from@example.com')
            ->subject($this->title)
            ->view('email.test')->with([
                'name' => $this->name,
                'date' => $this->date,
                'status' => $this->status,
            ]);
    }

### view

{{ $date }}<br>
メール本文<br>
{{ $name }}さんのステータスは{{ $status}}です

### routeプレビュー時

Route::get('/send', 'MailController@index');
Route::get('/send/preview', function(){
	return new App\Mail\TestMail();
});

メールの送信方法と、メール内容の設定はMVCで切り離されているので、非常に管理しやすいように思います。

mailtrapによるテスト送信の流れ

Dev、STG環境でのメール送信にmailtrapを使用できる
https://mailtrap.io/

### 特徴
– 開発用
– Inboxに保管できるメール数の上限は50通
– Inboxはひとつだけ

### .env
Integrationsの”Laravel”の内容を記述します

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

### make:mail
$ php artisan make:mail TestMail

app/Mail/TestMail.php が生成される

public function build()
    {
        return $this
            ->from('from@example.com')
            ->subject('テスト送信')
            ->view('email.test');
    }

### メール本文
resources/views/email/test.blade.php

メール本文

### route

Route::get('/send', 'MailController@index');

### controller
$ php artisan make:controller –resource MailController

public function index()
    {
        //
        Mail::to('test@gmail.com')
            ->send(new TestMail());
        return "its works";
    }

$ php artisan serve –host 192.168.33.10 –port 8000

mailtrapを確認すると、送信済となっています。
controllerから、メールを送る際に変数を扱いたいと思うので、続けてやっていきたいと思います。

Promiseとは？

### 「同期処理」と「非同期処理」
– 同期処理は上から下へ順番に1つずつ処理
– 非同期処理は時間が掛かりそうな処理を実行した後に、結果を待たずにすぐ次の処理を実行

## promise
引数「resolve」に取得したい値を設定することで、非同期処理の結果を格納

var result = new Promise(function(resolve){
		resolve(new Date);
	});

	result.then(function(data){
		console.log(data.getFullYear());
	});

then()の処理を実行することで、階層が複雑化しない