インフラ寄りの構築も、チーム運営や機能の提案も行う　「LINE証券」のフロントエンド開発業務

自己紹介

峯友郎氏：それでは峯から、「LINE証券」について話します。タイトルとしては「金融領域だけど、柔軟にやっていくLINE証券フロントエンド」ということでお話しします。

まず最初に自己紹介ですが、峯友郎と言います。LINE証券でフロントエンドエンジニアをやっています。LINEには2021年4月に入社して、5月にLINE証券に配属し、新技術導入などを経験した後、6月ぐらいから新企画プロジェクトにてフロントエンドのリーダーをしています。個人的には、ヤフー主催のHackathonで、Hack Dayというものに時々出場などしています。

LINE証券について

LINE証券フロントエンドのチームの紹介に入る前に、まずはLINE証券というサービスそのものについて紹介できればと思います。LINE証券とは、「投資をもっと身近に、もっと手軽に」をコンセプトに、初心者でもわかりやすい、使いやすいようなサービスを提供することを目指したスマホ投資サービスです。LINEから、手軽に口座開設ができます。

また、LINE証券は使いやすいUXと多機能の両立を追求していて、現物取引や投資信託を始め、経験者の方にも活用してもらえる、さまざまな機能をリリースしています。

また、他の証券サービスにはない「株のタイムセール」や、口座開設とクイズに正解すると株の購入代金がもらえる「初株チャンス」のような、おもしろい施策をいろいろと考えて打ち出しています。

この場で紹介はできませんが、他にも現在進行形で非常にユニークでおもしろい施策が進行中なので、ぜひみなさまがジョインした暁には、それらの機能を一緒に作っていければと思っています。

規模感として、ユーザー数は2年前のサービス開始から、順調に伸びてきています。2021年8月に800,000口座を突破して、順調に増加している状況になります。またアクセス数としては、（スライドを指して）このとおり250PV／secといった規模感になります。

ここまでLINE証券というプロダクトについて紹介しました。次にそれを作る組織の紹介です。

LINE証券の開発に関わる組織

LINE証券は少し特殊な存在です。我々本体としては、フィナンシャル開発センター開発1室に所属しています。室全体ではエンジニアが42人。業務委託の人々が他にいる状況です。その中で、フロントエンドエンジニアが社員と業務委託を含めて14人ほどいます。フロントエンドチームとしては、社内でもかなり大きなほうのチームかと思っています。

我々とフロントエンド開発センターとの関係は、直接一緒にプロダクトを作ることはあまりありませんが、お互いによく知見共有などをしているような関係で、オンライン交流会とか、あるいはメンバーがフロントエンド開発センターが主として運営するPodcast「UIT INSIDE」に呼ばれたりといった関係になります。

フィナンシャル開発センター内で一緒に仕事をするチームしては、主に企画チーム、デザインチーム、QAチームといったチームがあります。時間の関係上、ここでは特にQAチームの存在について伝えたいと思っています。

QAチームは、我々の作ったものをしっかりと動作検証してくれるチームです。非常に精緻な検証を行ってもらっているので、かなり精神的にも安心して開発できます。後で詳しく触れますが、開発側としても、技術的なチャレンジがいろいろと自由にできる環境も保たれているのではないかと思っています。

LINE証券フロントエンド開発チームの開発環境と方法

それでは本題ですが、LINE証券フロントエンド開発チームが、実際にどんなふうに開発をしているか説明します。

まずフロントエンドチームが対象とするユーザー環境ですが、主にIAB（In−App Browser）と呼ばれる、LINEアプリ内のブラウザーがメインになります。実際にLINEのウォレットタブからLINE証券を開いてもらえるので、今口座を持ってる方もまだの方も、眺めながら聞いてもらえればと思います。

