【インターンレポート】リモートインターンで LINE NEWS に新機能を実装しました

こんにちは。技術職 就業型コースのインターンシップに参加した泉水勇輝です。

8月24日から6週間、LINE Front-end Dev1 チームに所属し、メンターの堀淳一郎さんにご指導いただきながら、LINE NEWS のフロントエンド開発業務に取り組みました。インターンシップはほとんどリモートで行われました。

この記事では、私が担当した機能や、実際の業務内容についてご紹介します。


LINE NEWS の開発業務

私がこのインターンでメインに取り組んだ業務は LINE NEWS の新機能開発です。

LINE NEWS には VISION という縦型動画コンテンツがあります。VISION は、オリジナルの動画コンテンツが見られる場所というコンセプトで始まったサービスです。当初は、ユーザーができる操作を制限して UI をシンプルにすることで没入感を高めていました。この没入感を保ちながら、より動画を楽しんでもらうのに必要な要素は何かを慎重に考えて、UI/UX の改善やテストを繰り返し行っています。

今回はその一環として、シークバーを実装することとなりました。私はこの案件の担当を希望し、インターン期間中にリリースすることができました。VISION は LINE アプリのニュースタブから見られるので、ぜひご覧ください。


LINE NEWS に関わる人

LINE NEWS は LINE の中でもかなり大きなプロダクトであるため、たくさんの人が関わっています。毎週開かれる企画と開発の定例ミーティングには100人以上が参加します。私が担当した VISION のシークバー実装の案件にも、企画や開発、デザイン、数値解析チームなどのたくさんの人が関わっています。

さて、LINE NEWS での開発は、フロントエンドチームのエンジニアとサーバーサイドチームのエンジニア、そして QA が一緒にチームを組んで進めています。アジャイル開発の一つであるスクラムを採用していて、スプリントと呼ばれる短い期間を一週間に設定し、スプリント毎に計画したタスクをスピード感を持ってこなしていきます。毎日15分ほどで進捗を共有する「デイリースクラム」というイベントの他、次のスプリントを綿密に設計する「スプリントプランニング」など、様々あるスクラムのイベントを毎日行っています。

スプリントで自分がどこまで達成できるかを考え、様々な人とコミュニケーションを常に取りながら開発を進めていくことは初めてのことで、とても新鮮でした。



LINE NEWS のフロントエンドチーム

LINE NEWS のフロントエンドチームは和やかな雰囲気で、居心地が良いです。

フロントエンドチームでは毎日デイリーミーティングを行っている他、毎週いくつかのイベントを行っています。チームでは Battleground と呼んでいる LINE NEWS のフロントエンドの改善点を話し合う会や、みんなで一つの画面を見ながらコーディングするモブプログラミングなどがあります。これらのイベントを通して、日々の業務の改善や技術力の向上を図っています。

また、息抜き会というフロントエンドメンバーでゲームなどをする会も不定期で開催しています。インターンの最終週に開催された息抜き会では、オンラインで遊べるボードゲームで遊んだり、雑談したりしました。普段から笑顔の絶えないチームなのは、こうした交流を重ねていることも理由の一つだと感じました。



LINE NEWS の開発業務の内容

LINE NEWS は LINE アプリの WebView 内で動作している Web アプリです。私は、インターンに応募する前に LINE は Vue.js の文化があると聞いていました。しかし、LINE NEWS はページによって React と Vue.js の両方が使われています。ちなみに、LINE NEWS のフロントエンドチームは React が好きな人が多いです。少し意外でしたが、どちらかに依存せずに必要に応じて柔軟に選択していく文化は素晴らしいと思います。


開発の流れ

まずは、どのように実装して仕様を満たすかを設計します。仕様は Jira にまとまっていますが、迷うところは企画の担当者に直接確認します。GitHub Issue にまとめて後から誰でも確認できるようにしておけば、今後同じところの改修が行われるときに参考になるため、ある程度読みやすいよう綺麗に残します。

実装できたらチームメンバーにコードレビューを依頼します。

レビューが通った変更を開発用のサーバー環境に反映したら、QA チームに動作確認を依頼します。バグなどが見つかったら報告されるので、修正してコードレビューを行う、ということを繰り返します。

リリースは二週間に一度行われます。事前に設定した目標リリース日に間に合えば、リリース用のサーバー環境に反映して、本番環境にリリースされます。私が実装したシークバーがスマホで動いたときは、とても感動しました。


特殊な開発環境

