LINEヤフー Tech Blog

LINEヤフー株式会社のサービスを支える、技術・開発文化を発信しています。

LIFFアプリの開発者体験向上にコントリビュートしてきた話(インターンレポート)

はじめに

こんにちは。静岡大学大学院 総合科学技術研究科 情報学専攻 修士1年の遠藤裕斗です。この夏、LINEヤフーが主催する 4 週間のサマーインターンシップに参加させていただきました。私は、LINE の機能を活用してアプリ開発ができる開発者向けプラットフォーム「LIFF(LINE Front-end Framework)」の開発チームに所属し、さまざまな経験を積むことができました。
本記事では、インターンシップで取り組んだ内容、学びや感じたことを共有したいと思います。

インターンシップ参加の動機

私が今回のインターンシップに参加した理由は、主に 2 つあります。
まず 1 つ目は、現場での技術運用やチーム開発がどのように行われているか身をもって経験したかったことです。具体的には、長期的な運用保守を見据えたコードやドキュメントの書き方・管理方法、機能開発に向けたタスクやマイルストーンの設定、開発の進行管理などを学びたいと思いました。また、オンラインでの開発に対する不安もあったため、リモート環境での意思疎通を図るメソッドについても学びたいと考えていました。
2 つ目は、私自身 LIFF アプリの開発経験があったため、LIFF の裏側をのぞいてみたいという興味がありました。一般ユーザ向けではなく、アプリ開発者向けにサービスを展開する難しさややりがいについて現場の声を聞けることや、自分も利用していた LIFF にコントリビュートできることに大きなモチベーションを感じていました。

インターンシップでの取り組み

インターンシップでは、LIFF アプリの開発をローカルでより簡単に行うために開発された「LIFF CLI」の新規コマンド開発を担当しました。

LIFF とは

まず、LIFF ついて簡単に説明します。LIFF は、LINEヤフー株式会社が提供するウェブアプリ用のプラットフォームで、このプラットフォーム上で動作するウェブアプリを「LIFF アプリ」と呼びます(参照:LINE Front-end Framework (LIFF) | LINE Developers)。
LIFF アプリは LINE アプリ内の専用ブラウザ(LIFF ブラウザ)で動作するため、ログインの手間が不要で、LINE で管理しているデータや機能を簡単に活用できます。これにより、開発者はアプリケーションの機能に集中することができ、素早くアプリケーション開発を行うことが可能となります。

LIFFの概要図

取り組んだタスクとその背景

LIFF CLI は、LIFF アプリの開発を円滑にする CLI ツールです(参照:LIFF CLI | LINE Developers)。LIFF CLI が生まれた背景には、次のような LIFF アプリのローカルでの開発のしづらさがありました。

  • LIFF アプリの作成・更新・参照・削除が Web 上のコンソールからしか行えない
  • アプリケーションサーバを HTTPS で立てる必要がある

1 点目については、ver0.1 系でサポートされるようになりました。そこで私は ver0.2 リリースに向けて、 2 点目の問題を解決するために、serveコマンドという新規コマンド開発を担当させていただくことになりました。

インターンシップの流れ

serveコマンド実装に向けて、インターンシップ期間中の開発の流れは次のように進みました。

オンボーディング

初週は、環境構築とサンプル LIFF アプリの開発を通じてオンボーディング作業を行いました。オンボーディングは大まかな流れが説明され、詰まったところに関しては都度質問できる環境が整っていたため、最初のメンバーとのコミュニケーションを深めるきっかけにもなりました。
また、サンプル LIFF アプリの開発では、LIFF から取得できるユーザデータの表示や、ボタンを押すことで LIFF に用意されたメッセージ送信機能を発火するなどといった簡単な機能の実装を行いました。これは今後の LIFF アプリの開発に向けて、LIFF の基本的な機能を把握するとともに、ユーザ(開発者)視点に立つことで LIFF アプリの開発時の体験について理解するという側面もありました。

serveコマンドの基本構造を実装

2 週目にserveコマンドの機能概要とタスク要件が説明され、本格的な実装が始まりました。まずは、コマンドオプションの必須項目やオプション項目の設定、それらが指定された際に表示されるメッセージやエラーメッセージの基本的な構造を実装しました。CLI の開発には、commanderという npm パッケージを用いて行いました。
例えば、LIFF が動作するサーバの指定方法において、URL とホスト・ポートの指定を排他制御する必要がありました。URL が指定された場合にはホスト・ポート入力を無効にし、ホストで指定された場合にはポートの入力を必須とするなど、適切なエラーメッセージを実装しました。

HTTPS でプロキシサーバを立てる

2 週目後半からは、「LIFF の開発サーバを HTTPS で立てる必要がある」という問題を解決するアプローチに取り組みました。
具体的な解決方法としては、ユーザは従来通りローカル環境で LIFF の開発サーバを HTTP で立ち上げます。その後、LIFF CLI を使用して HTTP サーバをプロキシする HTTPS サーバをユーザの代理で立てます。そして、LIFF アプリのエンドポイント URL を HTTPS で立てたプロキシサーバの URL に自動的に更新します。これにより、ユーザはローカル環境でも HTTP で立ち上げたサーバを利用して LIFF アプリの開発が行えるようになります。
この機能の実装には、Node.js の標準ライブラリであるhttpsと npm ライブラリのhttp-proxyを使用しました。CLI のオプションで受け取った LIFF の実行サーバの URL をプロキシ対象のオリジンとして指定し、プロキシサーバを起動します。ユーザには有効な証明書と秘密鍵だけ作成してもらい、その証明書に基づいて HTTPS のプロキシサーバを立ち上げるといった形です。

