フロントエンドもバックエンドも網羅的に経験できる　Webアプリ開発のプラットフォーム「LIFF」の開発と魅力

自己紹介

佐藤信吾氏：それでは「LIFFのJavaScript SDK開発チームの紹介」ということでお話しします。どうぞよろしくお願いします。

まずは自己紹介させてください。佐藤信吾と言います。ソフトウェア開発者です。2020年にLINEに入社し、フロントエンド開発センターのDev7というチームに所属しており、現在は「LIFF」というデベロッパープロダクトのJavaScript SDK（Software Development Kit）の開発周りを担当しています。

LIFFについて

では、さっそくLIFFについて簡単に紹介します。LIFFは、LINEが提供するLINEのクライアントアプリ上で動作する、Webアプリを開発するためのプラットフォームです。このプラットフォーム上で動作するWebアプリを総称して、LIFFアプリと呼びます。

LIFFアプリは大きく3種類に分かれます。各企業がLINE社と協力しながら独自のアプリを作り上げる、LINE社認定のLIFFアプリである「LINEミニアプリ」と、「LINEファミリーサービス」と呼ばれているLINE社内で開発しているLIFFアプリ、またそれら以外のLIFFアプリに分かれます。

このように、社内外問わず多くの開発者の方々に利用いただいています。ちなみにLINEミニアプリとそれ以外のLIFFアプリとの違いですが、LINEミニアプリは前述のとおり、パートナー企業によるLINE社認定のLIFFアプリと思ってもらっていいと思います。厳密には、機能的な制限が若干違ったりはしますが、同じものです。

LIFFアプリはWebアプリなので、HTMLやCSS、JavaScriptなどのWebの標準的な技術を用いて開発が可能となっています。さらにLINEプラットフォーム上の情報や、LINEクライアントアプリと連携した機能を、後述するSDKを介して利用が可能となっています。

また、LINEクライアントアプリ上のブラウザだけではなく、ChromeやSafariなどの一般的なブラウザでも動作するようになっています。一部、動作環境ごとに制限がある場合もありますが、基本的にはクロスブラウザで動作します。

「LINEポイントクラブ」など、ファミリーサービスと呼ばれているLINEのアプリ上で動作しているWebアプリは、ほぼすべてLIFFで開発されています。

（スライドを指して）このような簡単なコードで、LIFFアプリの開発を始められるようになっています。liffというのが僕らが開発、提供しているSDKということになります。

LIFFの開発チームの紹介

では次にチームについて紹介したいと思います。LIFFにかかわるメンバーは非常に多く、拠点も東京、京都、福岡など多岐にわたっています。前述したLINEミニアプリにかかわるメンバーも含めると、さらに規模も人数も増えます。

ここでは僕らJavaScript SDKチームのメンバーが、日々仕事を進める上で協業する機会の多い、LIFFの開発チームの紹介にとどめたいと思います。

（スライドを指して）LIFFの開発チームはおおまかにこのような構成で分かれています。上からLIFFのサーバーAPIの開発チーム、プロダクトオーナーおよびプロジェクトマネージャー、LIFFのクライアントアプリのチーム、QA、SET、そして僕らJS SDKの開発チームです。日々、主にこれらのチームのメンバーと連携しながら開発を進めています。

今日は僕が担当しているSDKの開発チームについて、もう少し紹介したいと思います。現在、メンバーは僕を入れて4名です。このあと紹介しますが、SDKのほかにも開発するコンポーネントは多く、この4名で日々連携しながら開発を進めています。

各メンバーがオーナーシップと協業を意識して主体的に動きつつ、チームとして成果を上げることを意識できるような体制を目指しています。

例えば、週2回まとまった時間を確保していて、その時間に設計レビュー、または実装および設計に関する相談などを行えるミーティングをオンラインで行っています。ちなみに各メンバーの拠点は京都と東京で、（スライドを指して）このように分かれています。

先ほどお話しした僕らが担当しているコンポーネントですが、（スライドを指して）だいたいこのようになっています。

SDKをはじめ、LIFFの機能の一部として存在する必要のあるLIFFアプリや、ファミリーサービス向けに提供しているSDKとインテグレーションされたUIコンポーネント、また外部向けにLIFFのStarterリポジトリやLIFFの機能の一部を試せる、Playgroundなどの開発も担当しています。

そのほか、僕らのチームの開発効率向上のための各種ツールや、LIFFとの関連性が強いLINEのログインシステムのクライアント側の実装も担当することになっています。

この中でメインの開発になるJavaScript SDKを中心に、LIFFの開発フローを少し紹介したいと思います。

LIFFの開発フローとSDKの開発について

機能開発はさまざまな動機や目的から始められると思いますが、例えば、新機能の開発にはLINEミニアプリやファミリーサービスからの要望、または今後のLIFFとしてのロードマップ達成に向けた施策など、まずはPM側などで案件がスタートします。

そしてその機能のドラフトスペックをもとに、開発チームと一緒に、ソリューション検討から仕様の詳細まで決めていきます。

仕様や設計、アーキテクチャのレビューのためにドキュメントを用意して、LIFFの開発チーム全員でレビューを行っています。その施策の背景や課題、目的、今回の施策での目標や対応スコープ、そしてそれらを実現するためのソリューションアイデアから詳細設計まで網羅していきます。

だいたいは機能や実現したい対象のメインとなるコンポーネントの担当者が最初にドラフト版を用意して、それをもとにみんなでレビューをして加筆修正していく感じになっています。ある程度仕様や設計が固まったら、実際に手を動かして開発していく流れになっています。

