【5日目】React初学者が1週間でどこまで出来るか挑戦（Createフォーム改善）

公開: 2023-10-11

はじめに

React学習1週間チャレンジ5日目です。今日は仕事終わって即帰宅しましたが、晩御飯をちゃんと作ってたら時間過ぎるのが早過ぎました。平日夜に勉強時間確保するのはかなりの効率が求められます。

さて、今日は昨日作成したユーザーCreateフォーム改善しました。

前回の振り返り:

useEffect

Laravel Breezeで生成されるユーザー登録フォームを参考にすると、useEffectが使われている。

// src/resources/js/Pages/Auth/Register.jsx
useEffect(() => {
    return () => {
        reset('password', 'password_confirmation');
    };
}, []);

Reactドキュメント参照: useEffect – React

useEffect(setup, dependencies?)
  • 第一引数: setup関数。コンポーネントがDOMに追加されるとsetup関数が実行される。（関数の実行をレンダリング後まで遅らせる）また、クリーンアップ関数を登録できる。Reactは最初に古い値でクリーンアップ関数実行し、その後に新しい値でsetupを実行する。
  • 第二引数: 依存関係を追加できる。依存関係が変更された時だけ処理を実行できる。（配列を渡せば初回レンダリング時だけ実行）

このuseEffectは、コンポーネントがアンマウントされる時にpasswordとpassword_confirmationのフィールドをリセットする。目的は、入力途中でユーザーがページ離脱した時にセキュリティ上の観点で入力情報を残さないようにすること（だと思う）。

ZiggyでLaravelのrouteメソッドを使う

postに指定するURLは、Laravelのrouteメソッドでroute('users.store')のように名前付きルートで指定できたら便利だ。ただ、jsx内でLaravelのヘルパ関数は使えない。

const submit = (e) => {
    e.preventDefault();
    post('/users/store') // post(route('users.store'))と書きたい
};

そこで、Ziggyというパッケージを使う。これは、LaravelやInertiaのドキュメントに説明されていた方法。

Ziggy（GitHub）:

composerでインストール:

composer require tightenco/ziggy

composer.jsonに依存関係が追加される:

"require": {
  // ...
  "tightenco/ziggy": "^1.8"
},

次にエントリポイントのbladeファイル（メインのレイアウトファイル）resources/views/app.blade.phpに@routesディレクティブを追記する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- Scripts -->
    @routes {{-- ここに追加 --}}
    @viteReactRefresh
    @vite(['resources/js/app.jsx', 'resources/sass/style.scss'])
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

あとはjsxファイルの中でroute()を使うだけ。

const submit = (e) => {
    e.preventDefault();
    post(route('users.store'))
};

短いですが今日は以上です。

連載記事

  1. 【1日目】React初学者が1週間でどこまで出来るか挑戦
  2. 【2日目】React初学者が1週間でどこまで出来るか挑戦（ひたすらドキュメント編）
  3. 【3日目】React初学者が1週間でどこまで出来るか挑戦（Inertiaの理解）
  4. 【4日目】React初学者が1週間でどこまで出来るか挑戦（Createフォーム作成）
  5. 【5日目】React初学者が1週間でどこまで出来るか挑戦（フォーム改善）