LINE新卒エンジニアのしごと〜5月のフロントエンドエンジニア編〜

LINEには、今年33名の新卒エンジニアが入社しています。この連載では、新卒で入社したエンジニアがどのように働き始め、どのような仕事をしているのかを月に1回程度の持ち回りで紹介してもらいたいと思います。

2019年入社の1回目は、LINEのフロントエンド部門であるUIT室に所属している西山さんと玉田さんに、UIT室での仕事の始め方や最初にやった仕事、普段の業務を紹介してもらいました。


新卒フロントエンドエンジニアがチームに配属されてから仕事をするまで

こんにちは。私はLINEのフロントエンド開発を行うUIT室に所属している2019年新卒の西山です。 私はUIT室の中でもFront-End Dev3チームという主にLINE NEWSやLINE LIVEのフロントエンド開発を行っているチームに所属し、今はLINE NEWSの開発を行っています。

この記事では、約2ヶ月の研修を終えたLINEの新卒エンジニアが実際に部署・チームに配属されてから、 最初にどういった仕事に取り組んできたのかについてご紹介します。 本当に配属されて間もなく、現在進行系の内容となりますが、少しでも雰囲気を伝えられればと思います!

新しく入社したUITメンバーみんなが取り組む UIT Workout

UIT室には新卒入社だけでなく中途採用で入社してくるメンバーも沢山います。 新しくUIT室に入ってきたメンバー全員が取り組む課題としてUIT Workoutというものがあります。 これは、LINE内ウェブアプリをお題として、与えられたアプリ画面のデザインファイルから実際にフロントエンドのHTML/CSS/JavaScriptを実装するというものです。

このUIT Workoutでは以下のようなことを学びます。

  • LINE社内のコーディング規約に則ったHTML/CSSマークアップ
  • LINEのネイティブ機能を呼び出すためのJavaScript SDKの使用方法
  • 社内サーバへのデプロイ方法
  • LINEの開発版アプリでの動作検証・デバッグ方法

この課題を通じて、LINEのフロントエンドエンジニアが業務で必要となる基礎知識を学ぶことで、実際の仕事に少しだけスムーズに取り組めるようになります。

UIT Workoutでは使用するフレームワークについては自由に決められるので、 私の場合はこれまであまり触ってこなかった、Vue.js + Vuex + TypeScript という技術スタックで新しい技術を学びながらUIT Workoutに取り組みました。

UIT Workoutが完了するとGithubの当該リポジトリにプルリクエストを作成し、チームメンバーにレビューしてもらいます。

沢山レビューしてもらえます。

過去のメンバーのUIT Workoutのコードもリポジトリで見れるので勉強になります。

最初のコード

UIT Workoutが終わると、ついに実際の仕事に取り掛かります。 LINE NEWSでは定例のミーティングでタスクアサインを行います。アサインは基本的に挙手制ですが最初なので簡単なタスクを割り当ててもらいました。 開発環境の構築を行い、コードを徐々に理解しながら、タスクに取り掛かりました。 分からない用語や概念が多いので、「LINE NEWS 用語集」で社内Wikiを検索したところ、用語一覧表が出てきたのでそれを参考にしました。 (ついでに、社内WikiのLINE NEWS開発の新メンバー向けページにその記事のリンクを追加しました)

私が一番最初に取り組んだタスクは、 LINE NEWS内に存在する別の画面やアプリに遷移するためのポップアップウィンドウについて「画面遷移後に再びLINE NEWSの画面に戻ってきたときに、このポップアップウィンドウを消す」という機能の実装でした。 一部画面でこの挙動が実装されていなかったため取り組みました。

LINE NEWSに戻ってきたらポップアップを消す

この機能のためのコードの変更は2行で済みました。小さな変更ですが、これが私が書いた実際のプロダクトにマージされるはじめてのコードになりました!

大きな組織で開発する

次に取り組んだタスクは、LINE NEWSの記事の見出しとして動画を読み込めるようにする機能です。 この機能は一部の種類の記事でのみ対応していたので、追加の対応を行いました。

