この記事は未経験からフルタイムで仕事をしながら2025年12月までにエンジニアとして転職することを目標に学習している筆者の記録です。初心者として理解しやすい言葉でまとめるように意識して書いています。同じような状況の方がもしいらっしゃれば、一緒に頑張りましょう🔥エンジニア転職まで残り284日！
3/21に学んだこと👩💻
現在プログラミングブートキャンプに参加し、laravelでインスタのクローンアプリを作成中。
- ❤️likeボタンの実装
- likeボタンをクリックした時にハートの横の数字が増える
- likeボタンをクリックした時にハートが赤くなる
- likeボタンを一度クリックした後にもう一度クリックするとlikeの取り消しができる
likeボタンの実装手順
1. LikeController
Controllerとは、ルーターから受け取ったユーザーの処理を行う場所。
LikeController.php
<?php
namespace App\Http\Controllers;
use App\Models\like;
use Illuminate\Http\Request;
class LikeController extends Controller
{
private $like; //「いいね」の情報を管理する箱を用意
public function __construct(Like $like){ //このクラスが使われるときに、「いいね」の情報を入れる箱をセット
$this->like = $like;
}
public function store($post_id){ //いいねボタンが押されたら
$this->like->user_id = auth()->user()->id; //今ログインしている人のID（auth()->user()->id）を「いいね」に入れる
$this->like->post_id = $post_id; //どの投稿にいいねをしたか（$post_id）を入れる
$this->like->save(); //「いいね」を保存
return back();
}
public function destroy($post_id) //いいねを消すとき
{
$this->like->where('user_id', auth()->user()->id)->where('post_id',$post_id)->delete();
//今ログインしている人の「いいね」だけを探し、指定された投稿（$post_id）の「いいね」だったら削除する
return back();
}
}
2. web.php(ルーター）
ルーターとは、ユーザーのリクエストをどのコントローラーのどのメソッドで処理するかを割り振る役割を行う。
web.phpの上部にこちらを追加
web.php
use App\Http\Controllers\LikeController;
//LikeController は App\Http\Controllers というフォルダ（ディレクトリ）の中にある！という宣言。これを書かないとエラーになる。
さらに、下部にも追加
web.php
Route::group(['prefix' =>'like' , 'as'=> 'like.'],function(){
//同じルールのルートをまとめる。すべてのURLの前に like/ をつけて、すべてのルートに like. という名前をつける
Route::post('/store/{post_id}',[LikeController::class,'store'])->name('store');
//POST メソッドで 「いいね」を保存するルートを作る
//URLは /like/store/{post_id}
// LikeController の store メソッドを実行
//名前は like.store
Route::delete('/destroy/{post_id}',[LikeController::class,'destroy'])->name('destroy');
//DELETE メソッドで 「いいね」を削除するルートを作る
//URLは /like/destroy/{post_id}
//LikeController の destroy メソッドを実行
//名前は like.destroy
});
});
3. Post.php(モデル）
モデルはデータベースとの連携係。
Post.php
public function likes(){ //投稿が持つ「いいね」一覧を取得
return $this->hasMany(Like::class);
//この投稿（Post）は、たくさんの Likeを持ってるということ
}
public function isLiked(){ //ログインユーザーがこの投稿を「いいね」しているかチェック
return $this->likes()->where('user_id',auth()->user()->id)->exists();
//likes() を呼び出して、この投稿に紐づいている「いいね」のデータを取得
//where('user_id', auth()->user()->id)
//ログイン中のユーザーの user_id と一致する いいね を探す
//exists() → もしあれば true、なければ false を返す
4. body.blade.php(ビュー）
ビューはブラウザに表示する部分。bladeというテンプレートエンジン（html以外に変数やプログラミングコードを入れることができるもの)を使用し、コードを入れる部分は＠を使用する。
body.blade.php
<div class="col-auto">
@if ($post->isLiked()) // この投稿が「いいね」されているかチェック
<form action="{{route('like.destroy',$post->id)}}" method="post">
//「いいね」していたら(trueの場合）
//like.destroy のルート（= いいねを削除する）にリクエストを送る
@csrf
@method('DELETE') //DELETE メソッドを使って「いいね」を取り消す
<button type="submit" class="btn shadow-none">
<i class="fa-solid text-danger fa-heart" style="font-size: 1.5rem"></i>
//いいねを取り消すので、赤いハートが既に表示されている状態
</button>
</form>
@else
//いいね」していなかったら（false の場合）
<form action="{{route('like.store',$post->id)}}" method="post">
//like.store のルート（= いいねを登録する）にリクエストを送る
@csrf
<button type="submit" class="btn shadow-none">
<i class="fa-regular fa-heart" style="font-size: 1.5rem"></i>
//これからいいねするので、空のハートが表示されている状態
</button>
</form>
@endif
</div>
<div class="col-auto px-0">
<span>{{ $post->likes->count() }}</span>
//この投稿についた「いいね」の数を表示
//likes->count() は、$post に紐づいている likes の数を数えてくれる
</div>
<div class="col text-end">
@foreach ($post->category_post as $category_post)
<div class="badge bg-secondary bg-opacity-50">
{{ $category_post->category->name }}
</div>
@endforeach
</div>
理解が足りない部分、復習事項📖
-
MVCモデルの理解
-
過去の授業の振り返り
-
Laravelの教科書を読む
-
ブラインドタッチの練習