LIFF CLIにおけるプロキシサーバの概要図

学んだこと・感じたこと

テスト開発の重要性

これまでの開発では、機能実装に追われてテストコードを書く機会があまりありませんでした。今回、開発に参加する中で実務を通してテスト開発を行いましたが、さまざまな点で恩恵を感じることができました。

デグレーションの防止

まず、テストを書くことで予期せぬデグレーションを未然に防ぐことができます。これはテスト開発の主な目的の一つかと思いますが、やはり自分が想定している以上に予期しない箇所で、デグレーションが起きていることをテスト実行を通して確認することができました。プロダクトが大きくなるほど、デグレーションを全て手動で確認することは難しくなるため、テストを通して問題を早期に発見できることに安心感と効率の向上を感じました。

単一機能を意識したコード実装

次に、テストコードを書くことで、自然と単一機能を意識した良い実装が行えるようになりました。テストを書く際、対象の関数が何をすべきかを明確にする必要があり、複数の機能を持つ関数を作成することが少なくなり、結果としてシンプルでメンテナンスしやすい単一機能のコードを書くことができました。

DI(依存性注入)の学び

プロキシサーバを立てる際、最初は関数の内部でProxyクラスのインスタンスを直接作成していました。しかしそのようにして複数のテストケースを実行すると、前のテストケースで既にポートが使用されているため、プロキシサーバが立てられず、テストが失敗してしまう問題がありました。そこで DI(依存性注入)の概念について学びました。
関数内でProxyインスタンスを作成する代わりに、関数の外で作成したProxyインスタンスを引数として関数に渡すことで、テスト実行時にProxyの依存関係を切り離すことが可能になりました。これにより、外部で生成したProxyのポートを確実に閉じることで、ポートの競合問題を解決することができました。

ユーザ目線での開発

今回、開発者向けツールの開発に初めて参加して感じたのは、ユーザの開発体験を常に意識していることでした。チームメンバー全員が、LIFF アプリを実際に動作させながら、機能開発や議論を進める中で、開発時に感じる不便さや課題に向き合い続けていました。そうした中で LIFF CLI も生まれたという経緯もあり、ユーザにとって、どうすればより使いやすく、効率的に開発できるツールになるのかを常に考え、その改善に取り組んでいる点が非常に印象的でした。

インターンシップ全体を通して

4 週間という短い期間でしたが、チーム内外や他のインターン生含め、多くの方とお話しする機会がありました。実務を通じて、プロのエンジニアからコーディング等々アドバイスをいただくことができたり、LIFF へのコントリビュートができたりと、短い期間ながらも、それ以上に濃密で充実した時間を過ごすことができました。
インターンシップ参加前後で、LINEヤフーの開発体制に対する印象は 180 度変わりました。というのも参加前は、プロダクト開発が個々人の成果の集合体のようなイメージを持っていました。しかし、実際は全く異なり、オンラインでの開発が中心ということもあり、ミーティングや Slack を通じたメンバーとの意見交流を非常に重要視されている印象でした。何より、お話しさせていただいたどの方もとても優しく、親切で温かな印象を覚えました。私の質問にも丁寧に、付加情報も添えていただきながら熱心に答えていただいておりました。さらに、1on1 などを通じて、私がインターンシップ中に最大限の成果を発揮できるよう手厚いサポートもいただいておりました。
このインターンシップを通して、LINEヤフーへの理解が深まるとともに、さまざまな学びを得ることができました。チームメンバーをはじめ、交流させていただいた社員の皆様には、心から感謝申し上げます。
今後も LIFF ユーザとしてアップデートを楽しみにしつつ、今回の経験を糧に、さらに成長した姿でまた皆様とお会いできるように精進して参ります。

メンターから一言

遠藤さんのメンターを務めたodanです。普段はLIFF SDKやLINEログインのフロントエンドの開発を担当しています。

今回のインターンでは開発者向けのプロダクトの開発を体験していただくために、LIFF CLIの新機能の開発をお願いしました。LIFFアプリはLINEアプリ上のLIFFブラウザ上で動作するため、普段のWebアプリの開発よりも制約事項が多いです。まずインターンの初期フェーズではオンボーディングを兼ねてサンプルLIFFアプリの開発をお願いしました。これによって「LIFFを使う開発者の視点」でペインポイントを実際に体感してもらいました。次にそのペインポイントを解決するLIFF CLIの機能開発をお願いしました。この機能開発ではさきほどの「LIFFを使う開発者の視点」に加えて「LIFFを開発する開発者の視点」も求められます。LIFF CLIの開発を通じて普段のプロダクト開発とは異なる開発者向けプロダクトの視点や考え方を学んでいただけたかなと思います。

初のインターン受け入れということもあって、当初はタスクの難易度が高すぎないか心配していました。しかし遠藤さんは、わからないことにずっと一人では悩まず質問用のSlackチャンネルで質問していただけたり、メンターからの実装に対するフィードバックの飲み込みが早く、スムーズに開発を進めることができました。そのため当初予定していた機能開発のすべてを実装していただきました。

4週間という短い期間でしたが、メンター自身も貴重な体験を積ませていただきました。またお会いできることを楽しみにしています!