次に多いのがiOSのSafariです。iOSというと最近（登壇当時）iOS15のリリースがあり、Safariのアドレスバーのレイアウトが変わったりなどがありました。そういったことでたまにSafariには苦労させられていますが、そういうことも楽しんでいます。また、ページによってはPC Viewを作る時もありますが、もっぱらスマホ用のViewを作るのが最優先なのが現状になります。

開発環境としてはChromeの開発Viewを使うことがほとんどで、Mobile Safari特有のデバッグなどをしたい場合は、iOS Simulatorを使うような環境になります。

次に採用技術について紹介します。LINE証券のほぼすべてのフロントエンドは、React＋TypeScriptといった構成によって作られています。

メインの取引サイトはSPAになっていて、自分たちで管理しているNode.jsのサーバーから、そのSPAを配信する構成になります。LPなどの場合は、独立してNext.jsなどを使って立てることもあります。現時点でTypeScript300,000行、CSS50,000行といったようなコードの規模感になります。

またライブラリのアップグレードや最新技術の採用にも、意欲的に取り組んでいます。特にTypeScriptについては4.4.2、現時点での最新リリースが実際のプロダクション開発に採用されています。

サードパーティの状態管理ライブラリでRecoilというものがありますが、React hooksなどとの相性を考え、かなり早い段階から採用しています。最初に入ったものがRecoil0.0.8、マイナーバージョンも0の時だったと聞いています。2021年の6月には、0.3.0になったRecoilをより大規模に使い、別のライブラリから状態管理の移行を進めています。

プロダクトを作る時のこだわり

その次に、我々のプロダクトを作るに当たってのこだわりを紹介します。まず第一に、我々が守るべき絶対防衛線として、ユーザーが取引したいのにできないことは絶対に防がなければなりません。

いろいろ便利な機能なども追加していきますが、証券サービスとして基本的な「取引ができる」という、最も根本のところは絶対に崩してはいけません。そういうところを気をつけるのは、証券サービスを作るに当たっての特色なのかなと思っています。

そのため、我々のチームはコードの安全性に非常に気を配っています。そしてその安全性を何で保証するかというと、TypeScriptの型安全性です。これを確保することによって、開発時にバグを埋め込むリスクも下がるし、改修の際に意図しないデグレ（デグレード）を発生させてしまうことも少なくなると思っています。

例としては、APIの返り値型を扱う時、APIの返り値は「成功」と「失敗」と「通信中です」というステートがあると思います。そのうち、エラーのケースが親コンポーネントでハンドルされているものを、「その下でエラーは来ません」としっかり型推論によって保証する感じで、データの実態に即した型がしっかり指定されることを目指していて、コードレビューでも見られる1つのポイントになっています。

また、それと同時に拡張性にも気を配っており、そのための取り組みとして、コンポーネントや関数の責任範囲を考えて実装するということがあります。具体的にAPIのレスポンス型の話でいうと、レスポンスの型をUI表示にそのまま使うのではなく、UIコンポーネントはそれ自身が扱いたい型を持っておいて、その間の変換層を持っておくような責任の住み分けですね。

他に「エラーコードはUIに持つべきではない」とか、いろいろなコンポーネントの状態管理を親コンポーネントに全部任すのではなくて、子どものコンポーネントの状態管理と、そのrender関数をまとめて担当するhookを作ることに最近我々はハマっていますが、そういうこともやっています。これについては、少しこの場で説明するのが難しいので、ブログ記事をぜひ見てもらえればと思います。

このように各部分の責任を明確にした設計をすることによって、ある部分の仕様変更や修正がその責任の範囲に収まるので、コード全体の見とおしのよさに寄与してくれていると思っています。

設計と同じぐらいこだわっているポイントが、ユーザー体験の部分です。できるだけストレスなく使ってもらうため、画像にはちゃんとAlt textを設定するとか、イメージはちゃんと軽くする、レイアウトシフトはもちろん抑えるなどといったような、パフォーマンス面の調整にも気を配っています。

