【要約】【LIFF】「店舗コードが指定されていません」と出る → クエリパラメータが消える問題と解決法 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
LIFFアプリの開発者が、認証後にURLから店舗コード等のパラメータを取得しようとした際、値が取得できずエラーが発生する。リダイレクトの仕組みが原因で、パラメータが一時的に隠蔽されるためである。
- ・認証フローにおいて、元のクエリパラメータが
liff.state内に格納される。 - ・この状態では、URL直下のクエリパラメータとして値が存在しない。
- ・
liff.init()実行前にパラメータを取得しようとするとnullが返る。 - ・Next.jsの
useSearchParamsでは、SDKによるURL書き換えを追従できない。
// Approach
開発者は、LIFF SDKの初期化完了を待機してからパラメータを取得する実装へと変更する。SDKがURLを元の状態に復元するタイミングを正確に捉える必要がある。
- ・
useEffect内でawait liff.init()を実行し、初期化を完了させる。 - ・SDKによるURLの復元（解凍）が終わるまで、パラメータ取得処理を遅延させる。
- ・Next.jsのフックではなく、
window.location.searchを用いて直接URLを読み取る。 - ・これにより、SDKが書き換えた後の最新のクエリパラメータを確実に取得する。
// Result
実装を修正することで、リダイレクト後もクエリパラメータが正しく取得可能となる。これにより、認証フローに伴うデータ欠落エラーが解消される。
- ・認証後の店舗コード等のパラメータが、期待通りに取得できる。
- ・Next.js環境下でも、SDKの挙動に左右されず安定した値の取得が可能になる。
- ・「パラメータが消える」という、LIFF特有の挙動に対する明確な回避策が得られる。
Senior Engineer Insight
> 外部SDKがURLを操作する際のライフサイクル管理は、実戦で頻出する課題である。本件は、SDKの初期化（
liff.init）が単なる設定ではなく、URLの復元という副作用を伴うことを理解すべき事例だ。また、Next.jsのようなフレームワークの抽象化されたフックが、SDKによる直接的なDOM/URL操作と競合するリスクも示唆している。大規模開発では、SDKの仕様に基づき、フレームワークの機能に依存しすぎない低レイヤーなAPI（window.location等）を使い分ける判断が求められる。