LIFFアプリ開発で押さえるべき5つのポイント
LIFF（LINE Front-end Framework）アプリの開発で、パフォーマンスとUXを最大化するための重要なポイントを解説。
ポイント1：liff.init()の非同期処理を正しく扱う
`liff.init()`はPromiseを返す非同期関数です。初期化完了前にプロフィール取得や画面遷移を行うと予期しないエラーが発生します。Next.jsやReactでの実装では、`useEffect`内で`await liff.init({ liffId })`を実行し、完了後にstateを更新するパターンが安全です。また、LINEブラウザ外（外部ブラウザ）でのアクセス時の挙動も考慮し、`liff.isInClient()`でのフォールバック処理を忘れずに実装してください。
ポイント2：アクセストークンの取り扱い
LIFFアプリでは`liff.getAccessToken()`でユーザーのアクセストークンを取得できますが、このトークンはフロントエンドに露出するため、バックエンドAPIへの認証に使う際は必ずサーバーサイドで検証してください。LINEのトークン検証エンドポイント`https://api.line.me/oauth2/v2.1/verify`でトークンの有効性と対象LIFFのclientIdを確認してから処理を進めるのがセキュリティ上の必須対応です。
ポイント3：パフォーマンス最適化とビルドサイズ
LIFFのSDKは約250KBあり、モバイルネットワークでの読み込みに影響します。Next.jsのdynamic importを使って`liff`をクライアントサイドのみで読み込む実装にすることで、初期バンドルサイズを削減できます。また、LINEアプリ内ブラウザはChromiumベースですが、一部CSS機能（`backdrop-filter`など）が制限されているため、実機検証を必ず行いましょう。
ポイント4：scanCodeV2でQRコード読み取り機能を実装
`liff.scanCodeV2()`を使うとLINEアプリのカメラ機能を利用したQRコード読み取りが実装できます。店舗チェックイン、商品情報確認、イベント受付など多様なユースケースに対応できます。ただし、LIFF URLのスコープ設定で`scan_qr`を有効にする必要があり、またiOSとAndroidでカメラ権限の挙動が異なるため、両プラットフォームでの動作確認が必要です。
ポイント5：ShareTargetPickerでソーシャル拡散を促進
`liff.shareTargetPicker()`を使うと、ユーザーが選んだ友達やグループにFlexMessageを送信できます。ECサイトでの商品シェア、クーポンのバイラル拡散、イベント招待などに活用できる強力な機能です。送信するFlexMessageはJSON形式で柔軟にデザインでき、画像・ボタン・テキストを組み合わせたリッチなカードを作成できます。ユーザーが積極的にシェアしたくなるメッセージデザインが成功の鍵です。