案件受注サイト構築 ③開発 Part2　Laravelについて学んだこと

前回、環境構築をしてトップページをGitHubレポジトリにプッシュして終わったと思います。

次の記事は完成品を投稿するという予定でしたが、Laravelを使って開発していく中でなかなか結論まで出てこなかったことがあったので、今後Laravelに取り組む人たちの参考になればと思い、記事を書くことにしました。

1. なぜreturn view()を使うのか？そして、なぜredirect()を使うのか？

Laravelにはページ遷移用のメソッドが2つ用意されています。

それが、return view()とredirect()です。

それぞれコントローラの中で使うことで画面遷移させるメソッドなのですが、これらがそれぞれどんな違いがあってどう使い分けなければならないのかが疑問でした。

そこで「laravel return view redirect 違い」と調べてみると、まず次のような記事に出会いました。

Laravel view()とredirect()の違いについてまとめてみた - Qiita

ざっくり要約すると、画面遷移の前にルーティングを通すかどうかの違いであると書いてあります。

return view()　・・・　ルーティングを通さず直接ビューにアクセスする。
redirect()　　　　　　　・・・　一度ルーティングを通してビューにアクセスする。

この記事でプロセスの違いは分かったのですが、そのプロセスの違いによってどういう理論でそのプロセスを使い分けるのかが分からなかったので、どうしたものかと頭を悩ませていました。

英語での検索も試みましたが、だいたい同じことが書いてありました。

GETのときはreturn view()を使って、POSTのときはredirect()を使うのが一般的という話が多く、理由について解説している記事はほとんどありませんでした。

しかし、GETとPOSTについての話題が上がっていたので、一つの仮説が思い浮かびました。

return view()とredirect()の違いは、POSTのリクエストに対してそのままPOSTのリクエストでページ遷移するのか、確実にGETのリクエストでページ遷移するのかの違いであるという仮説です。

そこで、実験的にPOSTのリクエストでフォームを送信し、ページ遷移先で「var_dump($_POST)」としてみたところ、次の結果が出ました。

return view()の場合
→前の画面のフォームで入力した内容が配列で表示された。
→つまり、POSTリクエストで入力内容がパラメータとして渡されていた。

redirect()の場合
→画面には何も表示されなかった。
→POSTリクエストによりパラメータは渡されていなかった。

このことから、return view()の場合は、POSTでリクエストで渡されたパラメータをそのままPOSTリクエストで渡して画面遷移します。

それに対し、redirect()はPOSTのリクエストに対しても、必ずGETのリクエスト（正しくはルーティングで指定されたメソッド）で画面遷移するため、前の画面から渡されたパラメータは遷移先のビューには渡さないということが分かりました。

つまり、次の画面にそのままPOSTでパラメータを渡したい場合は、return view()を使って、パラメータを次の処理から消したい場合はredirect()を使うということになります。

2. LaravelにjQueryを導入

こちらの記事を参考にしました。

Laravelでjavascript、jQueryを使う方法

npm install jquery

参考にした記事では「--save」というオプションが付いていますが、調べてみるとv5以降のnpmではデフォルトで同じ処理が実行されるようなので、つけなくて良いようです。

インストールが完了したら、動作確認です。

「webpack.mix.js」にautoloadとコンパイルするjsファイルを追加します（下のコードの２行目と３行目）。

mix.js('resources/js/app.js', 'public/js')
   .js( 'resources/js/sample.js', 'public/js' )
   .autoload({"jquery": [ '$', 'window.jQuery' ],})
   .sass('resources/sass/app.scss', 'public/css')
   ......................中略........................
   .sass('resources/sass/orders/confirmation.scss', 'public/css/orders')
   .sourceMaps();

resources/js配下にsample.jsを作成し、下記のコードを追加します。

$( function (){
   console.log('run jquery');
} )

「run jquery」とコンソールに出力する処理です。

どこかのページに下記のタグを追加して、ファイルを読み込みます。

<script src="{{ asset('/js/sample.js') }}"></script>

右の赤枠で囲っているところを見ると、ちゃんと出力されているようなので、うまくいったようです。

3. Laravelでトランザクションを張る方法

DB::beginTransaction(); // トランザクション開始

try {
	DB::commit(); // トランザクションをコミット
} catch(Exception $e) {
	DB::rollBack(); // トランザクションをロールバック
}

4. Laravelで処理が成功したときにメッセージを表示させる方法

こちらの記事を参考にしました。

【Laravel】セッションを利用してリダイレクト先にメッセージを表示させる【Laravel】セッションを利用してリダイレクト先にメッセージを表示させる | Points & Lines

まずリダイレクト時にセッションとして値を渡す処理を次のようなコードで書きます。

return redirect()->route('orders.create')
  ->with('success', 'お問い合わせを送信しました。');

次にview側でこのセッションを受け取り表示させます。

@if (session('success'))
   <p>{{ session('success') }}</p>
 @endif

これでメッセージが表示されます。

とりあえず問い合わせフォームの実装までは完了しました。

コードはGitHub上に公開しています。

GitHub - Yokota0204/contact_app: 案件受注サイトを構築します。

GitHub - Yokota0204/leonsans: Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.

今後の実装の流れを整理します。

・問い合わせ後の自動メール送信の実装。
・問い合わせのダッシュボードを設計。
・問い合わせのダッシュボードを実装。
・一次リリース（問い合わせフォームさえあればとりあえず使えるという判断。あと待ちきれない...）。
・料金設定。
・料金画面設計。
・料金画面実装。
・開発エンジニア紹介画面の紹介文を作成。
・開発エンジニア紹介画面のデザインを作成。
・開発エンジニア紹介画面実装。