React + TypeScriptで固めつつ、新しいことも取り入れる　LINE証券のフロントエンドエンジニアが大切にしていること

新卒なのに一番古参のLINE証券フロントエンジニア

水牧稜太氏（以下、水牧）：ではこれから、ReactとTypeScriptで作るLINE証券のフロントエンド開発について、紹介したいと思います。よろしくお願いします。

まず自己紹介からですね。私はLINE証券でフロントエンジニアとして働いている、水牧と申します。2020年度に新卒として入社し、LINE証券に配属されています。社員としての経歴はまだ1年ちょっとなのですが、LINE証券の開発チーム自体にはアルバイトとして以前から在籍していて、ちょうど2年ちょいになります。なので驚くべきことに、今現在、新卒なのになぜかチーム内で一番の古参になっているんですね。

バイト時代に、すでにLINE証券の取引画面を作ったりしていたので、サーバーの方に社員と勘違いされたりする事件もありました。立場に関係なく、バイトであっても責任ある仕事を任せてもらえるのはLINEのカルチャーであり、けっこう良いところだなと思っています。あと最近だと、開発と並行してチーム内のタスク管理も行っています。

「1株から取引可能」でスタートしたスマホに特化した証券サービス

ではまず、LINE証券について、軽くサービスを説明します。LINE証券はスマホに特化した証券サービスです。もともとはLINEユーザーのうち、若年層、今まで投資経験の薄い層にリーチするように「1株から取引可能」を売りにサービスを開始しました。現在では、現物取引であったり信用取引、投資信託などの幅広い商品も扱うようになっています。

既存の証券会社が提供するアプリとは違った、使いやすいモダンなUI／UXを目指しているので、サービスの中でもフロントエンドの占める重要性はかなり大きいと感じています。

また、株のタイムセールなどの既存の証券会社にはない革新的なキャンペーンも開催していて、今までにはない証券サービスを目指しています。

この画面右にある画像が実際の取引画面の画像ですね。証券サービスだととにかく情報量が多くなりがちなのですが、そうした中でも必要な情報をきれいに整理しつつ、ユーザーが売買しやすいアプリになるように、企画とデザイナー、エンジニアで試行錯誤しながら作っています。

LINE証券を見るための基本的な動線は LINEアプリ内での遷移になるので、アプリ内ブラウザで私たちのアプリケーションは開かれることが多いです。ただ、普通のWebアプリなので、普段のローカル環境での開発は、Chromeなどで動かして開発しています。

なので、特に開発時にIAB（In App Browser）、アプリ内ブラウザを意識することはありません。時々アプリ内ブラウザ固有のバグとかを踏んでしまう場合もあって、そういった時だけちょっと意識はします。

あとは基本的にスマホファーストなので、PC Viewはあんまり開発されていませんが、一部画面ではPC Viewもしっかり実装していたりします。この画像にある例は、株式の銘柄検索画面なのですが、けっこうスマホとデザインが異なるので、CSSでフレキシブルにがんばるのではなく、ロジックレベルで描画するページを変えて実装しています。

今後PC Viewをリッチにしていく可能性はありつつも、とにかく今はスマホViewをメインターゲットに、機能拡充を優先しているのが正直なところです。

事業的な話になりますが、サービスとしてのステータスはこのような感じです。サービス開始は2019年8月なので、ちょうどサービスも2年ぐらいですね。口座数も順調に伸びていて、金融サービスということもあり、とにかくかなりの額のお金が動くのが特徴です。また、秒間250ぐらいのアクセスがありますね。

LINE証券だけでなく、LINEのサービスどれにも言えることですが、とにかくLINEがもつユーザー数は莫大なので、LINE内に動線を設けたりすると、本当にとにかく人が入ってきます。そうした大規模サービスの開発ができるのもLINEの魅力かなと思っています。

LINE証券の根幹は「React」と「TypeScript」

では次に、LINE証券のフロントエンド開発について、技術的な話をメインにしていければと思います。

今回のプレゼンのタイトルにも明言しているとおり、LINE証券の根幹を成す技術は「React」と「TypeScript」でできています。私たちのサービスは主に、取引を行うためのLINE証券のアプリケーションと、LINE証券だけではなく FXなどのフィナンシャルサービスの口座開設周りを総合的に管理するためのアプリケーション、そしてLPなどの主に3つに分けられていて、そのうちのどれもがReactとTypeScriptで作られています。

ただ、それ以外の技術スタックについては比較的自由です。例えばCSS周りですと、メインの証券アプリケーションはCSS Modulesでがんばっていますが、口座開設のアプリケーションはCSS in JS、具体的にはstyled-componentsで書いていて、LPなどではlinariaを使ってbuild timeでCSSを処理したりしています。

あとは、基本的にWebpackを自前で設定して開発していますが、LPにはNext.jsを導入しています。ここらへんのスタックに関しては、チーム内で議論して決めていきます。

