Laravel初心者がLaravelでテストコードを書くまでの勉強メモ（チュートリアルの基本タスクリストの開発にトライ その1）

## 背景

* Laravelについて学習し、開発環境を構築した
* ただテストを書くためにはテストをするアプリケーションが必要
* Laravelの知識を深めるために[Laravel 5.2のイントロダクション](https://readouble.com/laravel/5.2/ja/quickstart.html)の基本タスクリストをLaravel 5.8で作成してみる

## Laravelをインストール

お決まりのLaravelインストール

```
composer create-project --prefer-dist laravel/laravel quickstart
```
を実行する。

## DBの準備

### migrationファイル作成

タスク保持のためのテーブルを定義する。
テーブル定義のためのmigrationファイル作成は```make:migration```コマンドを使う。

```
php artisan make:migration create_tasks_table --create=tasks
```
実行し、```database/migrations```を覗くと
```2019_XX_XX_XXXXXX_create_tasks_table.php```
を発見。
つまり上記コマンドは、
「Y_m_d_His_create_tasks_table.phpというmigrationファイルを作ってくれや。
「tasks」ってテーブルを新たに作成するで。」ということらしい。
開いてみると以下のようになっていた。

```php

<?php

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

class CreateTasksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name'); //追記分
            $table->timestamps();
        });
    }

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

upメソッドは新しいテーブル、カラム、インデックスをデータベースに追加するために使用するメソッド、downはその逆とのことなので、id,日付に加えてタスク名を保存するカラムを追加するための記述を追記した。

### migrationファイルの実行

上記で作成したファイルは以下コマンドで実行できる。

```
php artisan migrate
```

## Eloquentモデル

EloquentとはLaravelのデフォルトORM(※データベースとオブジェクト指向プログラミング言語の間の非互換なデータを変換するプログラミング技法を実現する仕組み)

作ったばかりのtasksデータベーステーブルに対応するTaskモデルを定義するために、以下コマンドを実行する。

```
php artisan make:model Task
```

実行後```app```を覗くと```Task.php```を発見。
開いてみると以下のようになっていた。

```php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}
```
具体的な記述はまだ空っぽ。

## ルート定義

### ルートのスタブを定義

※実際のオブジェクトを置き換えて、 設定した何らかの値を (オプションで) 返すようなテストダブルのことを スタブ と言う

タスク表示、タスク追加、タスク削除の3つのルートを```routes```ディレクトリ内のファイルで定義する。

```php:routes/web.php
<?php

use App\Task;
use Illuminate\Http\Request;

/**
 * タスクダッシュボード表示
 */
Route::get('/', function () {
    //
});

/**
 * 新タスク追加
 */
Route::post('/task', function (Request $request) {
    //
});

/**
 * タスク削除
 */
Route::delete('/task/{task}', function (Task $task) {
    //
});
```

### ビューの表示

/ルートを定義する。
上記```routes/web.php```のget部分を

```php
Route::get('/', function () {
    return view('tasks'); //追記分
});
```
のように記載するとview関数に渡したtasksは、```resources/views/tasks.blade.php```テンプレートに対応するビューオブジェクトインスタンスを生成する。

## レイアウトとビューの作成

### レイアウト定義

ビューを作成する。
ビューを置く```resources/views```以下に```layouts/app.blade.php```を定義して、内容はチュートリアルに記載のものとする。

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>

        <!-- CSSとJavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- ナビバーの内容 -->
            </nav>
        </div>

        @yield('content')
    </body>
</html>
```

### 子ビューの定義

新しいタスクを作成するためのフォームと、存在する全タスクを同時に表示するビューを定義する。
```resources/views```以下に```tasks.blade.php```を定義して、内容はチュートリアルに記載のものとする。

```html
@extends('layouts.app')

@section('content')

    <!-- Bootstrapの定形コード… -->

    <div class="panel-body">
        <!-- バリデーションエラーの表示 -->
        @include('common.errors')

        <!-- 新タスクフォーム -->
        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- タスク名 -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">Tasks</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- タスク追加ボタン -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> Create Task
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- TODO: 現在のタスク -->
@endsection
```

※@extendsディレクティブ：resources/views/layouts/app.blade.phpに定義したレイアウトを使用する
※@section('content')から@endsectionの間のコンテンツ：app.blade.phpレイアウトの中の@yield('content')ディレクティブの場所に挿入される
※@include('common.errors')：resources/views/common/errors.blade.phpに設置されているテンプレートをロードする

タスク追加の機能を足す前に/ルートの表示確認がしたいので、
```resources/views/common/errors.blade.php```を定義する。

内容はチュートリアルに記載のものとする。

```php
@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>Error! !</strong>

        <br><br>

        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
```

ここまでを行い一度表示を確認する。
<img width="274" alt="その1.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19908/841a17de-0090-699c-8ac9-171132b64eda.jpeg">

表示された！（Bootstrap CSSの定形コードを省いているので、表示はダサいが致し方なし。。。）

かなり長くなりそうなので、タスク追加と削除は次記事でまとめる。