【お知らせ】2023年10月1日にLINE Fukuoka株式会社からLINEヤフーコミュニケーションズ株式会社へ社名を変更しました。2023年9月30日以前の記事には旧社名で記載しています。
LINE Fukuokaでは、2月25日から3月25日までの毎週金曜ランチタイム（12～13時）に、「LINE Fukuoka Engineer Job Talk」というイベントを実施しました。
ここでは、第4回目となる「＜LINEフロントエンドエンジニア＞成長を続けるスタンプサービスの持続的開発への挑戦」の内容について紹介していきます。
平山 光太郎
LINE Fukuoka開発センター UIT室 室長
長崎県出身。大学時代を福岡県で過ごし、就職を機に上京。広告代理店を経て金融系のスタートアップ企業へ。いずれは福岡に戻りたいと考えていたため、LINEのUIターン採用イベントに参加し、2017年にLINE Fukuokaに入社。現在は、フロントエンドチームのマネージャーを務めている。
中村 高大
LINE Fukuoka 開発センター UIT室 フロントエンドエンジニア
ウォンテッドリー株式会社にてフロントエンドエンジニアとしてプロフィールページ等の開発をおこなう。その後2021年5月に福岡に移住。LINE Fukuoka にフロントエンドエンジニアとして入社し、現在は LINE Creators Market の開発に従事。
陸 頤珊(Trina)
LINE Fukuoka 開発センター UIT室 フロントエンドエンジニア
台湾出身。台湾でいくつかのweb開発の経験を経て2019年12月にLINE Fukuoka入社。現在は、ShopチームでSticker ShopとLINE STOREのフロントエンド開発に従事している。福岡は憧れていた初めての海外生活。日本に住んでよかったと思うことは、台湾より早くアニメの劇場版が見られること。
イベントの冒頭で平山がLINEおよびLINE Fukuokaについて説明し、続けてLINE Creators Marketの開発を担当する中村は、「LINE Creators Market開発の現状と挑戦」と題したプレゼンテーションをおこないました。
中村
LINE Creators Marketは、LINEアプリの中で使えるコンテンツをクリエイターの方々が作って販売するためのプラットフォームです。サービスがリリースされたのは2014年で、もうすぐ8年目を迎えます。2021年4月時点で400万人前後のクリエイターの方々が登録していて、LINE Creators Marketから販売されているコンテンツは1,000万点以上になります。
中村
開発メンバーとして在籍しているのは、フロントエンドは4名、バックエンドが5名、テストの自動化などを専門的に対応するSET（Software Engineer in Test）が1名です。フロントエンドの2名は外国籍のメンバー、バックエンドも3名が外国籍のメンバーであり、チームのうちの半数が外国籍という状況です。
技術として、フロントエンドはVue.jsとVuexを利用、サーバーサイドは基本的にPerlでコードが書かれていますが、新しく実装する部分ではKotlinが使われています。
技術として、フロントエンドはVue.jsとVuexを利用、サーバーサイドは基本的にPerlでコードが書かれていますが、新しく実装する部分ではKotlinが使われています。
中村
プロジェクトでは、仕様を作る企画チームと、テストを担当するQAチームと連携することが一般的です。流れとしては、企画チームが仕様を作成し、開発とQAを交えて仕様をレビューします。そこで問題がなければ実装してテストを行い、バグなどが見つかれば修正してリリースするという流れになります。
中村
LINE Creators Marketのフロントエンドチームで取り組んでいる課題の1つは、技術的負債の解消です。リリース当初はAngularJS等を使って実装していましたが、AngularJSのサポート終了に伴いVue.jsの採用が決まりました。2018年頃から機能開発と並行してリファクタリングを進め、現在はほぼすべてのコードベースがVue.jsに置き換えられています。また昨今ではビルド環境と開発環境の改善に取り組んでいます。
中村
最近ではパフォーマンス改善にも取り組んでおり、Core Web Vitalsのスコアを向上するための施策を進めています。具体的には、Sentryを使用してページごとのCore Web Vitalsのスコアを収集することでボトルネックを特定し、その原因を改善する作業をおこないました。これによりFID(First Input Delay)とCLS(Cumulative Layout Shift)のスコアを大きく改善することができました。
中村
最後に、海外籍 のメンバーが多い環境での働き方についてお話しします。
現状はプルリクエストやSlack、ドキュメントに関しては基本的に英語ですが、英語の読み書きに苦手意識や拒絶反応がなければ問題ないと思います。
社内には開発専属の通訳がいて、規模の大きいミーティングでは通訳サポートを受けながらミーティングを進めることができます。また面接時点で英語能力が問われることはありません。同様に、海外籍の方に対しても日本語の能力は問われていないので、英語でコミュニケーションをとる機会は自然と多くなっている状況です。
日本人が英語を学ぶのと同様、海外籍のメンバーも日本語を学んでいます。そのため、いきなり英語の環境に飛び込むのはハードルが高いと感じている人にとっては、いい環境ではないかと感じています。
現状はプルリクエストやSlack、ドキュメントに関しては基本的に英語ですが、英語の読み書きに苦手意識や拒絶反応がなければ問題ないと思います。
社内には開発専属の通訳がいて、規模の大きいミーティングでは通訳サポートを受けながらミーティングを進めることができます。また面接時点で英語能力が問われることはありません。同様に、海外籍の方に対しても日本語の能力は問われていないので、英語でコミュニケーションをとる機会は自然と多くなっている状況です。
日本人が英語を学ぶのと同様、海外籍のメンバーも日本語を学んでいます。そのため、いきなり英語の環境に飛び込むのはハードルが高いと感じている人にとっては、いい環境ではないかと感じています。
続けて、台湾出身で2019年12月にLINE Fukuokaに入社した陸 頤珊(Trina)が「スタンプショップの開発と課題」について話しました。
Trina
私が所属しているUIT-Bチームのメンバーは7名で、全員が海外からきています。サーバーサイド等他の技術領域でも海外籍のエンジニアが多いため、普段は英語を使ってコミュニケーションをとっています。ただ、プランナーやQA、デザイナーは日本語話者が多いため、ミーティングのときだけは日本語がメインになります。
Trina
UIT-Bチームでは、社内で「SHOP」と呼ばれるスタンプや絵文字、着せかえ等を販売する部分を担当しています。現在はLINEアプリ内のSticker ShopとTheme Shop、LINE関連コンテンツが購入できるWebサイトのLINE STOREの3つをメインに開発しているほか、お年玉キャンペーンやスタンプ10周年記念といったキャンペーンサイトの開発もサポートおこなっています。
利用している技術は、Sticker ShopはReact、Theme ShopとLINE STOREはjQueryと独自開発のフレームワークを組み合わせて利用しています。
利用している技術は、Sticker ShopはReact、Theme ShopとLINE STOREはjQueryと独自開発のフレームワークを組み合わせて利用しています。
Trina
SHOPに関連するサービスはデイリーアクティブユーザーが非常に多く、1日あたりのページビューは1,000万回程度になります。そのため、もしプロダクション環境で問題が発生すると、影響範囲はかなり大きくなってしまいます。
そのためリリースをおこなう際に問題が生じないようにすることが私たちにとって大きな課題です。
特に初めてのSticker Shopのリリースは本当に大変でした。リリースした直後に重大なバグが発見されたのです。更にリリースステップは複雑で、ホットフィックスのために3回もリリースしなければなりませんでした。
このことから、様々な改善を進め、CIツールやデバッグツールを導入したほか、エラーの記録と追跡にはSentryを使っています。
そのためリリースをおこなう際に問題が生じないようにすることが私たちにとって大きな課題です。
特に初めてのSticker Shopのリリースは本当に大変でした。リリースした直後に重大なバグが発見されたのです。更にリリースステップは複雑で、ホットフィックスのために3回もリリースしなければなりませんでした。
このことから、様々な改善を進め、CIツールやデバッグツールを導入したほか、エラーの記録と追跡にはSentryを使っています。
Trina
リリースプロセスも改善しました。以前のデプロイツールは複数のフォームに入力しなければならずとても複雑でしたが、現在は1行のSlackbotコメントで完結します。それ以外にも、チームでは時間があるときに私たちの仕事を楽にするためのツールを開発しています。たとえば去年は、APIライブラリの作成をGit化するGitHubアプリを作りました。
Trina
SHOPというプロジェクトは歴史が長いため、レガシーコードや古いシステムが存在するのは仕方がありません。ただ、新しい機能を開発したいのに、古いコードベースが足手まといになるという経験は多くの人にあると思います。新規の開発をストップして全員ですべてのコードベースを書き直すのは不可能です。そのため、限られたリソースで新機能開発とコードベースの改善のバランスをとっていくことが私たちの課題となっています。
そこでSticker Shopでは、新機能を開発する際に同時にリファクタリングを進行するようにしています。新しい機能のリクエストをプランナーから受け取ったとき、同時にリファクタリングをおこないたい場合は、開発期間を長めに設定してもらうようにしています。これにより、Sticker Shopのコードベースの品質を少しずつ改善しています。
そこでSticker Shopでは、新機能を開発する際に同時にリファクタリングを進行するようにしています。新しい機能のリクエストをプランナーから受け取ったとき、同時にリファクタリングをおこないたい場合は、開発期間を長めに設定してもらうようにしています。これにより、Sticker Shopのコードベースの品質を少しずつ改善しています。
Trina
LINE STOREは昔ながらのサーバーサイドレンダリングアーキテクチャであり、フロントエンドはバックエンドと密接に結びついています。そこでコードベースをVueに移行することを検討しています。スムーズな開発プロセスを実現し、開発コストを削減することが目的です。
新しい機能を提供し、ユーザーによりよいエクスペリエンスを提供することは私たちにとって最も重要な任務の1つです。ただ、コードを書いて新しい機能を実装するだけでなく、コードベースのリファクタリング、開発フローの改善、チームの生産性向上にもチャレンジしています。
新しい機能を提供し、ユーザーによりよいエクスペリエンスを提供することは私たちにとって最も重要な任務の1つです。ただ、コードを書いて新しい機能を実装するだけでなく、コードベースのリファクタリング、開発フローの改善、チームの生産性向上にもチャレンジしています。
Q&A
続けて、参加者から寄せられたさまざまな質問に登壇者が回答しました。
Q：業務で必要とされる技術を教えてください。
中村
LINE Creators Marketのチームで言えば、ライブラリとして使っているVue.jsなどへの理解は必要です。パフォーマンスの改善や難しいバグへの対応といった場面では、WebブラウザーそのものやJavaScriptに関する知識が必要になってくるかと思います。さらに、問題があったときに利用しているライブラリのソースコードを見て、その原因を特定するといったことができるとよりよいでしょう。
Q：選考で使うプログラミング言語について教えてください。
平山
課題選考は基本的にJavaScriptでおこなっています。そのため、JavaScriptの知識や文法をしっかり理解できているとよいと思います。面接ではReactやVue.jsが使えることも重要な反面、 JavaScriptやWebブラウザーの動きについての知識も重視します。技術的なディスカッション、技術的なコミュニケーションをしっかりとれることも大切です。
Trina
コミュニケーション能力は大事だと思います。チーム内でのコミュニケーションはもちろんですが、たとえばスペックレビューの際にはプランナー、APIであればサーバーサイドと話し合わなければなりません。社内で様々なステークホルダーとやり取りすることが多いので、そこでよい関係性を作ることができないと、仕事がうまく回りません。自分から積極的に人と関わることも大事です。
Q：ダイバーシティに富んだ環境で驚きました。これはフロントエンドチーム特有の状況でしょうか。それともLINE Fukuokaの開発センター全体の特徴ですか？
中村フロントエンドのチームは特にダイバーシティに富んだ環境ですが、LINE Fukuokaの開発組織全体でも半分程度が外国籍のメンバーであるため、フロントエンドに限った話ではありません。
Q：アサインされるサービスは希望を出せるのでしょうか？
平山入社前から強い希望があればできる限り尊重できるようにしています。ただ、ほぼすべてを英語で進めているプロジェクトもあれば、英語と日本語のグラデーションがあるプロジェクトもあるように、実際に中に入らないと見えない部分もあるので、その辺を考慮して適切なプロジェクトを提案させていただくケースもよくあります。
入社後にプロジェクト変更を経験する人も多いので、まずこちらから提案させていただくことが多いです。
入社後にプロジェクト変更を経験する人も多いので、まずこちらから提案させていただくことが多いです。
Q：業務の忙しさやワークライフバランスについて教えてください。
Trina残業はほぼありません。
ワークライフバランスはすごくとりやすい環境であると感じています。
ワークライフバランスはすごくとりやすい環境であると感じています。
中村夜中まで働かなければならないということはほとんどないと思います。もちろん状況次第ではあり、リリース前は多少忙しかったりしますが、基本的には適切なワークライフバランスを維持できると思います。
Q：開発コスト削減の事例を教えてください。
平山Vue 3へのマイグレーションやTypeScriptの導入など、中長期的な視点で見て開発コストを抑えるための施策を実施しています。ただ、僕たちが取り組んでいる理由は、単純に開発コスト自体を圧縮したいからではありません。中長期的に、実際に役に立つものを提供し続けることにポイントを置いていて、コストを減らすというよりも、一定のコストの中でできることを増やしていくことが重要だと思っており、そのための取り組みを随所で進めています。
Q：本イベントの共通テーマは【技術的な課題と新たなチャレンジ】ですが、それぞれが今思う課題とチャレンジを教えてください。
中村LINE Creators Marketは歴史が長く、技術的負債も放っておくと溜まってしまうものだと思うので、継続的なアプローチでより開発環境を高めていきたいと思っています。
リファクタリングは一見するとユーザーには何も新しいものを提供しないように見えますが、この取り組みによって中長期的にユーザーに機能を提供するスピードが上がったり、質が上がったりするものなので、これからも大切にしていきたいです。
リファクタリングは一見するとユーザーには何も新しいものを提供しないように見えますが、この取り組みによって中長期的にユーザーに機能を提供するスピードが上がったり、質が上がったりするものなので、これからも大切にしていきたいです。
Trina私はチーム内でのリリースプロセスをもっとスムーズにしたいです。具体的には自動化の推進等ですね。工数削減のためにVueへの移行などもおこなっていますが、今は私一人だけで対応していて大変なので一緒にできる仲間がいたらいいなと思っています。
平山歴史の長いプロダクトが多いので、それをいかに機能開発を止めずに進めていくのかがすごく大きな課題です。
もちろん戦略的に動くことでカバーできることもある反面、単純に人が必要な場面も多くあるので、私たちと働きたい人、新しい環境でチャレンジしたい人はぜひLINE Fukuokaのフロントエンドエンジニアとしてのキャリアを検討していただけると嬉しく思います！
もちろん戦略的に動くことでカバーできることもある反面、単純に人が必要な場面も多くあるので、私たちと働きたい人、新しい環境でチャレンジしたい人はぜひLINE Fukuokaのフロントエンドエンジニアとしてのキャリアを検討していただけると嬉しく思います！
本イベントは2月～3月にかけて全5回開催されたものです。
各技術領域別のレポートを更新しておりますので、是非ご覧いただけますと幸いです。
また、イベントやレポートを通じて興味をお持ちいただけた方は下記からご応募やカジュアル面談へのエントリーもお待ちしております！！