LINE NEWS を開発するときは、できるだけ実際の動作環境に近づけるため、iOS シミュレータに開発用ビルドの LINE アプリを入れ、WebView が参照するビルドされた JS ファイルを Charles でプロキシしてローカルでビルドしたファイルに置換することで、変更内容を確認します。iOS シミュレータの WebView で開かれているページは Safari からデバッグできますが、使い慣れている Chrome DevTools や React Developer Tools を使いたいときが出てきます。その時は Chrome で同じページを開いてデバッグします。ただし、特にタッチ操作などの動作がシミュレータと異なることがあるため、使い分けが必要でした。


LINE のフロントエンドエンジニアとしての業務

LINE には、UIT と呼ばれているフロントエンドエンジニアコミュニティがあります。UIT では社外向けに様々なイベントを行っているので、ご存じの方もいらっしゃると思います。

社会向けのイベントには、例えば、著名なゲストを呼んだカンファレンス「UIT meetup」や、UIT のメンバーがフロントエンド技術について毎週語るポッドキャスト「UIT INSIDE」があります。

また、社内向けの勉強会も毎週開催していたり、フロントエンドの最新情報を毎週まとめる GitHub Issue が作られたりするため、常に最新の技術をキャッチアップできます。


UIT には独自のコーディングガイドラインがあります

UIT には、フロントエンド開発者向けのエンジニアリングガイドライン「UIT Playbook」があります。JavaScript のテクニックからコミットメッセージのガイドまでまとまっているので、日々の業務ではもちろん、LINE 以外での活動にも活用できました。特に、ESModules のエクスポートには必ず named export を使う、ということに驚きました。React のコンポーネントのエクスポートも named export します。VSCode の補完が効いたり、import 側で自由に命名することを抑止できたりするという理由で、納得しました。

Playbook は私のメンターの堀淳一郎さんがリードしていて、先ほどの UIT INSIDE でも紹介されています。興味がある方はぜひお聞きください。


UIT INSIDE に出演しました

私は、インターンに参加する前から UIT INSIDE を視聴していました。よく司会を務められている potato4d さんには憧れていましたし、毎回違うテーマでフロントエンド技術について話す様々なゲストを尊敬していました。

そんな中、私がインターンの成果を発表するエピソードが企画されました。この記事では書いてこなかった詳細な技術の話をしているので、ぜひポッドキャストエピソード「よりよい動画閲覧体験を求めて – LINE NEWS の夏インターン 2020もお聞きください。


リモートで働く

2020年のインターンは6週間のうちほとんどがリモートで行われました。事前に選んだ MacBook Pro と、4K ディスプレイ、オフィスに入るための社員証、ノベルティは宅配便で送られてきました。

インターンが始まる前は完全リモートだと聞いて少しがっかりしていましたが、実際にはチームで仕事する雰囲気もしっかり感じられたのでリモートでもおおむね問題ないと感じました。

インターン生の始業時刻は10時で、好きなタイミングで1時間の昼休憩を取ることができました。もちろんそれ以外にも自由に休憩を取れるので、自分のパフォーマンスが高くなるように生活できました。

ただ、わからないことがあったら Slack で聞けばすぐに誰かが反応して解決できましたが、リモートではなくオフィスで働いていたら隣にメンターがいてすぐに聞けていたはずだということを考えると、コミュニケーションはオフィスの方が取りやすそうです。

とはいえ、出社にかかる時間を考えるとリモートの方が時間的効率は良さそうなので、このままリモートでの業務が続くといいなと思います。


オフィスで働く

完全リモートで充分な環境を用意してくださっていましたが、二泊三日で出社できることになり、新宿のミライナタワーオフィスに出社しました。

オフィスの環境はすごく良く、デスクは電動昇降式、椅子はアーロンチェア、4K ディスプレイも用意されていて、自宅よりいい環境でした。コーヒー L サイズが100円のカフェに、使い放題のウォーターサーバーなど、毎日出社できたらどんなに良いことかと思いました。


さいごに

このインターンでは、初日からずっと新しいことを身につける毎日でした。長期インターンでしか経験できないような様々なことを学び、吸収できました。6週間はあっという間でしたが、実装した機能のリリースまでできて非常に満足しています。働いている人全員がとても優秀な LINE で働けたことは、私の貴重な経験となりました。
フロントエンドでモノを作ることに興味がある方は、ぜひ LINE のインターンシップに挑戦してみてください!

Related Post