目次
1.Qiitaのタグ登録機能
2.対象読者
3. 完成品とコード
4. 仕組み 
ここだけ理解できればいいと思います。
5. コード解説 わかりにくい
1. Qiitaのタグ登録機能
↓これです。画面遷移無しでタグの登録をする機能です。
HTML,CSS,PHPしか書けなかった私が憧れていた「画面遷移無しでのデータベースの操作」です。
実装方法を解説していきます。
※ ぶっちゃけ4. 仕組み のところだけ理解して、fetchAPIの使い方を学べば実装できると思います。
Fetch の使用 - Web API | MDN
2. 対象読者
①LaravelのMVCがチョットワカルひと。
②HTTPのGETとPOSTがチョットワカルひと。
③JavaScriptのFetchAPIがチョットワカルひと。
※JQueryや他のライブラリは使わず生のJavaScriptで実装します。
3. 完成品とコード
↑クリックと同時にお気に入り状態をデータベースに反映しています。
showTag.blade.php
@if(empty(Auth::user()->favoriteTags()->where('tag',$searched_tag->tag)->first()))
<button id="register-fav-tag-btn" class="register-fav-tag-btn" type="submit" >
<div id="tag-heart" class="heart"></div>
<p>お気に入りのタグにする</p>
</button>
@else
<button id="register-fav-tag-btn" class="register-fav-tag-btn active" type="submit" >
<div id="tag-heart" class="heart active"></div>
<p>お気に入り登録済み</p>
</button>
@endif
<script>
const tag_btn = document.getElementById('register-fav-tag-btn');
const formData = new FormData();
formData.append('tag',"{{ $searched_tag->tag }}")
tag_btn.addEventListener('click',()=>{
// console.log(formData.get('tag'));
tag_btn.classList.toggle('active');
const btn_child = tag_btn.lastElementChild
if(btn_child.innerText === 'お気に入りのタグにする'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入り登録済み';
tag_btn.replaceChild(new_child,btn_child);
}else if(btn_child.innerText === 'お気に入り登録済み'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入りのタグにする';
tag_btn.replaceChild(new_child,btn_child);
};
const tag_heart = document.getElementById('tag-heart');
tag_heart.classList.toggle('active');
fetch("{{ route('user.registerFavoriteTags') }}",{
method: 'POST',
body: formData,
headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}, //Laravelの場合これが必要
})
.then((Response)=>{
if(Response.status == 200){
console.log('成功しました');
}else{
console.log('失敗しました');
tag_btn.classList.toggle('active');
const btn_child = tag_btn.lastElementChild
if(btn_child.innerText === 'お気に入りのタグにする'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入り登録済み';
tag_btn.replaceChild(new_child,btn_child);
}else if(btn_child.innerText === 'お気に入り登録済み'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入りのタグにする';
tag_btn.replaceChild(new_child,btn_child);
};
const tag_heart = document.getElementById('tag-heart');
tag_heart.classList.toggle('active');
};
})
})
</script>
長い。（小並感）
4. 仕組み
どのような仕組みで画面遷移無しでデータベースを更新しているのかを図に表します。
流れをフロントとバックで分けるとこんな感じ
細かい流れ
本稿では主に①の部分を解説します。
①の流れ
1，ボタンの表示
2，HTTPヘッダーに変更したいデータを挿入する処理
3-1、ボタンにクリックイベントを付ける
3-2、クラスの付け替えでボタンのCSSを変更する
3-3、fetchでTagControllerにデータを送信
5. コード解説
上記のコードにコメントアウトで解説を付けたものがコチラ。
showTag.blade.php (View)
// 1，ボタンの表示--------------------------------------------------------------------------------------
@if(empty(Auth::user()->favoriteTags()->where('tag',$searched_tag->tag)->first()))
// もし既にタグをお気に入りに登録していないなら↓
<button id="register-fav-tag-btn" class="register-fav-tag-btn" type="submit" >
<div id="tag-heart" class="heart"></div>
<p>お気に入りのタグにする</p>
</button>
@else
// タグをお気に入りに登録しているなら↓
<button id="register-fav-tag-btn" class="register-fav-tag-btn active" type="submit" >
<div id="tag-heart" class="heart active"></div>
<p>お気に入り登録済み</p>
</button>
@endif
// ボタンの表示完成-------------------------------------------------------------------------------------
// 2，HTTPヘッダーに変更したいデータを挿入する処理--------------------------------------------------------------
<script>
// ボタンの要素を取得
const tag_btn = document.getElementById('register-fav-tag-btn');
// ボタンの要素をHTTPヘッダーへ乗せる準備としてFormDataオブジェクトを新規作成
const formData = new FormData();
// FormDataオブジェクトのappendメソッドでHTTPヘッダーに【tag => 'タグの主キー'】をセット
formData.append('tag',"{{ $searched_tag->tag }}") // $searched_tag->tagにはタグの主キー（タグ名）が入っている。
// HTTPヘッダーにデータの挿入準備完了------------------------------------------------------------------------
// 3-1、ボタンにクリックイベントを付ける
tag_btn.addEventListener('click',()=>{
// 3-2、クラスの付け替えでボタンのCSSを変更する処理------------------------------------------------------------
tag_btn.classList.toggle('active');
const btn_child = tag_btn.lastElementChild
if(btn_child.innerText === 'お気に入りのタグにする'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入り登録済み';
tag_btn.replaceChild(new_child,btn_child);
}else if(btn_child.innerText === 'お気に入り登録済み'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入りのタグにする';
tag_btn.replaceChild(new_child,btn_child);
};
const tag_heart = document.getElementById('tag-heart');
tag_heart.classList.toggle('active');
// ボタンのCSSを変更する処理の記述完了------------------------------------------------------------
// 3-3、fetchでTagControllerのお気に入り登録をするメソッドにデータを送信-----------------------------
fetch("{{ route('user.registerFavoriteTags') }}",{
method: 'POST', // メソッドはPOST
body: formData, // bodyには2で書いたデータが挿入される。コントローラー側ではrequest->tagで受け取る。
headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}, // Laravelの場合これが必要
})
// 送信完了
// ↓
// 送信先のコントローラーのメソッドで処理された結果が返ってくる。
// ↓
// Responseから結果を受け取る（ここからは上の図の丸４部分の処理です）
// 登録・更新が成功すればHTTPステータスコード200が返ってくる
.then((Response)=>{
// HTTPステータスコードが200ならば↓
if(Response.status == 200){
console.log('成功しました');
}else{
// HTTPステータスコードが200以外ならば↓
console.log('失敗しました');
// 一度クリック後に変更したCSSをクリック前のCSSに戻す。
tag_btn.classList.toggle('active');
const btn_child = tag_btn.lastElementChild
if(btn_child.innerText === 'お気に入りのタグにする'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入り登録済み';
tag_btn.replaceChild(new_child,btn_child);
}else if(btn_child.innerText === 'お気に入り登録済み'){
const new_child = document.createElement('p');
new_child.innerText = 'お気に入りのタグにする';
tag_btn.replaceChild(new_child,btn_child);
};
const tag_heart = document.getElementById('tag-heart');
tag_heart.classList.toggle('active');
};
})
})
</script>
最後に
ぶっちゃけ解説が分かりにくいです。だってControllerの処理内容とか書いていないし、そもそもワタクシのコードが読みにくいと思います。
とりあえずワタクシのコードは参考にせず、4. 仕組み のところだけ理解して実装してみたらいいと思います。