実装した動画読み込み機能

LINE NEWSは企画・開発・QAを含んだ全体では50名以上が関わる大きなプロダクトなので、沢山の人とコミュニケーションをしながら開発を行います。開発する機能の仕様について企画の担当者と相談し、実装の方法について、チームメンバーやバックエンド担当者と相談しながら進めました。 実装後、どのようなテストを行うかQA担当者を含む全担当者で相談を行いました。

UIT室のフロントエンドエンジニアは、JavaScriptのコードの他に、JavaやPerlのテンプレートエンジンで書かれたHTMLテンプレートも書きます。 今回はタスクではJS側の改修は少なく、主にPerlで書かれたHTMLテンプレートの改修を行いました。

小さなチームで開発する

LINE NEWSのフロントエンドは10人ほどのメンバーで開発を行っています(今はかなり大所帯になったそうです)。定例のミーティングの他に、大きなディスプレイにコードを表示し、複数人で設計やコードのレビューを行うレビュー会や、複数人でコーディングを行うモブプログラミング、その日行ったことや開発中の機能を共有するデイリースタンドアップなどを行っています。

レビュー会の様子

開発の質を高めるために、コミュニケーションの機会が沢山設けられています。

様々なプロジェクトとグローバルなチームメンバー

こんにちは、同じくUIT室に所属する2019年新卒の玉田です。私はFront-end Dev6チームに配属となり、主に企業や店舗のためのLINE公式アカウントに関するページについて、フロントエンドを全般的に開発しています。UITに配属された後のUIT Workoutについては西山君が詳しく紹介してくれたので、ここではその後どのような実務に取り組んでいるかを紹介します。

Dev6チームはUITの中でも比較的小さな組織で、各メンバーもそれぞれ異なるプロジェクトに取り組んでいます。私が最初に取り組んだ作業は、LINE公式アカウントから送られるクーポンを開いたときに発生するバグの修正でした。こちらもコードの変更自体はほとんど無かったのですが、バグ情報を管理するチケットへの対応、実際に動くプロダクション環境へのデプロイの流れなど、運用上必要な作業の流れなどを知る機会となりました。

現在は、LINE公式アカウントに関するとある新機能を開発しています。開発の規模自体はそれほど大きくないのですが、なんと企画やエンジニアメンバー全員が2019年入社の新卒という驚きのプロジェクトです。どんどん追加されるタスクに翻弄されながらも、ときには皆で議論をしつつ取り組んでいます。ただ、メンターの方もこのプロジェクトに関わっているため、開発していく上で困った場合はもちろん意見を聞くこともできます。UIT室ではアプリケーション開発以外にも色々な広報活動を手がけており、私もUITのPodcast企画「UIT Inside」の収録に携わるなど、入社間もない時期から多方面にUITのプロジェクトに関わることができます。

また、LINE公式アカウントに関してフロントエンドが開発すべき領域はとても多いため、その他の多くのプロジェクトでベトナムにいるLINE社員と共同で開発しています。私も先日開発方針についての意見交換のため、3日間ベトナムに出張しました。プロジェクトによっては、このように海外との共同開発の機会も多くあるかと思います。

LINE Vietnam

メンターランチ

ところで新卒入社した社員には、業務中の悩みや相談に答えるため、1人につきメンターと呼ばれる先輩社員が1人割り当てられます。メンターはUIT室ではなく、あえて別部署に所属する方となっており、他部署と交流する機会にもなっています。また、毎月のメンターとの会食時には手当が支給される制度まであります。太っ腹ですね!

終わりに

以上、UIT室の新卒フロントエンドエンジニアがチームに配属されてからの2週間ちょっとの間に取り組んできたことの簡単な紹介でした。 段々と開発プロセスやコードに慣れてきたので、もりもり開発していきたいと思います。(西山)

UIT室配属から今までのあっという間にも様々な出来事がありました。入社は新卒ですが、UIT室のメンバーと臆することなく色々なプロジェクトに取り組みたいです!(玉田)