NOTE 106 / 2022年
LIFF と React を組み合わせるための下ごしらえ
LIFF のハンズオンを前に、React 側の準備を整理しました。
LIFF の画面を React で作ると、状態の管理と画面の切り替えをコンポーネントに寄せられます。一方で、LINE 側の初期化やユーザー情報の取得は、React の描画とは別のタイミングで進みます。この二つを混ぜないことが設計の要点です。
開発用の環境と本番の環境では、LIFF ID やエンドポイントが異なります。設定値を環境ごとに分け、誤って本番の設定を使わないようにしておきましょう。
押さえたい点
- 01LINE の初期化と描画を分けて考える
- 02環境ごとに設定値を分ける
- 03ユーザー情報の扱いを一箇所に集める
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- Firebase Hosting 外部サイトfirebase.google.com
- Firebase Hosting 設定 外部サイトfirebase.google.com
- Firebase ドキュメント 外部サイトfirebase.google.com
- LIFF 概要 外部サイトdevelopers.line.biz