
2025.02.18
「売上をスケールする」AIの使い道とは アルペンが挑む、kintone×生成AIの接客データ活用法
React/ReduxにSelectorを導入したら幸せになった話(全1記事)
リンクをコピー
記事をブックマーク
松井真子氏:ヤフーの松井です。よろしくお願いします。まず簡単に自己紹介させてください。松井真子です。ヤフーに2018年に新卒入社しまして、ショッピングに配属されてからReactとReduxを使ってキャンペーンページ向けの入稿ツールとフロントの開発をしていました。
去年の9月くらいからはPayPayモールのAndroidアプリの開発をしています。UXに興味があり、サービスデザインの勉強をしており、今PayPayモールのAndroidアプリとかを通して新規機能の提案でサービス、デザインのチャレンジをしています。
趣味は釣りですが、外出自粛ということで今年に入ってから一切釣りに行っていないので、あつまれどうぶつの森で毎日釣りをいっぱいしています。
今日はReactとその仲間たちということで、入稿ツールのときのお話をしようかなと思っています。まず入稿ツールってどんなものなのかっていう簡単なイメージをお話しすると、WordPressをイメージしていただいたらよいかなと思っています。簡単に言うと入力されたデータをもとにHTMLを自動で生成するシステムの入力部分になります。
具体的な例としては画像モジュールで説明するんですけど、入稿ツール側でaltタグであったりとか、画像のURLを入力していただいて、フロント部分のシステムで入力されたデータをもとにイメージタグのHTMLを生成します。指定のURLをユーザーがアクセスしてきたときにはこのような画像のイメージが見えるかたちになっています。
今日お話しするのは入稿ツールを開発するときに困ったことです。そもそも自分が1年目で配属されてすぐだったということと、エンジニアの先輩であるチームメンバーもあまり開発経験がない方で、2人で開発経験が乏しい中、周りに相談しながらがんばっていました。
その中で困ったこととして、コンポーネント間の依存関係がすごく複雑になってしまっていたということと、バリデーションの実装が複雑になっていたこと。あとデータ構造が複雑でネストが深くなっていました。
このデータ構造が複雑かつネストが深いっていうのが、入力フォームのバリデーションの実装のところが原因に関係していました。入力フォームだったりモジュールのバリデーション結果だったり、エラーメッセージを持たせていたので、データベースの中に保存するべきではないデータも持っていたっていうのが原因になります。
今日お話しするのは簡単なLTということで、バリデーションの実装のお話をします。コンポーネント間の依存関係が複雑になってしまったことは、一から作り直しまして、Atomic Designを導入したことによって依存関係が一方向になることによって解消されました。
ということでバリデーションの実装のお話をしていきます。
そもそもバリデーションが複雑になってしまった原因として大きく2つあって。1つ目がバリデーションのタイミングが難しかったということがありました。
タイミングとしてフォームが入力されるたびにバリデーションをかけたいということと、入稿ツールなのでデータベースからAPIで引っ張ってきていたデータも念のためバリデーションをかけたいということで、propsが変更されるタイミングでバリデーションをかけたいというのがありました。
実装方針としてActionやReducerの中ではロジックを持たせずにコンテナコンポーネントの中にロジックを閉じ込めるというような方針にしていたので、ライフサイクルメソッド、ComponentDidUpdateの中で実装をする必要がありました。
ComponentDidUpdateが外部メソッドを呼んでpropsに影響を与えるというようなことを許可していないので、バリデーションを切り出せず、同じようなバリデーションであってもひとつひとつのモジュールすべてで実装しないといけないかたちになってしまっていました。
もう1つの原因としてそもそもバリデーションが多いということがありました。入力フォーム単体であったり、複数の入力フォームを統括したり、複数のモジュールを統括してページ全体のバリデーションを持ったりという、バリデーションの種類が多いということ。
入稿ツールなのでどのモジュールが何個あるのかっていうのが固定ではなく、ビジネス要件も絡んでくるところなのですごく複雑です。バリデーションなのでしっかりしないといけないのですが、ひとつひとつに対してするってなるととても大変なことになっていました。
そんなときに助けてくれたのがselectorで、Reduxのreselectというライブラリを使いました。これを使うとどうなるかと言うと、stateからpropsに渡すときに間にメソッドを挟んで関心のある値を返せるようになります。
なので、ComponentDidUpdateの中に書いていたバリデーションを切り出して、そのメソッドの返り値をpropsとして渡せるようになります。それまでは各フォームのバリデーション結果をStoreの中にひとつひとつ持たせていましたが、それを持たせずに値を直接propsに渡せるようになりました。
これによってバリデーションをComponentDidUpdatから切り出せたので、関心のあるバリデーションごとにしっかり切り出せるようになりコードがすっきりしました。責務分けをしっかりできたことによってテストが書きやすく、品質が担保されるようになりました。
バリデーションをComponentDidUpdateに書いていたときは値の変更箇所っていうのが複数存在してしまっていたのですが、selectorを挟んだことによってしっかりとどこでどの値が変化したかっていうのが追いやすくなりました。
今日のまとめです。selectorの機能を使うと、余計なデータを保持しなくてよくなりました。バリデーションを切り出せたのでコードもすっきりしましたし、テストもしやすくなりました。
今回自分がこれを実装したときがHooksの採用前っていうのと、関数コンポーネントではなくクラスコンポーネントを実装する必要があるライブラリがあったのでreselectを使ったんですけど。Redux Hooksのほうにも同じような機能が存在していました。
ただReduxの公式でもUseselectorとreselectを両方使う例もあったので、用途に合わせて使い分けをしていただいたらよいかなと思っています。発表は以上になります。ありがとうございました。
関連タグ:
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
第20回エクゼクティブメンターイベント「今、「ひと」と組織が共創する〜働き方の未来へ」
2024.12.07 - 2024.12.07