20日目担当の細川です。OPENLOGIでは主に荷主の方(EC事業者などオープンロジの倉庫に商品を預けていただいている方)向けの機能開発担当しています。実装をスタートさせた時点ではこのライブラリもまだできたばかりで、機能も少なかったのですが、その後勢い良く充実していきまして、バージョンも上がってパフォーマンスの問題も改善し、一通りやりたいことはできるようになってます。現在でもまだまだアクティブに更新されてますので、構成が同様であれば使ってみることをおすすめいたします。上で具体的にどのように実装するのか書いてみたいと思います。startブラウザでデフォルトの画面が立ち上がるかと思います。等は入ってませんのでインストールします。bootstrap@3次に、生成されたコードに対して、reduxとredux-form動作のための記述を追記します。使用する領域の記載を追加します。書き換えてから、Form画面実装します。'myForm',})(MyForm);submit時のサーバーとのリクエスト、レスポンスをエミュレートするための関数を書いておきます。関数使って修飾します。store領域へ格納するには、このreduxFormによって修飾されたコンポーネント内で、Fieldコンポーネント等を使うことで実現します。className={'form-control'}/>ここでcomponent="input"の箇所で自前のカスタムコンポーネントの指定も可能ですが、簡易にテキストボックス等を用意したい場合にこのようにコンポーネントではなく文字列指定で定義することが可能になってます。ここまで書いて適当な文字列をテキストボックスに入力後、登録ボタンを押下してみるとこんな感じのダイアログが上がります。onSubmit={handleSubmit}>を経由して、指定した関数の引数にreduxのstoreに格納された各フィールド値が入ったオブジェクトをredux-formが渡してくれます。ここでのnameは、Fieldコンポーネントでname属性で指定した名称がkeyとなってます。後程説明しますが、これは階層構造を持つことも可能です。格納された入力値に対してvalidationかける仕掛けが用意されてまして、reduxFormのパラメータとしてvalidateの名称で関数指定をします。//<--追加})(MyForm);この関数は、submit時に渡されるのと同じ構造の入力値オブジェクトを引数にとって、それぞれのフィールド名に対するエラーメッセージを持つオブジェクトを返す関数になります。errors}このチェック結果をどこで受け取るかですが、Fieldコンポーネントでcomponentで指定されたコンポーネント/関数に渡されることになります。そこで、ここの実装を少し変えます。フィールド描画をFormGroup単位にしてエラー発生にbootstrapのスタイル指定ができるようにします。コンポーネントに必要となるプロパティを持つオブジェクトになります。通常はこれをそのままinputコンポーネント等にpropsとして展開します。フィールドに関連したエラー情報や初期値と同一かどうか、などの情報を持ってます。その他は通常のコンポーネントと同様に上位のコンポーネントから渡されてるprops値です。次にこの関数を先程のFieldコンポーネントに指定するようにします。...これで、validation結果をスタイル指定と共に表示することができました。宣言時に指定しなくても、対象となるコンポーネントのpropsとして渡すことが可能になってます。上位のコンポーネントの挙動によってチェック内容を動的に変化させるなどの際使います。初期化したい編集画面などで初期化した状態でフォーム画面表示したい場合には、reduxFormのパラメータとしてinitialValuesの名称で初期値指定をします。ここでは固定で初期値設定してますが、MyFormコンポーネントのpropsとして動的に指定することも可能なことを押させておきましょう。//<--追加})(MyForm);画面リロードすると表示されました。この時何か編集をしてクリアボタン押すと、初期値に戻ります。onClick={reset}>クリア</Button>で定義されてますが、ここのresetはredux-formが提供する関数で、storeに保存されている初期値に戻す動作をしてくれます。特定項目の値で挙動を変えたいある項目の入力可否が他の項目に依存していたり、特定項目の入力値で挙動を変えるケースはよくありますが、その場合は描画時に特定の項目値を取得する必要があります。APIが用意されてます。最初にselectorの定義と、そこから取得したフィールド値をreduxのconnect関数使ってMyFormコンポーネントに渡すように定義します。MyForm次にフォームの実装に追加修正します。今回は連絡先の選択によってフィールドの表示制御をしてます。階層化されたフィールド複数の連絡先や家族情報の入力など、動的で且つ階層化された入力欄と、それに合わせて階層化された値の取得をしたい場合があります。今回は家族の名前を追加できるようにしてみたいと思います。コンポーネントを使って実現できます。MyFormコンポーネントの登録ボタン上あたりに下記の記述を追記します。/>FieldArrayはFieldと同様にname属性を持ちますが、これはcomponent属性で指定されたコンポーネントで記述されるFieldコンポーネントの配列を表す名称となります。配列形式で描画したいコンポーネントの実装を追加します。よって、コンポーネントの追加、削除や列挙をすることができます。配下に複数のFieldからの入力値が配列形式で格納されてるのがわかります。非同期でサーバーでのvalidationがしたい通常はsubmitした値をサーバーサイドでチェック、問題があればエラーを返しますが、時々非同期でサーバーにお伺いを立てたい場合もあります。ここでは電話番号を非同期チェックしてみたいと思います。サーバーサイドvalidationをエミュレートする実装を用意します。}});不正な値だった場合には、通常のvalidationと同じように、フィールド名とエラーメッセージの連想配列の形式でエラーを返します。パラメータで非同期チェックの定義を追加します。フィールドのblurのタイミングでサーバーチェックを行う、という指定になってます。これで非同期チェックが可能になりました。複数画面に分割されたフォームモーダルや画面遷移などで表示された別フォームでの入力を、同じフォームの値として保持したい場合にどうするか、というケースになります。先程実装した、家族の情報を入力するフォームを、別画面にしてみます。src/App.jsにページ番号をthis.state.pageに持つようにして、表示画面を制御します。App;src/MyForm.jsの実装は家族情報の部分を除外したものにします。保存されている入力値が消えてしまうのですが、そうならない設定を追記します。これで画面遷移しても遷移先画面で前画面での入力値を保持することができます。['phone'],})(MyForm);次に家族情報を入力する画面を追加します。時に値が消えないよう設定します。MyFamilyFormまた、validationは共通でまとめて、必要箇所でimportします。することができました。これはモーダルダイアログを一時的に表示して入力をさせる場合などでも応用できます。時に仕様が一新しました。初期から使用している方向けに少し補足したいと思います。なってコンポーネント化した点になります。内の各名称のフィールドオブジェクトが生成されるようになります。ここで問題になったのは、フォーム内の項目数が増えた際に、1つのフィールドが更新されただけで、全てのフィールドのvalidation等の処理が走り、再描画がされる点でした。フィールド数が一定以上になると極端に画面の再描画が重くなってしまいます。ほうが分かりやすい、書きやすいと思いますが、今回もこの記事書いてて思いましたが、慣れればそれほど不都合でもないかな、と思います。実装プロジェクトなども並行して実施しています。フロント周りは動きが激しいですが、その辺を楽しんで開発できる方、ぜひ弊社に遊びにきてください。Hosokawa@yhosokFollow株式会社オープンロジ物流はこれから、テクノロジーによりダイナミックに変化する業界です。物を作る人とそれを欲しい人、その間の物流や配送がすべてネットワーク化された、需要と供給が最適化される次世代のインフラづくりを私たちは目指しています。upLoginユーザーは見つかりませんでした。