みなさん、こんにちは。ノマドっていいなと夢見るt-odaです。

さて、今回が最後のチュートリアルになります。最後の目標は、タスクの削除とちょっとしたメッセージの表示をしたいと思います。メッセージはjQueryを利用して、表示して数秒すると自動的に消えるというものです。とても簡単なのでぜひ覚えましょう!それではそれぞれ見ていきましょう!

削除処理

まずはroutes.phpで残っているルートがありますね。そう、Route::delete() です。このメソッドは他のメソッドとは少し違った引数になります。それは{id}の部分ですが、これは削除するタスクを指定するためのものになります。この指定するものは必ずユニークなものにしないといけないですね。例えば、タスクテーブルのidが1のタスクのレコードを削除する、という感じ。それぞれのタスクはidを持ち、このidはプライマリーキーとして設定しています。つまり重複はないはずなので余計なタスクまで削除されることはありませんね。

ちなみに、この{id}はあくまで引数として使われるものなので必ずしもidである必要はありません。ですが、なるべく意味の通るものにすべきです。

以下、処理の流れです。

  • 引数としてid(数値)を受け取る
  • 受け取ったidに合致するタスクレコードを削除
  • 一覧画面へリダイレクト

やっぱりそこまで難しくないですね。では実際に処理を書いてみましょう。

まずはフォーム部分の作成です。tasks.blade.phpのTODOとしていた部分に削除のためのフォームを追加しましょう。

さて、{{ method_field('delete') }}という見慣れないメソッドが書かれています。これは、HTMLのフォームはGETもしくはPOST以外は許可していないので、フォームをDELETEリクエストに見せかける必要があるためです。PUTやPATCHのときも同様に引数に指定します。これで、すでに定義しているRoute::deleteが動きます。

その他は通常のフォームと同じですね。

次はroutes.phpになります。

ここでも新しくメソッドがでてきますね。findOrFail()です。このメソッドは引数にプライマリーキーをとり、そのプライマリーキーを検索条件にしてデータベースから該当のレコードを取得します。そして、該当のレコードが存在すればそのまま取得、なければ404エラーを出します。今回ならプライマリーキーはidなので、SQLで言えばwhere id = 1のような検索条件になります。ちなみに、第2引数に配列で取得したいカラムを指定するこもできます。SQLのSELECTにあたる部分の指定になりますね。指定がなければ全カラムを取得します。

  • findOrFail()の第1引数:プライマリーキーに相当する値
  • findOrFail()の第2引数:取得したいカラム(配列で指定する)

findOrFail()にチェーンしてdelete()を実行することで対象のタスクを削除できます。先ほども説明した通り、findOrFail()で該当のレコードを取得できたときにdelete()が動き、取得できなければ404エラーになります。

エラー無く削除ができれば、一覧画面へリダイレクトして処理は完了。これで、初心者向けタスクリストの解説はすべて終わりました。

どうですか?簡単だと感じた方も少しつまづいた方もいると思います。こんなに簡単にCRUDが実装できるなんてLaravelは素敵だと思いませんか?

また、この5回は楽しくできました。ありがとうございました。次は、中級者向けの解説にします。では!

最後にメッセージの表示

ここからはチュートリアルにありませんが僕のちょっとした遊び心です。チュートリアルとは関係ありませんので飛ばしても問題ないです。ちなみに、これはLaracastというLaravelを動画で解説するサイトを参考にしました。

まぁやってることはエラー表示と似ていますね。もうちょっと詳しく言いますと次のようになります。

タスクを登録した時や削除した時に「タスクが登録されました!」や「タスクが削除されました!」というメッセージを表示させて何秒かしたらそのメッセージを消すということをします。

では、処理の流れを簡単に説明します。

  • 登録と削除の処理にフラグを持たせる(routes.php)
  • 一覧のビューでメッセージ用のdivを作る(tasks.blade.php)
  • jQueryでメッセージ用のdivに対してslideUpメソッドを使って非表示にする

jQueryを使いますが1行しかかかない上にそんなに難しいことはしてないのですんなり理解できると思います!

まずはフラグを持たせることです。フラグの持たせ方は色んな方法が考えられますが、フラッシュセッションを使うことにしましょう。フラッシュセッションは次の1回の通信のみ有効なセッションのことでしたね。登録も削除も処理が終わった後に一覧にリダイレクトしています。そのタイミングでメッセージを表示させるだけでいいので、ずっと通常のセッションで保持しなくてもいいわけです。ただ、メッセージの内容やフラグの種類は違いますのでご注意を。では、routes.phpを次のように書き換えます。

フラッシュセッションの利用方法は2つあります。ファサードとヘルパー関数です。

  • ファサード:\Session::flash()
  • ヘルパー関数:session()->flash()

どちらでも問題ないですが、引数は2つです。以下はファサードの例です。

  • \Session::flash()の第1引数:セッション名
  • \Session::flash()の第2引数:セッションの値

それぞれ登録時と削除時のメッセージを格納しましょう。このとき、アラートの色を動的に変えたいですね。アラートはクラスを変えることで色を変えることができますので、削除時にはもうひとつフラッシュセッションに削除だと判別できるフラグをmessage-dangerというセッション名で保持しましょう。

ビューでそのフラグを見て、アラートのクラスを変化させます。tasks.blade.phpにアラート部分を追加しましょう。

Session::has()でセッションが存在するかどうかを判断しています。引数にはroutes.phpで指定したセッション名を指定します。Session::has('message')がそうですね。これで、登録時と削除時にメッセージが表示されるようになります。

次に、アラートの色を動的に変化させている部分です。三項演算子を利用して書いています。このくらいの短いものならわざわざifを使うより三項演算子のほうがすっきり書けると思います。

削除の時にalert-dangerというセッション名にtrue(boolean)を格納しており、その時だけクラス名はalert-dangerになるようにしていますので登録時は薄い緑色、削除時は薄い赤色で表示されると思います。

最後に動きをつけましょう。jQueryを使うので、CDNでjQueryを読み込んだ後に記述してください。なので、master.blade.phpの次の部分に動きの記述を追加します。

この1行を追加することで、表示されたアラートを自動的に消してくれます。

やってることは簡単です。クラス名alertがついたdiv要素に対して、ページ読み込んでから3000ミリ秒(=3秒)経ったら、300ミリ秒(=0.3秒)かけて上方向にスライドさせて非表示にする、ということをやっています。jQueryは.(ドット)でチェーンメソッドにできます。このほうがすっきりします。

  • クラス名alertがついたdiv要素に対して:$('div.alert')
  • ページ読み込んでから3000ミリ秒(=3秒)経ったら:$('div.alert').delay(3000)
  • 300ミリ秒(=0.3秒)かけて上方向にスライドさせて非表示にする:$('div.alert').delay(3000).slideUp(300);

こんな感じでjQueryで動きをつけるとよりアプリケーションぽくなりますね。

以上で、ほんとに最後です。ありがとうございました。