FrontEnd

Inertia使ってみた②

投稿日:

はじめに

前回はInertiaの基本的な内容について書いてみました。今回はもう少し実践的内容という事で、Inertiaで用意しているフォームリクエスト周りの機能について紹介したいと思います。
前回同様に、Laravel+Reactの組み合わせです。

フォームヘルパー

Reactでフォームリクエストを実装する際は、useStateフックを使用して実装する事が多いと思いますが、Inertiaではフォームに特化したuseFormフックを使う事が出来ます。
Laravel Sailに含まれるサンプルログイン画面を参考にuseFormフックの使い方を見たいと思います。

ポイント

上記例では、useFormで以下のような関数や値を使用しています。一般的なフォーム送信に必要な事項揃っているかと思います。

  • useState同様に、 useForm() の引数に初期値を設定する。ここでは、email、password、rememberの3つでそれぞれ空白となっています。
  • 値更新の際もuseState同様に、 setData で更新する
  • post() 関数だけでフォームデータをPOST通信しています。他に、get、put、delete、patchも用意されています。
  • 通信中かどうかを processing で判別出来ます。ここでは、通信中はログインボタンをdisableにして複数回クリック出来ないようにしています。
  • Controller側でバリデーションエラーが出た場合、フィールドとエラーメッセージが errors に含まれます。ここでは、InputErrorコンポーネントに渡してエラーの場合のみ、メッセージを赤字表示しています
  • reset で値をデフォルト値に戻す事が出来ます。。フィールド名を含めるとそのフィールドが消去され、何も指定しないと全ての値がデフォルト値に戻るようです。

他機能

他にも例便利な関数や値があるので一部紹介すると

transform 関数を使い、送信前のフォームデータを編集する事が出来ます。

フォーム送信が成否を判別する wasSuccessfulrecentlySuccessful の値を見て通信結果を表示する事が出来ます。
通信が成功するとそれぞれtrueの値がセットされます。 recentlySuccessful は2秒間だけtrueがセットされるので、フラッシュメッセージ表示に利用出来ます。

ローディング表示

Progressライブラリのラッパーが用意されています。
app.jsxファイルの設定で表示内容を変更する事が出来ます。

デフォルトの状態だとグルグル表示が画面右上に小さく表示されるだけなので、app.cssファイルにCSSを追加して表示を変更した方が良いかと思います。下は、画面中央に100pxサイズで表示する際の例です。

さいごに

useFormを利用する事でフォームデータの管理からフラッシュメッセージ表示まで一通りの事を簡潔に実装出来そうです。機会があれば使ってみてください。

おすすめ書籍

基礎から学ぶ React/React Hooks TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

[Rails + Materialize] パンくずリスト用のヘルパーを作成した

1 はじめに2 パンくずリストを上書き2.1 サンプルのHTML2.2 CSSの上書き3 ヘルパーにする4 さいごに はじめに またまたMaterialize関連の記事になります。 Materiali ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

フォロー

blog-page_side_responsive

2023年2月
 1234
567891011
12131415161718
19202122232425
262728  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。