LIFF v2.22.0のプラガブル機能を試してみようと思ったらliff-mockが使えなかった

はじめに

LIFF v2.22.0のリリースをみたらプラガブルSDK機能というのが追加されていました。SDKの機能ごとに部分インポートできる感じのやつです。どんな感じになるか気になったのでやってみることにしました。

やってみる

色々用意するのが面倒なので前書いた記事を参考にcreate-liff-appとliff-mockを使って試してみます。

npx @line/create-liff-app
? Enter your project name:  liff-v2220-pluggable-example
? Which template do you want to use? react
? JavaScript or TypeScript? TypeScript
? Please enter your LIFF ID: 
 Dont you have LIFF ID? Check out 
https://developers.line.biz/ja/docs/liff/getting-started/ xxxxxx
? Do you want to install it now with package manager? Yes
? Which package manager do you want to use? yarn

package.json中の@line/liffのバージョンが古いので修正します

cd liff-v2220-pluggable-example
vi package.json

package.json

  "dependencies": {
    "@line/liff": "2.22.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

yarn

liff-mockを追加します

yarn add @line/liff-mock

src/App.tsxを以下のように更新します

src/App.tsx

import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";
import { LiffMockPlugin } from '@line/liff-mock';

liff.use(new LiffMockPlugin());

function App() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID,
        mock: true,
      })
      .then(() => {
        setMessage("LIFF init succeeded.");
      })
      .catch((e: Error) => {
        setMessage("LIFF init failed.");
        setError(`${e}`);
      });
  });

  return (
    <div className="App">
      <h1>create-liff-app</h1>
      {message && <p>{message}</p>}
      {error && (
        <p>
          <code>{error}</code>
        </p>
      )}
      <a
        href="https://developers.line.biz/ja/docs/liff/"
        target="_blank"
        rel="noreferrer"
      >
        LIFF Documentation
      </a>
    </div>
  );
}

export default App;

開発サーバーを立ち上げます

yarn dev
yarn run v1.22.19
warning package.json: No license field
$ vite

  vite v2.9.15 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 402ms.

正常に表示されました

src/App.tsxで使われているliff SDKをプラガブルに変更してみます。

src/App.tsx

import { useEffect, useState } from "react";
// import liff from "@line/liff";
import liff from "@line/liff/core";
import "./App.css";
import { LiffMockPlugin } from '@line/liff-mock';

liff.use(new LiffMockPlugin());

function App() {
...

するとWebブラウザのコンソールで以下のエラーが発生しました

このあたりでしょうか。たぶん@line/liff/coreのほうにはisInClientなるメソッドが存在していないんでしょう。VSCodeで見たらliff.use()で以下のようなエラーが出ていました。@line/liff/coreのuse()がLiffMockPluginを受け付けるようにできていませんね。

公式ドキュメントの対応するモジュール一覧を見てもliff-mockが記載されていません。現状LIFFをプラガブルのほうで利用する場合はliff-mockが利用できないと見たほうが良さげです。

おわりに

LIFFがプラガブルに使えることでアプリがスリム化できるのは良いことなんですが、開発中にliff-mockが使えないのは結構面倒なんじゃないかなあと思いました。LIFFアプリ開発の性質上SDK機能のMock化は開発作業の中ではけっこう重要なので。

liff-mockの開発チームにはちょっと筋違いかなとも思ったんですが、liff-mockのほうにIssueを上げときました。LIFF SDK側とやりとりしてくれてアップデートがあるのを期待したいです。

とりあえず現行の対策としては、まずimport liff from "@line/liff";でliff-mockを使って開発をして、テスト後にliff-mockのコードを削除してimport liff from "@line/liff/core";に差し替えるとかでしょうか？メンテナ性悪そう。。

やっぱ将来的になんか整合とっていただけるとありがたいです。