Laravel+React+Superagentでフォームを実装

bmf-san アプリケーション
#Laravel#React#AJAX#superagent

表題の通りです。 Laravel+React+SuperagentでAjaxなフォームを実装します。

AjaxライブラリとしてSuperagentを採用しているのは、jQueryから脱却したいのと、jQueryのAjaxよりも分かりやすかったからです。 プロミスとかいう難しい概念があるらしいですが、それは横に置いておいてもとりあえずは使えそうです。

Web標準の観点からするとFetchAPIがイケてるらしいのですが、各ブラウザベンダーの実装にばらつきがあるようなので避けました。

フロントエンドってつくづくカオスだなーとボヤキつつも話を進めていきたいと想います。

やること

  • LaravelでAPIを用意する
  • FormRequestのレスポンスをJSONにする
  • ReactでLaravelのAPIをSuperagentでたたく→getとpostの確認

やらないこと

  • ビルド環境のセットアップ
  • reactやsuperagentのセットアップ

Laravel側の実装　

順番テキトーですが、ご了承ください。。。

ルーティング

ビュー

色々省略しちゃいます。 こんな感じでコンポーネント召喚しますよーという体だけです。

コントローラー

実際はResouceControllerでAPIつくって、Restな感じに仕立てているのですが、詳しい作り方は省きます。

Request(FormRequest)

FormReqeustでエラーをJsonで返す方法ですが、Illuminate/Foundation/Http/FormRequestのresponseメソッドをオーバーライドしてあげるだけです。

それで使い方はいつものFormRequestと同じです。 エラーがあればJsonResponseでエラーメッセージを返してくれます。

Laravel API - FormRequest

CSRF Tokenの例外設定

VerifyCsrfToken.phpで設定を忘れずに済ませておきます。

Laravel側はこれで完了です。

React側の実装

所感

結構雑につくったので手直しすべきところは多そうです。

アーキテクチャも大事ですが、モダンなJavaScriptの書き方はもっと勉強して柔軟にかけるようにすべきだと思いました。

参考