投稿機能 (実務未経験状態でLaravelを使用した共同開発 タスク4)

0.背景

本記事は、記事「実務未経験状態でLaravelを使用した共同開発」で取り組んだタスクのうち、投稿機能についてまとめたもの

1.仕様内容

・トップページに投稿フォーム作成
・テキストエリアへ入力、投稿ボタンでpostsテーブルへ保存
・空欄では投稿不可（バリデーション）
・ユーザがログイン状態のみ投稿フォーム表示

UI ※デプロイしたもの

2.タスクの見積もり

期間

・７日

理由

・メンバーのタスクがマージによるコンフリクト解消期間を考慮
・他メンバーの作業によるコンフリクト発生の可能性を想定
・実装中のエラー対応やレビュー対応時間も含めて算出

実績

・仕様作成完了　４日
・PR完了　４日
・PRレビュー後修正　５日
・マージ完了　７日

3.実装

①routing
・web.php
・PostControllerのstoreメソッドを使用
・ログインユーザーのみが利用できるよう、auth ミドルウェアを適用
・投稿関連のルーティングを /posts にまとめるため prefix を使用

Route::group(['middleware' => 'auth'], function(){
    Route::prefix('/posts')->group(function(){
        Route::post('/','PostsController@store')->name('post.store'); // 新規登録処理
    });
});

②Model
・Post.php
・保存対象カラムの指定（$fillable）
・User モデルとのリレーション設定（1対多）

    protected $fillable = ['user_id', 'content'];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

・User.php
・Post モデルとのリレーション設定（1対多）

    public function posts()
    {
        return $this->hasMany(Post::class);
    }

③Controller
・PostsControllerを作成
・storeメソッドを記述
・PostRequest を使ってバリデーション処理を行う
・投稿保存処理を store メソッドに記述
・トップページへ戻る

    public function store(PostRequest $request)
    {
        Post::create([
            'user_id' => auth()->id(),
            'content' => $request->validated()['content'],
        ]);

        return redirect('/');
    }

④FormRequest
・PostRequestを作成
・空投稿、141字以上の投稿を弾くバリデーション設定

public function authorize()
    {
        return true;
    }
    
    public function rules()
    {
        return [
            'content' => ['required', 'max:140'],
        ];
    }

    public function messages()
    {
        return [
            'content.required' => '内容は必須です。',
            'content.max' => '投稿は140文字以内で入力してください。',
        ];
    }

⑤view
・posts/add_post.blade.phpを作成しトップページの該当箇所へinclude
・@csrf を使用してCSRF対策
・route('post.store') で投稿処理へ接続

<div class="text-center mb-3">
    <form method="POST" action="{{ route('post.store') }}" class="d-inline-block w-75">
        @csrf
        <div class="form-group">
            <textarea class="form-control" name="content">{{ old('content') }}</textarea>
            <div class="text-left mt-3">
                <button type="submit" class="btn btn-primary">投稿する</button>
            </div>
        </div>
    </form>
</div>

4.テスト実施

・ログイン状態でのみ投稿画面表示を確認
・投稿機能の確認
・空欄投稿や140文字超の投稿時にエラーメッセージが表示されることを確認

5.PRレビュー

・他メンバーのPRと一部内容が重複・矛盾していたため、自分のコードを修正
・該当PRの仕様・影響範囲も確認しながら対応を実施

6.本実装に関して

・再利用性：投稿フォームを部分テンプレートとしてカプセル化したことで、他画面でも再利用可能な設計にできた
・他メンバーのタスクとの連携・影響確認や、コンフリクト解消のプロセスを通じて、チーム開発における調整の重要性を学んだ