0.背景
本記事は、記事「実務未経験状態でLaravelを使用した共同開発」で取り組んだタスクのうち、フォロー、タイムライン機能についてまとめたもの
1.仕様内容
・自身以外のユーザ詳細ページからフォロー可能
・フォロー中かどうかがひと目で分かるUI
・各ユーザの投稿をタイムラインタブへ
・各ユーザのフォローリスト／フォロワーリストを表示
・各リストにページネーション（10件ごと）
UI(デプロイしたもの)
2.タスクの見積もり
期間
・１４日
理由
・フォロー、フォロワーの設計のイメージが出来なかった
・上記に加えて未知のタスクのためエラー、イレギュラー発生及びレビュー、修正期間を想定
実績
・仕様作成完了 ４日
・PR完了 ４日
・PRレビュー修正 ５日
・マージ完了 ６日
3.実装
①Routing
・web.php
・認証済ユーザのみ可能な処理
Route::group(['middleware' => 'auth'], function () {
・上記の(['middleware' => 'auth'])下に記載
・フォロー、フォロー解除処理
Route::post('follow/{id}','FollowsController@follow')->name('user.follow'); // フォロー処理
Route::delete('unfollow/{id}','FollowsController@unfollow')->name('user.unfollow'); // フォロー解除処理
・ユーザ認証不要の処理
Route::prefix('/users')->group(function(){
・上記のprefix('/user')下に記載
・フォロー、フォロワーリスト閲覧処理
Route::get('following/{id}','FollowsController@followingList')->name('list.following'); // フォローリスト表示
Route::get('follower/{id}','FollowsController@FollowerList')->name('list.follower'); // フォロワーリスト表示
②Model
・User.php
・フォロー、フォロワーのリレーション（多対多）
・フォロー、フォロー解除、フォローチェックのメソッドを記載（コントローラで呼び出し）
// フォローリレーション(フォローしているユーザを取得)
public function following()
{
return $this->belongsToMany(User::class, 'follows', 'follower_id', 'following_id');
}
// フォロワーリレーション(フォローされているユーザを取得)
public function followers()
{
return $this->belongsToMany(User::class, 'follows', 'following_id', 'follower_id');
}
// フォローチェック
public function isFollowing($userId)
{
return $this->following()->where('following_id', $userId)->exists();
}
// フォローメソッド
public function follow($userId)
{
//自分をフォローした場合処理中断
if(Auth::id() === $userId){
return false;
}
//存在しないユーザをフォローした場合処理中断
if(!User::find($userId)){
return false;
}
if(!$this->isFollowing($userId)){
$this->following()->attach($userId);
return true;
}
}
// フォロー解除メソッド
public function unFollow($userId)
{
if($this->isFollowing($userId)){
$this->following()->detach($userId);
return true;
}
}
③Migration
・create_Follows_Tableを作成
public function up()
{
Schema::create('follows', function (Blueprint $table) {
$table->bigIncrements('id');
$table->bigInteger('follower_id')->unsigned()->index();
$table->bigInteger('following_id')->unsigned()->index();
$table->timestamps();
//外部キー制約
$table->foreign('follower_id')->references('id')->on('users')->onDelete('cascade');
$table->foreign('following_id')->references('id')->on('users')->onDelete('cascade');
$table->unique(['follower_id', 'following_id']);
});
}
④Controller
・FolloesController.php
・フォロー処理
・フォロー解除処理
・フォローリスト表示
・フォロワーリスト表示
// フォロー処理
public function follow($id)
{
Auth::user()->follow($id);
return back();
}
// フォロー解除処理
public function unFollow($id)
{
Auth::user()->unFollow($id);
return back();
}
// フォローリスト表示
public function followingList($id)
{
$user = User::findOrFail($id);
$following = $user->following()->paginate(10);
return view('users.follows.following', compact('user', 'following'));
}
// フォロワーリスト表示
public function followerList($id)
{
$user = User::findOrFail($id);
$followers = $user->follower()->paginate(10);
return view('users.follows.followers', compact('user', 'followers'));
}
⑤View
・users/follows/following.blade.php
・フォローリスト取得
@if ($user->following->isEmpty())
<p class="text-muted">フォローしているユーザーがいません</p>
@else
<ul>
@foreach ($user->following as $follow)
<li class="d-flex justify-content-start my-4">
<img class="mr-2 rounded-circle" src="{{ Gravatar::src($follow->email, 50) }}" alt="ユーザのアバター画像">
<a class="mx-3" href="{{ route('user.show', ['id' => $follow->id]) }}">{{ $follow->name }}</a>
</li>
@endforeach
</ul>
@endif
・users/follows/followers.php
・フォロワーリスト取得
@if ($user->followers->isEmpty())
<p class="text-muted">フォロワーがいません</p>
@else
<ul>
@foreach ($user->followers as $follow)
<li class="d-flex justify-content-start my-4">
<img class="mr-2 rounded-circle" src="{{ Gravatar::src($follow->email, 50) }}" alt="ユーザのアバター画像">
<a class="mx-3" href="{{ route('user.show', ['id' => $follow->id]) }}">{{ $follow->name }}</a>
</li>
@endforeach
</ul>
@endif
・users/detail.blade.php
・ナビタブ部分に各bladeファイルをinclude
・タイムライン部分は他メンバータスクのposts/postsをinclude
<section class="col-md-8">
<div class="card text-center">
<div class="card-header bg-white">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active bg-white text-primary" id="nav-post-tab" data-bs-toggle="tab" data-bs-target="#nav-post" type="button" role="tab" aria-controls="nav-post" aria-selected="true">タイムライン</button>
<button class="nav-link bg-white text-primary" id="nav-follow-tab" data-bs-toggle="tab" data-bs-target="#nav-follow" type="button" role="tab" aria-controls="nav-follow" aria-selected="false">フォロー</button>
<button class="nav-link bg-white text-primary" id="nav-follower-tab" data-bs-toggle="tab" data-bs-target="#nav-follower" type="button" role="tab" aria-controls="nav-follower" aria-selected="false">フォロワー</button>
<button class="nav-link bg-white text-primary" id="nav-favorite-tab" data-bs-toggle="tab" data-bs-target="#nav-favorite" type="button" role="tab" aria-controls="nav-favorite" aria-selected="false">お気に入り</button>
</div>
</nav>
<div class="tab-content mt-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-post" role="tabpanel" aria-labelledby="nav-post-tab" tabindex="0"> @include('posts.posts', ['posts' => $posts])</div>
<div class="tab-pane fade" id="nav-follow" role="tabpanel" aria-labelledby="nav-follow-tab" tabindex="0"> @include('users.follows.following', ['id' => $user->id])</div>
<div class="tab-pane fade" id="nav-follower" role="tabpanel" aria-labelledby="nav-follower-tab" tabindex="0">@include('users.follows.followers', ['id' => $user->id])</div>
<div class="tab-pane fade text-secondary" id="nav-favorite" role="tabpanel" aria-labelledby="nav-favorite-tab" tabindex="0">to be continued</div>
</div>
</div>
</div>
</section>
4.テスト実施
・フォロー／フォロー解除時のUIおよびDBの変化を確認（followsテーブルの確認）
・各ナビタブ表示内容が正しいか確認
・ページネーションが正しく動作するかを確認（1ページ10件）
5.PRレビュー
・インデント不備指摘（@if〜@endifの間）
→自動生成で対応不可
→自己確認及びaiにインデント確認を依頼し以後の不備対応
6.本実装に関して
・可読性、保守性：フォロー、フォロー解除、フォローチェックのメソッドをControllerかModelのどちらに記載するべきか悩んだ
→結果として、ドキュメントの「Controllerはロジックを持たずシンプルにすべき」という方針に従い、Modelに集約する形で実装