私たちの仕事としては、画面を構築していくのがメインにはなりますが、必要があればNode.jsでサーバーも書きます。具体的には、私たちのチームで管理しているNodeサーバーが何台かあって、そこでログイン周りの処理であったり、部分的にBFFを実装したりしています。

最近だと、SSOのフロントエンドサーバーを自分が立てたりしたんですが、そういったイチからサーバーだけを書くみたいなことも、ないわけではないです。

あと次にCSSですね。LINE社内では、マークアップとJSエンジニアが分かれている場合もありますが、私たち証券フロントエンドチームでは、CSSも自分たちでイチから書いています。

Reactでコンポーネント書く時など、コンポーネントの粒度や何をインターフェースにするか気にすると思いますが、CSSもコンポーネントを構成する要素である以上、意味を考えて実装する必要があると思っています。そこらへんを楽しみながら、CSSがつらいこともありますが、がんばっています。

かなり自由な技術選定で導入された「Recoil」

あとは先ほども話に出たとおり、技術選定はかなり自由で、チーム内で同意が取れれば各々使ってみたいものを採用しています。特に何かに圧倒的な優位性などがなければ、とりあえずチャレンジしてみることにしています。なので、CSSもいろいろなものが混在していたりしますね。こうした新しい技術に対する姿勢は、私たちのチームの魅力でもあると感じています。

その具体例として挙げられるのが、Recoilの導入ですね。最近メインの証券サービスにも導入した話の記事がLINE Engineering Blogでも出ましたが、実は半年前から口座開設などのフローでは使用していました。

その時のバージョンは0.0.8で、まさかのマイナーバージョンすらゼロという状態で取り入れたので、さすがにちょっと心配もありました。ただ、動作上の問題についてはうちのサービスだとかなり綿密にQAがなされるので、比較的安心して、そうした新しい技術も積極的に取り込んでいけるのは、私たちのチームの強みだなあと思っています。

そうした技術選定や普段のコーディングにおいて一番大事にしているのは、とにかくモダンな最適解を追い求めるということです。

普段の開発で何かやりたいことがあった時、目標を達成する方法はいっぱいあると思いますですが、意味的に正しい方法で、かつ最新の技術を可能な限り取り入れて、今一番ベストな方法はかなり限られてくるかなと思っています。

そうした判断に迷った時は、チーム内で積極的に議論しつつ、可能な限りモダンでベストな対応をいつでも追い求めるようなチームであると思っていますし、そうしたことができる環境がLINE証券にはあるかなと思っています。

型安全へのこだわり

あと魅力というかこだわりですが、TypeScriptを使った型安全には、細心の注意を払って作っています。私たちのサービスはかなり大きく、新規の案件もだいぶポコポコといろいろ生えてくるので、とにかく未来を見据えた設計、いわゆる保守性はすごく大事になってきます。

そうした時に、最も真価を発揮するのが型だと思っています。自分は、型は未来への投資だと思っていて、もちろん新規実装の時にも大いに役立つのですが、やはり後から実装者とは違う人が新しい機能を追加したり、既存の機能の改善を行う際には、無駄な調査であったり、バグを可能な限り減らしてくれるのが型だと捉えています。なので、最初の実装時には正しい型をつけることにすごくこだわっています。

例えば「anyを使わない」とか、「stringなのか文字列リテラルなのか」といった基本的なところだけではなくて、「optionalにするのか、undefinedとのUnion型にするのか」や、「React.ComponentPropsで省略して書いちゃうのか、愚直に書くべきなのか」など、そういった細かいところも含めて意味的に正しいもの選択していくことが、後々のリファクタリングを容易にしてくれるので、そこはレビュー時などにも注意を払っています。

メンバーに求めるスキル

ここまで技術面で私たちのチームについていろいろ説明しましたが、ここでチームとしてどういうスキルを重要視しているのか、現在進行形でどういうスキルをメンバーに求めているのかをまとめます。

まず何よりも、ReactとTypeScriptでの開発力ですね。基本的なReactやTypeScriptでの実装能力から、優れたコンポーネントの設計や読みやすいコードが書けるかなどです。ただ、こうした能力をチームメンバー全員が初めから完璧に身に付けていたわけではなくて、いろいろ試行錯誤しながら、ノウハウを積み上げてきました。

なので、その時点での経験とかスキルだけでなくて、一緒に仕事をしていくうえで一緒に成長していけるか、チームメンバーにも何か新しい経験をもたらしてくれるような存在であるか、なども気にしています。そうした技術的向上心は、実務だけでなくて趣味の開発からも養われるので、そういったこともかなり大事にしています。

次に既存コードを読み解く力ですね。やはりこの規模のサービスになってくると、本当に古いコードと新しいコードが入り混じっています。また、さまざまな機能が実装されているので、それぞれの仕様が絡み合ったりして、すでにだいぶ複雑になっています。

