Help us understand the problem. What is going on with this article?

Laravel:ブラウザ上の大量のinput要素に自動的に動作確認用のダミーデータを挿入する方法

はじめに

これは @moobay9 さんに教えていただいた方法を記録&自分用のメモのために残しております。

Laravelに限らず開発をする際において、ブラウザ上で動作確認のテストをすることは重要だと思います。(テストコードを書けという意見もありますが、初心者のうちはテストコードなんて書くのが難しかったりしますので、そこは多めにみてください…)

ブラウザ上で動作確認のテストをする際、大量のinput要素に一個一個手打ちでデータを入れていくのはとても手間がかかり、面倒な作業です。例えば、それが100個のinput要素だったりした時には面倒で面倒で仕方ないと思います。そこで、特定のURLにアクセスすると自動的に動作確認用のダミーデータを挿入する方法を書いていこうと思います。

サンプルコードと解説

今回はサンプルなので実際に使う際は自分なりに変えて使ってみてください。
例えば下記のように、こんなマイグレーションファイルがあったとします。

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('content1');
            $table->string('content2');
            $table->string('content3');
            $table->string('content4');
            $table->string('content5');
            $table->string('content6');
            $table->string('content7');
            $table->string('content8');
            $table->string('content9');
            $table->string('content10');
            $table->timestamps();
        });
    }

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

contentを今回は10個用意しました。

さて、次はbladeですが、このように記述します。

@extends('layouts.app')

@section('content')

    <form action="{{ url('/posts/create') }}" method="post">
        @csrf
        @method('POST')

        <label for="content1">content1</label><br>
        <input type="text" name="content1" id="content1" value="{{ old('content1', ($post) ? $post->content1 : '') }}"><br>

        <label for="content2">content2</label><br>
        <input type="text" name="content2" id="content2" value="{{ old('content2', ($post) ? $post->content2 : '') }}"><br>

        <label for="content3">content3</label><br>
        <input type="text" name="content3" id="content3" value="{{ old('content3', ($post) ? $post->content3 : '') }}"><br>

        <label for="content4">content4</label><br>
        <input type="text" name="content4" id="content4" value="{{ old('content4', ($post) ? $post->content4 : '') }}"><br>

        <label for="content5">content5</label><br>
        <input type="text" name="content5" id="content5" value="{{ old('content5', ($post) ? $post->content5 : '') }}"><br>

        <label for="content6">content6</label><br>
        <input type="text" name="content6" id="content6" value="{{ old('content6', ($post) ? $post->content6 : '') }}"><br>

        <label for="content7">content7</label><br>
        <input type="text" name="content7" id="content7" value="{{ old('content7', ($post) ? $post->content7 : '') }}"><br>

        <label for="content8">content8</label><br>
        <input type="text" name="content8" id="content8" value="{{ old('content8', ($post) ? $post->content8 : '') }}"><br>

        <label for="content9">content9</label><br>
        <input type="text" name="content9" id="content9" value="{{ old('content9', ($post) ? $post->content9 : '') }}"><br>

        <label for="content10">content10</label><br>
        <input type="text" name="content10" id="content10" value="{{ old('content10', ($post) ? $post->content10 : '') }}"><br>

        <input type="submit" value="送信">
    </form>

@endsection

続いて、web.phpも書いていきます。

Route::get('/', 'PostsController@index');
Route::get('/posts/create/{type?}', 'PostsController@create');
Route::post('/posts/create', 'PostsController@store');

2行目に書いてある/posts/create/{type?}が今回重要になってきます。{type?}はLaravelの任意パラメータというものになります。詳しくはドキュメントを参考にしてください。

このように記述し、アプリ名/posts/createにアクセスすると、下のようなフォームができていると思います。
image.png

フォームができていることを確認したら次はコントローラーを記述していきます。
今回はサンプルで作ったのでバリデーションなどは書いていません。適宜、自分のサービスに合わせてバリデーションを書いてください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class PostsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $posts = Post::all();

        return view('posts.index',[
            'posts' => $posts,
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create($type = null)
    {   
        $post = [];

        if(!is_null($type)){
            $post = new Post;
            $dummy_data = config('form_dummy_data');
            if(array_key_exists($type, $dummy_data)){
                foreach($dummy_data[$type] as $_key => $_val){
                    $post->$_key = $_val;
                }
            }
        }

        return view('posts.create',[
            'post' => $post,
        ]);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $post = new Post;
        $post->content1 = $request->content1;
        $post->content2 = $request->content2;
        $post->content3 = $request->content3;
        $post->content4 = $request->content4;
        $post->content5 = $request->content5;
        $post->content6 = $request->content6;
        $post->content7 = $request->content7;
        $post->content8 = $request->content8;
        $post->content9 = $request->content9;
        $post->content10 = $request->content10;
        $post->save();

        return redirect('/');
    }
}

ここで重要になるのはcreateメソッドです。一部抜粋します。

public function create($type = null)
    {   
        $post = [];

        if(!is_null($type)){
            $post = new Post;
            $dummy_data = config('form_dummy_data');
            if(array_key_exists($type, $dummy_data)){
                foreach($dummy_data[$type] as $_key => $_val){
                    $post->$_key = $_val;
                }
            }
        }

        return view('posts.create',[
            'post' => $post,
        ]);
    }

ダミーデータをconfigから呼んでいます。
では、そのダミーデータをconfigディレクトリにファイルを作成して、記述しましょう。
この時に使うファイル名は上で書いたform_dummy_data.phpとします。

<?php

return [
    // バリデーションを通過する入力データ
    'post_create_true' => [
        'content1'  =>  'content1',
        'content2'  =>  'content2',
        'content3'  =>  'content3',
        'content4'  =>  'content4',
        'content5'  =>  'content5',
        'content6'  =>  'content6',
        'content7'  =>  'content7',
        'content8'  =>  'content8',
        'content9'  =>  'content9',
        'content10' =>  'content10',
    ],

    // バリデーションを通過しない入力データ
    'post_create_false' => [
        'content1'  =>  'content1',
        'content2'  =>  'content2',
        'content3'  =>  'content3',
        'content4'  =>  'content4',
        'content5'  =>  'content5',
        'content6'  =>  'content6',
        'content7'  =>  'content7',
        'content8'  =>  'content8',
        'content9'  =>  'content9',
        'content10' =>  'content10',
    ]
];

trueとfalseで分けているのは、コメントの通り、バリデーションを通すデータと通さないデータに分けているからです。

これでいったん完成なのですが、それでは今度は、アプリ名/posts/create/post_create_trueか、アプリ名/posts/create/post_create_falseにアクセスしてみてください。フォームに自動的にデータが挿入された状態になっていると思います。
image.png

最後に

ブラウザ上で大量のinput要素に自動的にダミーデータを挿入する方法を書きました。
本来ならテストコードを書くべきなのですが、冒頭にも述べた通り、初心者には難しかったり、テストを書く時間がない場合など様々な場面で使えると思います。
ダミーデータも自分のサービスに合わせて作り変えたりして活用してみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした