こんにちは、技術職 就業型コースのインターンシップに参加させていただいた村上浩輔です。
8/22 ~ 9/30の6週間の間、Front-end Dev5チームに所属し、LINE Starbucks Order & Payの機能開発に取り組みました。
このブログでは私が担当した業務の内容や、インターン期間中に体験したことからLINEのフロントエンドチーム（UIT）の雰囲気について紹介します。
携わった業務
私は今回LINE Starbucks Order & Payにて、店舗のお気に入り登録機能のフロントエンド開発を行いました。
LINE Starbucks Order & PayはLINEアプリ上で、スターバックスのメニューを注文・支払いすることができ、レジに並ばずに商品を受け取ることを可能にするサービスです。
背景
機能開発をする前は、「現在地から近い順の店舗一覧」「地図上の店舗の位置」でしか店舗を探すことができず、東京のように店舗が密集している地域では店舗を探しづらいという課題がありました。
移動中や、少し離れたオフィスからでもオーダーをできる利点をより発揮する為に、特定の店舗をお気に入り登録し一覧表示することで、すぐに見つけられるようにする機能の開発を行いました。
開発の流れ
ミーティングの参加
フロントエンドやバックエンドの方だけではなく、企画、デザイン、QAなどの様々な方が出席されているミーティングに参加しました。私が開発している機能以外にも複数の機能開発や改善が並列で進行しており、それぞれのタスクで各分野の専門家が連携していて効率の高さを感じました。
フロントエンドのメンバーのみのミーティングも定期的に行われ、チーム内の他のプロジェクトの内容や進行なども把握することができました。
実装
Vue.jsでお気に入り登録機能の実装を行いました。
Vue.jsを使うのが初めてで、公式のチュートリアルを触るところから始めましたが、アプリの画面を見て既存のコードがどのように動いているか考えたり、一部を書き換えて動作を確認したりすることで比較的早く書き方に慣れる事ができたと思います。
レビュー・改善
Pull Requestを立て、チームの方々にコードレビューをしていただきました。レビューしていただける環境があることで、丁寧にコードを書くように意識することができたと思います。
コードレビューでは、書き方から設計まで様々なことを指摘していただけましたが、その中でも特に「ユーザーに素早いインタラクションを与える手法」が印象に残っています。具体的には、お気に入り登録のハートのアイコンをクリックした際に、即座にハートのアイコンの色を切り替え、その後裏でAPI通信を行うように処理を変更しました。このような改善を積み重ねて、一人で開発するのとは比にならないほど質の高いコードになっています。
QA・リリース
RC環境にアプリをアップロードし、デザイン・動作の面で不備がないか確認していただき、その修正を行いました。
デザインでは2pixelの位置のズレ、動作面では低速通信でないと再現できないバグなどまで見ていただいて、リリースされるアプリの品質に安心感を覚えました。
これらの指摘を修正する際には「問題の原因」、「思いつく限りの解決策」、「最終的に選んだ解決策とその理由」をできるだけ文章として残すことで、今後の開発で参照しやすいように工夫しました。
このような過程を経て、お気に入り登録機能をリリースする事ができたので、ぜひLINE Starbucks Order & Pay で使ってみてください！
実装時に特に感じたこと
実装している時や、レビューしていただいた時に個人で小規模なアプリを開発した時にはあまり気にしていなかった重要な事柄に気づくことができました。
その中でも特に、以下の3つはコードやアプリの質、開発のしやすさに大きく寄与している考えます。
ドキュメントの豊富さ
LINEのフロントエンドチームでは命名規則や、周辺ツール、Githubの運用、フレームワークごとのスタイルガイドなどを定める「UIT Playbook」というエンジニアガイドラインが作られています。他にも、クラスの命名規則やCSSの規則を定めるガイドライン、各プロジェクトの仕様などの様々なドキュメントにアクセスすることができます。
また、Slackに各ツール・サービスのhelpチャンネルが運営されていることで、多くの文書・知識が蓄積されています。そのため、業務で少し詰まったことがあってもSlack、Wiki、Githubで検索を掛けるだけでなんとか出来ることが多く、業務の効率を高めることができました。
命名規則
前述の「UIT Playbook」やCSSのガイドラインにて変数、クラス名、ファイル構造などの規則が定められています。
以前は特に規則もなく命名を行っていたので、名前に統合性が取れなくなることや、一意なクラス名をどのようにつけるか考えることもありましたが、明確な規則があることで簡単に命名を行う事ができました。
チームで開発を行うという点から考えても、この規則に則ることで意図が読み取りやすく、開発が行いやすくなったと思います。
フロントエンドのテスト
私が関わったプロジェクトではフロントエンドでもテストコードが多く書かれていて、ロジックの分離などのテストが行いやすい設計がなされていました。
インターンに参加する前はフロントのテストコードは殆ど書いたことがなく、具体的に何をテストすればいいかわからないといった状況でしたが、プロジェクトの既存のテストを読んだり、Zoomでテストの書き方・意図を教えていただいたりして、学ぶことができました。
UITの雰囲気
ランチ会
私が配属されたFront-end Dev5チームでは定期的に昼ごはんを食べながら雑談をするランチ会が行われており、好きなゲームの話などの業務と関係ない話もすることができて非常に楽しかったです。他のチームで開催されたランチ会にも何度か参加させていただきましたが、どのチームでも和気藹々としており、リモート勤務でも交流を深めることが出来る環境だと感じました。
勉強会・Global Workshop
UITでは定期的に多くの勉強会が開催されています。私が参加したものだけでも、各週JavaScript関連のトピックについて話し合う勉強会や、業務とは関係ないトピックについて発表するLT会などがありました。
LINE外にも発信している、UIT INSIDE、UIT Meetupのようなイベントも開催されています。前述した、フロントエンドのエンジニアガイドラインである「UIT Playbook」について語られている回や、個人的にかなり勉強になったUIフレームワークを比較する回などもあるので、ぜひ視聴してみてください。
また、インターン期間中にUIT Global Workshopというイベントが開催され、参加することができました。今回のGlobal Workshopはオンラインでの開催となり、日本、韓国、台湾、ベトナムのフロントエンドエンジニアの方々によって計16のセッションが行われました。フロントエンド関連のセクションがこんなに多く聞けたのは初めてだったので楽しかったです。特に、Vue3への移行のセクションは業務でVueを扱うと知った直後の視聴だったこともあり、非常に興味深かったです。
これらのように、UITでは様々な規模の技術交流を行うイベントがあり、情報のキャッチアップ、技術力の向上や、エンジニア同士での交流の機会が多い環境だと思います。
オフィス
基本リモートで勤務していましたが、一度だけオフィスに出社しました。
オフィスは何十個もある机のうち、空いている場所を自由に使っていいという形式です。それぞれの机が昇降デスクで、ディスプレイ2枚完備というとてつもない設備で驚きました。社内にはカフェや、リモート会議用の部屋などもあったので、就業環境は非常に整っていると思います。
感想
インターンが始まったばかりの頃に、アプリを理解するには使うのが一番だと思い、実際にLINE Starbucks Order & Payを使って近くのスターバックスでドライブスルーを利用する事がありました。その最中、自分がアプリを使う際にもドライブスルーできる店舗をお気に入り登録すれば非常に便利だと思ったことが開発のモチベーションになりました。
多くの人に届くサービスを開発する業務、凄いエンジニアの方々の中で成長できる職場に興味がある人はぜひ参加してみてください！