なので、既存のコードを読んで実装を把握するという作業はかなり頻繁に発生します。こうした既存コードを読み解く力は、私たちのチームにとって切り離せないと考えています。

表面にある実装を理解するだけだったら読めばいいだけですが、その背後にある設計の意図などの抽象的なことも含めて理解し、感じ取ってもらう力があれば、機能追加だけでなく、さらなる理想的な設計などにも昇華できると思うので、こうした力は非常に重要視しています。

最後にチャレンジ精神と自主性です。これは自分でも言っていて、恥ずかしいくらいありきたりな言葉ではありますが、あえて取り上げるほど重要視はしています。

というのも、LINE証券自体が金融業界にしてはかなりチャレンジングなことを行っていくプロダクトであって、かつ技術的にもいろいろチャレンジしていきたいと思っているチームなので、そうした精神を持ち合わせている方のほうが私たちと波長が合うのかなと思っています。

あとは案件の数がけっこう多く、個々の案件でそれぞれが企画や他のチームと議論して、仕様なり方向性なりを定めていくこと必要があり、とにかく自主的に動いてもらう場面が多いのであえてここで取り上げました。

すごく偉そうにいろいろ言いましたが、フロントエンドエンジニアとしては基本的なところなので、そんなに特徴的ではないかなとも思っていて、とにかく楽しんで、技術が好きな方であれば、本当にいいなと思っています。

職場環境と具体的な業務フロー

では最後に、職場環境と具体的な業務フローについて、お話しします。まず大崎オフィスのLINE証券内のフロントエンドチームに絞ると、社員10名と業務委託が2名の総勢12名で開発しています。その他に、LINE Fukuokaにも4名フロントエンジニアがいて、一緒に開発しています。

あと一応、LINE Financialのオフィスは大崎にありますが、この1年はずっとリモートワークでやっていますね。特に強制出社日も今のところなくて、メンバーによっては、本当に1年近くオフィス来ていない人もいると思います。

オフィス自体はかなり便利で、椅子とか机とか快適なので、自分は時々気分転換に出社したりしています。そのへんは自由です。あと勤務時間もけっこうフレキシブルで、家の用事があったり子どもの送り迎えがあったりした時は、途中抜けたりしている方も多くいるので、そこらへんも柔軟にできるかなと思っています。

あと実際の業務としては、とにかく新規の案件かなり多いですね。まだローンチして2年の若いプロダクトなので、いろいろな新機能の企画がかなり多く、そうしたものの対応がメインになるかなあとは思います。

リファクタはそうした中に埋め込んでいくのが一般的で、ただ「ステート管理の根本を改善したい」など、大きいものは改善だけで案件化して対応しています。

開発の流れとしては、企画担当者が仕様に落とし込んでくれて、それ見ながらフロントエンドとサーバーと企画、PMで実現方法についてミーティングしつつ、仕様から変える必要があればまた戻して、変えてもらったりします。

とは言っても、決まった開発手法がLINE証券内であるわけではなくて、ウォーターフォール的に進める場合もあれば、アジャイル的にスクラム組んで細かくリリースしていくような場合もあって、案件ごとにだいぶ異なっています。

あとは新規案件の他に、定期リリースは2週に1回行われていて、細かな改善やバグ修正を行なっています。

いずれの場合でも、QAはかなりしっかり行われます。というのも証券会社として基本的な機能、取引周りの機能が提供できなくなると、国とか金融庁などからお叱りが来て、場合によっては事業継続困難な事象にもつながりかねないので、機能レベルからリリース前のリグレッションまで、しっかりとQAエンジニアがテスト計画を立てて実行してくれます。

そういった背景もあって、もちろん私たちとしても最大限バグを減らしていますが、チャレンジングなこと、先ほどのRecoilの導入など、金融業界だけどそういうこともできるような環境になっているかなと思っています。

あとはPMもかなりエンジニア寄りで、技術畑出身の方も多いので、仕事はかなり進めやすいかなと思っています。また、企画とデザイナーとの連携もすごい多く、だいぶフラットに、たとえば企画で突っ込みたいところあったら突っ込んで、一緒に新しい仕様を考えたりとかもしますね。そのあたりは、チームの垣根を超えてフラットにやっていると思っています。

UXが悪いフィンテックに風穴を開けたい

以上で、LINE Financialのフロントエンドエンジニアの紹介は終わりです。最後に、金融は、昨今フィンテックなどと騒がれていますが、まだまだUXが悪いところも多くて、そこに風穴を開けるようなプロダクトにしたいと思って私たちは開発しています。なので、サービスとしてチャレンジングなことも多くて楽しいですし、またLINEで働くということも、これだけ多くの人使っているサービスはなかなかないので、ワクワクがすごい多いかなと思います。

ということで、今日の話で少しでも興味を持っていただいた方は、この2つを掛け合わせたLINE証券に、ぜひ応募なり、カジュアル面談でもいいので申し込んでもらえるとうれしいです。ご清聴ありがとうございました。