またチーム内でも浸透するようにするために、例えば画像最適化であれば専用のコンポーネントが用意されていて、非常に簡単にWebPを活用できるようになっています。

ここまで我々の作るプロダクトについて紹介しました。次にもう少しマクロな視点から、私たちのチームが組織としてどうなのかを説明します。

LINE証券チームの特色

LINE証券チームの特色として、冒頭でもお話しましたが、チャレンジが受け入れられやすい印象があります。ユーザーにもっといいものを届けるために、企画チームだけではなく、技術チームからも「こういったことをしたらいいんじゃないですか」という提案を積極的にしていて、直接的なプロダクト面だけでなく、チームの運営方法についても提案があります。

最近では「Webの最新技術を活用して、もっとおもしろいものを提供できるんじゃないか」ということを目的として、最新技術の概要とそれによって実現できそうな機能の案を企画チームの方に説明して考えてもらう会をやったり。あるいは、「エラーログの文面を自然言語処理解析をして分類をして、検証や改善をしやすくしましょう」という試みがあったりしました。

過去には、フロントエンドのパフォーマンスを自分たちで測定して、その改善を1つの案件として企画サイドに持っていくなど、自発的にやっています。

それからもう1つの魅力として、個人の成長を大切にするチームだと思っています。というのも、証券フロントエンドチームは14人いると言いましたが、そのうちのリーダー役は19卒、20卒入社のメンバー、つまり新卒2、3年目という若いメンバーがやっています。実際にそれでうまく回っているし、そういったチャレンジの環境があるのは非常にいいかなと思っています。

自分の話になってしまいますが、当時入社3ヶ月ぐらいの人に、新プロジェクトのフロントエンドリーダーという、それなりの責任を持たせてもらえるなど、各々のメンバーの成長の機会を与えてくれるのは、非常にありがたい環境かなと思っています。

その他、フロントエンドエンジニアとは言いつつも、時にはフロントエンド以外の技術を触ることも必要になってきています。

まず最もフロントエンドに近いところとして、自分たちで管理しているNode.jsのサーバーがあったり、あるいはCI／CDとか。テスト環境を整備するために、もう少しインフラチックな場所を触ったりする必要があります。

また、社内にはそういったことをするためのツールがたくさんあります。全部把握するのはなかなか大変ですが、フロントエンドの直接的な部分以外の知識や経験が得られるのも、また刺激的なポイントかなと思っています。

LINE証券チームがおすすめの人

いろいろここまでお話ししましたが、最後に「こんな人たちに自分たちのチームに来てほしいです」ということを伝えて終われればと思います。

まずReact＋TypeScriptを使って、LINEという巨大なプラットフォームの上に立っている大規模サービスを作ることに興味がある方。大規模サービスを作るとただ実装するだけではなく、その後の仕様変更に耐えることとか、サーバーに余計な負荷をかけていないかとかの気配りも必要になってきます。そういったTypeScriptの型安全の力を主に活用して解決することに興味がある方、ぜひおすすめです。

もう2年ぐらいあるサービスで、コードとしても300,000行ほどあるので、それらを読み解いて理解して、自分のコードに活かしていく技術も求められています。

また、最新技術を追うのが好きな人は非常に向いています。チームとしても非常に最新技術を追いかけ、常々取り入れたいと思っているチームなので、新しいものを使っていいものを作りたい人にはおすすめです。

最後に、与えられた仕事をするだけでなく、自分でプロダクトを見て「ここもっと改善したいです」と提案して実現していくということをやりたい方も大歓迎です。そうでなくても各案件の中でチーム代表として意思決定をしていかなければいけない機会は非常に多く発生するので、自主的に動けること、積極的に動けることは非常に重要視しています。

以上、LINE証券フロントエンド開発チームについて紹介しました。興味を持たれた方がいましたら、まずはカジュアル面談からも可能だと思うので、ぜひ連絡もらえればと思います。ご清聴ありがとうございました。