LIFF SDKのプラガブルSDKに実装しているちょっとした型の工夫

こんにちは！LIFF SDKの開発を担当しているodanです。今回のTipsでは、LIFF SDKのプラガブルSDKに実装しているちょっとした型の工夫について紹介します。

プラガブルSDKとは

通常のLIFF SDKはimport liff from "@line/liff"の形でimportします。

このときのliffオブジェクトにはliff.requestFriendshipメソッドやliff.permissionオブジェクトなどが含まれています。これらのメソッドやオブジェクトは必ずしもすべてのLIFFアプリで必要なものではありません。使用されないオブジェクトは余計なバンドルサイズの増加を招いてしまいます。

この問題を解決するのがプラガブルSDKです。プラガブルSDKは必要最小限のメソッドだけを持つliffオブジェクト（以下、LIFF Coreオブジェクト）を提供します。

以下がその使用例です。

import liff from "@line/liff/core"; // @line/liff の代わりに @line/liff/core を import する
liff.init({ liffId: "" }); // 必要最小限のメソッドのため利用できる
liff.requestFriendship(); // 必要最小限のメソッドではないため利用できない（ランタイムエラーになる）

必要最小限に含まれないメソッドを使用する例:

import liff from "@line/liff/core";
import RequestFriendship from "@line/liff/request-friendship";

liff.use(new RequestFriendship());

liff.init({ liffId: "" });
liff.requestFriendship(); // liff.use によってメソッドを追加したため利用できるようになる

プラガブルSDKを使うことで、LIFFアプリのバンドルサイズを削減できます。

LIFF Coreオブジェクトの型の拡張

先ほど紹介した通り、JavaScriptの世界ではLIFF Coreオブジェクトに対してliff.requestFriendshipメソッドを呼び出すとランタイムエラーになります。

この問題を開発者が早期に気付くことができるように、型の世界でもLIFF Coreオブジェクトには必要最小限のメソッドしか定義されていません。

import liff from "@line/liff/core";

liff.requestFriendship(); // 型エラーになる

必要最小限の型を拡張するには、各モジュールのパッケージをimportする必要があります。

import liff from "@line/liff/core";
import RequestFriendship from "@line/liff/request-friendship";

liff.use(new RequestFriendship());
liff.requestFriendship(); // @line/liff/request-friendship をimportしているので型エラーにならない

Declaration Mergingで型を拡張する

さて、パッケージをimportするだけで型エラーが解決するこの仕組みはどう実現されているでしょうか？

TypeScriptにはDeclaration Mergingと呼ばれるテクニックがあり、これを利用しています。簡単に説明すると、同じ名前で定義されたinterfaceの各メンバーはマージされて扱えます。

先ほどのドキュメントでは、以下のサンプルコードが紹介されています。

interface Box {
  height: number;
  width: number;
}
interface Box {
  scale: number;
}
let box: Box = { height: 5, width: 6, scale: 10 };

このテクニックを用いてLIFF Coreオブジェクトの型を拡張しています。実際に@line/liff/request-friendshipの中身を覗いてみましょう。

// LIFF SDK v2.29.0の@line/liff/request-friendshipの内容
import { RequestFriendshipModule } from '@liff/request-friendship';
export default RequestFriendshipModule;
declare module '@liff/core' {
    interface LiffCore {
        requestFriendship: ReturnType<typeof RequestFriendshipModule.prototype.install>;
    }
}

5行目からのinterfaceの宣言がポイントです。LiffCoreの宣言を書くことで型情報がマージされるようになっています。これによりLIFF Coreオブジェクトを使う場合に、オブジェクトの追加を忘れるというケアレスミスにすぐに気づくことができます。

ちなみにVue.jsのプラグインでも同様の仕組みが採用されています。

まとめ

プラガブルSDKに実装しているちょっとした型の工夫について紹介しました。

Declaration Mergingのおかげで型について安心して利用できるため、バンドルサイズの改善の際にぜひプラガブルSDKをご検討ください。