株式会社ずんだどん技術室AI放送局 podcast 20241211
お知らせ
おいはずんだどんごわす。飯を食うでごわす！
内容紹介
AIやテクノロジーに関する記事を紹介 UbieにおけるLLMを活用した不具合分析とテスト戦略立案プロセス、React19: useOptimistic を用いた楽観的UI更新と内部実装の解説
出演者
関連リンク
UbieのQAエンジニアは、React Nativeアプリ開発におけるフロントエンドテスト不足という課題を解決するため、LLM(大規模言語モデル)を活用した不具合分析とテスト戦略立案を行いました。 既存のアプリコードではバックエンドテストは充実していましたが、フロントエンドテストが不足していたため、リリース前に多くの不具合が発見され、迅速な開発を阻害していました。
まず、2ヶ月分のJira不具合データをCSV化し、Anthropic社のClaudeを用いて分析を行いました。 「ゴールシークプロンプト」と呼ばれる手法で、AIと対話しながら不具合分析に最適化されたプロンプトを作成。 これにより、不具合の要因カテゴリ、件数、発生工程、改善方針案を自動的に分類・整理することができました。 分析には約2.5時間かかり、UI/UX関連の不具合が約32%を占めることが判明しました。
その結果、ユニットテストとインテグレーションテストの導入により、約58%の不具合を開発早期段階で防げる可能性があると結論づけられました。 この分析結果を元に、「Testing Trophy」の概念に基づき、インテグレーションテストからテスト拡充を進める戦略を決定しました。 AIによる試算では、短期的にリードタイムが10%増加するものの、中長期的には1リリースあたり15%の短縮が見込まれるとのことです。
LLM活用によるメリットは、客観的なデータに基づく迅速な意思決定、低コストでの分析、新たなLLM活用方法の発見などです。 分析結果の共有後、開発チームは積極的にテスト実装に取り組み始め、組織文化の変化にも繋がりました。 この成功事例は、LLMが開発ツールとしてだけでなく、組織の意思決定プロセスや文化変革を促進する強力なツールとなり得ることを示しています。 今後は、E2Eテストの最適化、不具合分析駆動での改善サイクル確立などを進めていく予定です。
引用元: https://zenn.dev/ubie_dev/articles/6b73f18420861f
React19で導入された新しいフックuseOptimisticは、サーバーレスポンスを待つことなくUIを更新する「楽観的UI更新」を実現します。このフックを使うことで、ユーザーは操作後すぐにUIの変化を確認でき、よりスムーズな体験を得られます。
useOptimisticはinitialState（初期状態）とオプションのreducer関数（状態更新ロジック）を引数に取り、楽観的な状態と状態更新関数を返します。 reducer関数は状態更新の仕方を制御します。
記事では、useOptimisticを非同期処理と組み合わせたフォームの例が示されています。フォームのaction属性に非同期関数を指定し、useOptimisticで楽観的な更新を行うことで、送信処理完了前にUIを更新できます。ただし、サーバーレスポンスとUIの状態が一致しない可能性や、エラーハンドリングの必要性に注意が必要です。
内部実装では、updateReducerImpl関数が状態の更新と再計算に重要な役割を果たしています。useOptimisticはuseReducerと似た仕組みですが、レンダーフェーズでの更新をサポートせず、passthrough値の更新によって楽観的な状態がリセットまたは再計算される点が異なります。
useOptimisticとuseStateの違いは、レンダーフェーズでの更新の可否と、passthrough値の扱い方です。useOptimisticはpassthrough値の変更で状態が再計算されるのに対し、useStateはそうではありません。
複数回の連続したユーザーアクションには、送信ボタンの一時的な無効化やローディング状態の表示など、適切な対策が必要です。 useTransitionやstartTransitionと併用することで、よりスムーズなユーザーエクスペリエンスを提供できます。
useOptimisticは強力なツールですが、エラーハンドリング（例えばErrorBoundaryの使用）と状態管理を適切に行うことが重要です。 サーバーレスポンスとの整合性にも注意が必要です。
引用元: https://qiita.com/kahirokunn/items/929193a4621ab49ac10a
（株式会社ずんだもんは架空の登場組織です）