ここで、SDKの開発で利用されている技術的なところを少し紹介したいと思います。基本的にはTypeScriptを採用しています。SDKのリポジトリの構成は、公開APIや単一責務ごとに分かれたmonorepoになっており、それを実現するために「Yarn」と「Lerna」を採用しています。

バンドルツールとしては「Rollup」と「Webpack」を利用しています。SDKはCDN（Content Delivery Network）版とnpm（Node Package Manager）パッケージ版を提供していますが、それぞれ適切なビルド成果物になるようにチューニングされています。

フレームワークなどは特に導入はしていませんが、僕らで設計・実装したアーキテクチャと規約に沿って全体を実装しています。このあと少し内部のアーキテクチャについて紹介したいと思います。

リリースについてです。CircleCIを利用して、開発メンバーの関連作業のほぼすべてを自動化しています。SDKのメンバーであれば、誰でもこれを実行できるようになっています。

開発フローやリリースに関してはなるべく属人性を排除して、メンバーそれぞれが自立して動けるような体制を目指しています。これは先にお話ししたとおり、それぞれがオーナーシップを持ち、チームとして成果を最大化するために必要な要素だと思っています。

では先ほどお話しした、SDKの内部のアーキテクチャについて簡単に紹介したいと思います。SDKの機能開発時、公開APIを実装するには先にお話ししたとおり、僕ら自身で設計・実装したアーキテクチャを用いています。僕らはこれを、“LIFFモジュールアーキテクチャ”と呼んでいます。

各モジュールを定義するためのインターフェイスが用意されています。これは、SDKのパブリックなAPIとなるメソッドおよびネームスペースを定義するためのものです。

そして各SDKのAPIは、このインターフェイスを実装したクラスか、もしくはこのインターフェイスを満たすオブジェクトとして書かれています。

そして、それらのインターフェイスを満たしたLIFFモジュールをパブリックAPIとして適用するためのモジュールも、LIFFモジュールのインターフェイスを実装しています。

このように、SDKのAPIの実装にはシンプルな規約があり、実装を担当するメンバー間である程度一貫した実装を担当できています。

さらに、このアーキテクチャをベースにしてモジュールを適用する仕組みを公開することで、プラグインの仕組みを提供できるようになっています。現在、サードパーティープラグインシステムの提供を計画しています。詳しくは、2021年11月に開催されるLINE DEVELOPER DAYで詳しく紹介されると思うので、ぜひよかったら見てください。

LIFF SDK開発の特徴と魅力

では次に、LIFF SDKの開発に関する特徴や魅力について少し紹介したいと思います。

先ほどお話したとおり、LIFFはたくさんの開発者の方に利用されています。そのため、最終的なエンドユーザーもたくさん抱えていることになります。LIFFに携わる上で、これは魅力の1つだと思っています。

LIFFはプラットフォームなので、通常のWebサービスの開発とはまた違った楽しさと難しさがあります。SDKの開発という観点では、通常のWebアプリ開発のノウハウが活きる場合ももちろんありますが、それら経験則でのソリューションが、時には通用しなかったり、特性的に適用できなかったりします。

一般にフロントエンド開発というと、Webアプリのクライアント側の画面を実装する作業だと思いますが、SDKの開発にだけ関していえば、僕らは画面を作ることはほとんどありません。そのため、一般のフロントエンド開発に求められるスキルとは、少し異なったものが求められたりします。

例えばHTTPやブラウザに関する細かい仕様とか、バックエンドAPIや認証・認可周りとか、あとはAndroid、iOSのWebViewとのコミュニケーション手法とか。またプラットフォームのE2E（end-to-end）テストや、インテグレーションテストに関するプラクティスなど、多岐にわたっています。

それらを網羅的に必要知識として経験できるので、プラットフォーム開発ならではのやりがいとおもしろみ、また難しさがあると思っています。

今後のチャレンジ

次に、今後のチャレンジについて少しお話しします。いくつかありますが、LIFFプラットフォーム上での開発体験の向上を目指しています。例えば開発者のために便利に使えるデバッガを用意したり、各種LIFFの挙動をモックできるツールで、LIFFアプリの開発を効率化できるようなものを提供する予定です。こちらも先ほどお話ししたLINE DEVELOPER DAYで紹介されると思うので、よかったらぜひ見てください。

さらに僕らは今、「LIFFおよびSDKの価値を、開発者自身で創造できる」という目標を掲げています。これはプラットフォームとしての役割と価値を突き詰めていくとたどり着くゴールではあるかもしれませんが、現在はこれを実現するための基盤を作り上げていくことを目指しています。

例えばSDKはいろいろな諸事情により、現状はOSS（Open Source Software）にはなっていませんが、まずは僕らのチームや社内で似たような体制を作ることを目指しています。SDKのチーム以外の社内のチームからのコントリビューションを、もっと歓迎する体制にしていきたいと思っています。

先ほどのLIFFモジュールアーキテクチャとか、monorepo構成になっているのは、この目的のための一部でもあって、コントリビューションをしやすくするためのものだったりします。

また、先ほども少し紹介したLIFFモジュールアーキテクチャを用いたプラグイン機能の提供もこの一環で、これも目的達成に寄与すると思っています。

そのほかにも、考えられる施策は実施していきたいと思っています。このように、ぼくらは挑戦的で、かつおもしろそうなことを日々やっていることが伝わっているとうれしいです。

少しでも興味を持った方はぜひご連絡をお願いします。以上です。ありがとうございました。