来週 17 日に LINE Developers 主催の下、大好評企画 (?) 第 2 弾 React + LIFF ハンズオンを開催させていただきます。
https://linedevelopercommunity.connpass.com/event/282093/
昨年の React + LIFF ハンズオン同様、初級者を対象としています。
https://blog.nekohack.me/posts/answer-to-learn-react-with-line
しかしながら、React におけるカスタムフック化の効果として、プロダクト全体の設計に対し好影響となることをお伝えしたいと言う考えがあります。
したがって、初級者のみならず中級者以上に対しても、ご一読いただければ幸いです。
LIFF v2.22.0
今日は、先日リリースされた LIFF v2.22.0 のプラガブル SDK について書かせていただきます。
3 月末 LIFF v2.22.0 が リリース されました。
- プラガブル SDK (Pluggable SDK)
- LIFF v2.22.0 をリリースしました
LIFF (LINE Front-end Framework) v2.22.0をリリースしました。
— LINE Developers (@LINE_DEV) March 29, 2023
LIFF v2.22.0では、LIFF SDKのファイルサイズを最大約34%削減できるプラガブルSDK機能を追加しました。 #LINE_API #LIFF #LINEミニアプリ
詳しくはこちら:https://t.co/ce8gYNrEuI
手元の環境を v2.22.0 に更新する場合は、まず npm i @line/liff@2.22.0
を実行してください。
# npm
npm i @line/liff@2.22.0
# yarn
yarn add @line/liff@2.22.0
基本的にこれだけで完了させられます。
続いて LIFF 2.22 の主な特長は、LIFF SDK のファイルサイズを最大約 34% 削減できるプラガブル SDK 機能となります。
くだけて言うと、使いたい LIFF API に限りインポートさせられるようなりました。
LIFF オブジェクトを初期化する際、必要な API を @line/liff/core
からインポートします。
import liff from '@line/liff/core'
useLine.tsx の LIFF SDK を読み込む箇所を修正します。
import liff from '@line/liff'
export const useLine = () => {
useEffect(() => {
if (status === 'inited') return
liff
.init({ liffId: import.meta.env.VITE_APP_LIFF_ID })
.then(() => {
setLiffObject(liff)
if (liff.isLoggedIn()) setStatus('inited')
})
.catch((err: any) => {
console.error({ err })
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}
@line/liff
をインポートする代わりに @line/liff/core
をインポートします。
// 代わりに @line/liff/core をインポートする
import liff from '@line/liff/core'
export const useLine = () => {
useEffect(() => {
if (status === 'inited') return
liff
.init({ liffId: import.meta.env.VITE_APP_LIFF_ID })
.then(() => {
setLiffObject(liff)
if (liff.isLoggedIn()) setStatus('inited')
})
.catch((err: any) => {
console.error({ err })
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}
LIFF オブジェクトが初期化された際に liff.use()
を利用します。
import liff from '@line/liff/core'
// LIFF の API を個別にインポートする
import GetOS from '@line/liff/get-os'
import GetLanguage from '@line/liff/get-language'
// `liff.use()` を利用する
liff.use(new GetOS())
liff.use(new GetLanguage())
なお、これまでの LIFF API も引き続き利用できます。
アプリのバンドルサイズを低減させるなど、目に見える形の利益がありますので、こうしたプラガブル SDK を利用するか検討いただければ幸いです。