LIFF v2.22.0 に更新する

来週 17 日に LINE Developers 主催の下、大好評企画 (?) 第 2 弾 React + LIFF ハンズオンを開催させていただきます。

昨年の React + LIFF ハンズオン同様、初級者を対象としています。

しかしながら、React におけるカスタムフック化の効果として、プロダクト全体の設計に対し好影響となることをお伝えしたいと言う考えがあります。

したがって、初級者のみならず中級者以上に対しても、ご一読いただければ幸いです。

LIFF v2.22.0

今日は、先日リリースされた LIFF v2.22.0 のプラガブル SDK について書かせていただきます。

3 月末 LIFF v2.22.0 がリリースされました。

プラガブル SDK (Pluggable SDK)
LIFF v2.22.0 をリリースしました

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LIFF (LINE Front-end Framework) v2.22.0をリリースしました。
LIFF v2.22.0では、LIFF SDKのファイルサイズを最大約34%削減できるプラガブルSDK機能を追加しました。 <a href="https://twitter.com/hashtag/LINE_API?src=hash&ref_src=twsrc^tfw">#LINE_API</a> <a href="https://twitter.com/hashtag/LIFF?src=hash&ref_src=twsrc^tfw">#LIFF</a> <a href="https://twitter.com/hashtag/LINEミニアプリ?src=hash&ref_src=twsrc^tfw">#LINEミニアプリ</a>
詳しくはこちら：<a href="https://t.co/ce8gYNrEuI">https://t.co/ce8gYNrEuI</a></p>— LINE Developers (@LINE_DEV) <a href="https://twitter.com/LINE_DEV/status/1640994234697412610?ref_src=twsrc^tfw">March 29, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

手元の環境を 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 を利用するか検討いただければ幸いです。