React+LIFFのサンプルコードがLINE公式から出てました

広島の者です。

React(などを使ったSPAな)アプリでLIFFを実現するときに注意した方が良いかもしれないこと | DevelopersIO

先日、上記のブログで「React+LIFFではliff.init()の後にReactの描画を開始する方法が良い気がするよ、確証はないけど・・・」的な意見表明をしたのですが、本日社内Slackで「GitHubのLINE Organization配下にReact+LIFFのサンプルコードが上がってる！」と話題になっていたので見に行ってみました。

line/liff-playgroundリポジトリ

それが下記のリポジトリです。

line/liff-playground: An example app to show the usage of LIFF's API functions

こちらに上がっている src/index.tsx からの抜粋が以下です。

// src/index.tsx

liff
  .init({ liffId: process.env.REACT_APP_LIFF_ID || '' })
  .then(() => {
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    )
  })
  .catch((e) => {
    alert(`LIFF error: ${e.message}`)
  })

liff.init() の後に ReactDOM.render を開始するコードになっていますね。

LIFFドキュメントにも記載が追加されていた

LINE Front-end Framework | LINE Developers

LIFFドキュメントにも追記されていました。

LIFFの機能をウェブ上で試せます LINEでは開発者向けにLIFFプレイグラウンド (opens new window)というウェブアプリ（LIFFアプリ）を提供しています。LIFFプレイグラウンドではLIFFの基本的な機能が試せます。LIFFを用いるとどのようなことができるのかを確認したいときに参照してください。なお、LIFFプレイグラウンドのソースコード (opens new window)をGitHubで公開しています。

liff-playgroundリポジトリはLIFFの各機能のデモをすることが主眼であり、React+LIFFのサンプルを示すことが目的なわけではないようです。

実際デプロイされたLIFF Playgroundを少し見てみましたが、各APIをざっくり理解するのにとても良さそうなページでした。

まとめ

LINEが出しているサンプルコードから、やはり liff.init(...).then(() => ReactDOM.render(...)) の書き方が推奨といえそうです。

参考になりましたら幸いです。