LINEの金融系サービスのフロントエンドエンジニアが語る、LINE Financialの仕事と働き方

LINE Financialの仕事の進め方

奥山英介氏（以下、奥山）：よろしくお願いします。私は奥山と言います。

LINEに入ったのは今年の3月なので、だいたい約半年経ちました。前職はサイバーエージェントのメディア系事業で、フロントエンドの仕事をやっていました。今はLINE証券で同じくフロントエンドの仕事をしています。

今日の僕のお話のアジェンダです。

まずは僕のことをお話しして、実際にどんな仕事をしているのか、入社して思うこと、僕が伝えたいことをお伝えしたいと思います。

自己紹介なんですが、僕はドラムが趣味です。

エンジニアを6年間ぐらいやっているんですが、ドラムは今年で20年目ぐらいになっていて、実はパソコンを触るよりもドラムを触るほうが楽なんです。

昔ドラム講師をやっていたこともありました。ただそういう働き方は時間や場所に縛られてしまいます。そんな中で「エンジニアの仕事は自由に働けるのかな」と思いエンジニアを目指し始めました。

「なぜLINEに入ったか？」という話です。経緯を話すと長くなりますが「LINEの金融事業に夢を感じたから」というのが1番大きな理由です。最近FinTech系の事業にさまざまな企業が参入している中、LINEはコミュニケーションツールとして日本人のほとんどが使っているので可能性を感じたのが理由です。

アーキテクチャについて

「実際にどんな仕事をしているか？」という話をさせていただきます。最近「LINE証券」をリリースしまして、このような見た目になっています。

実はこれはWebの技術で実現しているのですが、ネイティブのようなUXを実現することができています。我々はPage Stackと呼んでいるのですが、Swipe Backというネイティブのようにページを戻れたりできるというものも実装しています。

これはアーキテクチャです。

「フロントエンドでアーキテクチャってなんだ？」と感じられる方もいるかもしれませんが、実はいろいろなことをやっています。

HTMLやCSSを作るというのは前段の段階で、作ったものをユーザに届けるところまで面倒を見るような流れになっています。なのでいろいろ使ってそういうことを実現しています。

全体の仕事の流れ的には、大きく分けると機能開発、改善やリファクタリングという感じになるかと思います。仕様は企画の人がこのようなモックを作ってくれて、このボタンを押すと画面に遷移していって、どんな条件付きの機能があって、みたいなことを作ってくれます。最近はFigmaで作ってちゃんと端末で触れるようなものを作ってくれたりしています。

工数についてです。

「画面/ロジックの分割」と書いたのですが、マークアップ部分とサーバからデータを取ってきたりそれを処理したり、ユーザの入力をハンドリングしたりということは分けて考えるようにしています。だいたいn人日と見積りを取るとき、コミュニケーションにかかる時間も見積りに入れることが重要です。

これを入れなければ、仕様の漏れやAPIの仕様の漏れなどでコミュニケーションに時間が掛って大変なことになってしまうので、ここはきっちりと見積もるようにしています。

実装における技術スタック

実装なんですが、実際に使っているのはこうしたライブラリです。

あまり馴染みがないのは「Lerna」だと思います。これは複数のプロジェクトを統一的に管理できるツールです。ツールに関しては特出して「これはすごい！」みたいなことはないかなと思います。

プルリクエストもちゃんとやっています。最近僕が突っ込まれたものだと、batched updateというreactの機能があります。setStateをすると1回renderが走るのがreactの仕様なんですが、複数のsetStateを1個にまとめてくれるのがbatched updateの仕様になっています。

こういった非同期処理が絡んだコードのとき、何回renderが呼ばれるのか誰もわからなかったので、コンソールに出して検証をしてみたらこんな感じになりました。

それに気付いて仕様を読んでみたら「そうだよな」と思うことも詳細にレビューを回したりしています。

テストは重要です。新規のプロジェクトではあまり書いているところがないイメージが僕の中であったんですが、きっちりとテストを書いているのが強みだと思っています。

あとで説明しますが、QAもしています。テストがあることによって精神的に楽にリファクタリングや改善ができることが強みだと思っています。

これはイメージなんですが、いろいろな端末やOS、バージョンを使って実際に問題がないかを確認するようにしています。QAのチームがあって、その人たちがやってくれる感じになっています。

バグ改善にはJiraを使っています。最近あったかわいいバグを1つ紹介をさせていただきます。こんなものがありました。

「デザインの表情が無表情になっています」。どういうことかわからなかったんですけど、実際に見てみると、これは登録のフローのときに電話番号を入力する画面なのですが、こうやって入力をしていって、入力した内容を消すとスッとこのキャラが無表情になると。

この無表情になるというのがどうやらバグらしくて、そこをちゃんと改善なければいけないという報告がありました。今はちゃんとニッコリ笑っていて、入力するとついてきてくれるという感じになっています。

これはAirbnbが出しているLottieWebというツールを使って、こういったインタラクションなアニメーションを実現しています。

あとはリファクタリングについてです。開発中に出てきた疑問や「こういうところを改善したほうがいいよね」ということは、基本的にGitHubのIssueでまとめるようにしています。そういったことを手が空いたらぜひやっていく感じですね。

ここに例として挙げたのはTypeScriptの機能をもうちょっと活かしていこうねというIssueになっています。

LINEに入社して感じたこと

LINEに入って驚いたことなどを紹介します。週次でフロントエンドミーティングをやっているんですが、これが英語で行われています。僕が入社した当日の夕方にフロントエンドのミーティングに呼ばれたんですが、突然英語でミーティングが始まって「ん？　聞いてないぞ？」とビックリしました。僕もそれなりに英語はわかるのでなんとか必死に英語で話して、英語を聞いてついてきました。

あとはデザインに関する定例ミーティングは韓国語です。これは「韓国語を話せ」ということではなくて、ちゃんと会社に通訳さんがいます。韓国語が話せなくても日本語で話したことを通訳してくれるのでコミュニケーションにはまったく問題はないです。そんな感じで、多国籍でいろいろな国の方と一緒に働いています。

「正しい裁量労働制」と書いたのですが、LINEに入って、文化として時間の自由がわりと定着しているなと感じました。これは会議に遅れていいとか、他人に迷惑がかかるようなことや実際に仕事が遅れるような原因になっていいというわけではなく、最低限それらは守った上での話ですが、理屈の通らない圧力もないし、自由にさせてもらえていてすごく嬉しいなと思っています。

その他、伝えたいことですが、朝食が無料です。社内のカフェには朝の9時から10時の間おにぎりやパンが並んでいて、毎朝1人1つですが自由に食べて良いことになっています。また、週次ミーティングのあとにかんたんな勉強会や振り返りのミーティングもやっています。

やることがたくさんあって、非常に人を求めているので、よかったらフロントエンドに応募してみてください。

僕からは以上です。ありがとうございました。

（会場拍手）