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

# はじめに

[LIFF v2.22.0のリリース](https://developers.line.biz/ja/news/2023/03/29/release-liff-2-22-0/)をみたらプラガブルSDK機能というのが追加されていました。SDKの機能ごとに部分インポートできる感じのやつです。どんな感じになるか気になったのでやってみることにしました。

# やってみる

色々用意するのが面倒なので[前書いた記事](https://qiita.com/bathtimefish/items/32d551d0c4c0a83b8536)を参考に[create-liff-app](https://github.com/line/create-liff-app)と[liff-mock](https://github.com/line/liff-mock)を使って試してみます。

```shell
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`のバージョンが古いので修正します

```shell
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"
  },

```

```shell
yarn
```

`liff-mock`を追加します

```shell
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;
```

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

```shell
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.
```

正常に表示されました

![スクリーンショット 2023-04-14 10.31.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/03ec3903-732e-7100-c1d8-1387c158ca2e.png)

`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ブラウザのコンソールで以下のエラーが発生しました

![スクリーンショット 2023-04-14 10.37.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/648edd49-0db6-731f-47ec-2e11636bccf3.png)

[このあたり](https://github.com/line/liff-mock/blob/e6d785fdffaabb71c86ed1a019520628959b11c2/src/plugin.ts#L13)でしょうか。たぶん`@line/liff/core`のほうには`isInClient`なるメソッドが存在していないんでしょう。VSCodeで見たらliff.use()で以下のようなエラーが出ていました。`@line/liff/core`の`use()`が`LiffMockPlugin`を受け付けるようにできていませんね。

![スクリーンショット 2023-04-14 10.44.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/e3034b87-7587-7c41-f9e1-42b9941af41a.png)

公式ドキュメントの[対応するモジュール一覧](https://developers.line.biz/ja/docs/liff/pluggable-sdk/#liff-api-and-module-list)を見てもliff-mockが記載されていません。現状LIFFをプラガブルのほうで利用する場合はliff-mockが利用できないと見たほうが良さげです。

# おわりに

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

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

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

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