この記事はこの記事はLCL Advent Calendar 2020 - 9日目の記事です。
フロントエンドエンジニアの亀田です。
気が付けば12月と今年もいよいよ大詰めですが、個人的には体感はとても早い1年でした。
時期的にも丁度良いので、自分が所属しているフロントエンドチームに焦点を当て、今年の振り返りと来たる2021年に取り組みたいことを整理しようと思います。
フロントエンドチームの現状
はじめにチームについて軽く紹介します。
フロントエンドチームは、年初は2人でしたが、4月に新たなメンバーが加わり、現在は3人の体制で運営しています。
細かいメンバーのプロフィールは割愛しますが、現在のフロントエンドチームは、今年1年を通して現在のチームメンバーをベースに再構築され、チームとしての業務の取り組み方、雰囲気等が確立されていきました。
現メンバーは、業務の取り組み方や価値観、興味のある技術領域が似ていてることや、年齢的にも割と近いこともあってか、良い意味で気を遣うこともなく、フラットで良い関係性が構築できていると感じています。
2020年の振り返り
それでは本題、2020年のフロントエンドチームの振り返りをしていきます。
今年は色々なことに取り組みましたが、その中でも特に特筆すべきトピックを中心にまとめます。
Reactでの開発の本格化
LCLのメインサービスである、バス比較なびのフロントエンド環境は、RailsのERB、jQueryを中心としたレガシーな構成になっています。
長く運営しているため、サービスとしての規模も、比例して技術負債もかなり大きくなり、フロントエンドの改修には多大なコストがかかってしまう課題があります。
以前に在籍していたメンバーも、何度かリファクタを試みたようですが、根本的な改善には至らず、結果的にその経緯で利用したReact、Vue.js、そして古のコードのjQueryと、複数ライブラリが混在する何ともカオスな状態です。
当然、メインサービスで常に改修を続けていく中で、この現状を放置することはできません。
今年、フロントエンドチームではこの課題にどう立ち向かうか検討を重ね、まずは今後利用するライブラリをReactに統一することを決めました。
当初は、Reactで本格的な開発経験のあるメンバーがおらず、具体的な開発のイメージや、Reactを扱う上でのポイント等があまり湧いていない状態だったため、今年はReactでの開発の感覚や肌感を養うことを目標に、情報収集・開発を1年を通して取り組んできました。
サービスへの導入は局所的な部分に留まるように工夫しながら、実際に手を動かして、チームで情報共有を重ねたことで、徐々に手に馴染み、開発の感覚を掴めてきた印象です。
また、新たに始まった新規の開発案件では、Next.jsを採用することにしました。
最近、何かと話題で人気が高まっているフレームワークなので、この新規開発で更にナレッジ・経験を貯め、バス比較なびでの本格的なリファクタリングで採用することも検討しています。
コンポーネント指向の開発フローを構築
Reactを導入したということもありコンポーネント指向で開発するフローが徐々に増え、合わせてStorybookを導入と運用ルールの策定を含めてルールを整備しました。
LCLでは以前に少しStorybookを利用したことがあったようですが、その頃中心だったメンバーが抜けたこともあり、今は運用がされていない状態でした。
この取り組みの結果として、Storybookの活用がチームで根付き、コンポーネント再利用が促進され、開発効率が向上しました。
バスツアーのリファクタリング
バスツアーはLCLの中では比較的新しいサービスで、コロナウィルスの影響もあり社会的には旅行者は少なくなっている状況ですが、サービス自体の利用者は増えてきています。
フロントエンド環境は、Nuxt.js（Vue.jsベースのフレームワーク）で構築されていますが、昨年立ち上げ時には色々な事情で、スピード重視の開発になったことで、いくつか課題がある状態でした。
今年の夏頃に、サービスに比較的大きな機能追加をすることになりましたが、開発計画の段階で改めて課題が浮き彫りになったため、思い切って案件対応の直前に、チーム総掛かりでリファクタリングを決行しました。
結果として、大幅な開発効率の改善に繋がり、リファクタリングにかけたコストは今年中に回収しておつりが出るほどの結果となりました。
今後も継続的に改善を続けていくサービスなので、早めに判断・実行に移せたことは、今年のフロントチームにとって今年の大きな成果となったと感じると共に、リファクタリングの重要性を改めて実感した取り組みになりました。
情報・ルール整備
フロントエンドチームは、現メンバーを中心にチームとして運用しはじめたのが昨年後半ということもあり、今のチームに必要な諸々の情報の整理やルールがほぼ無い状態でした。
今年の4月には新メンバーがジョインするということもあったので、新フロントエンドチームとして、情報やナレッジの整理を行いました。内容としては、業務フローや各サービスの特徴・技術スタック、コーディングルール等です。
また、ちょうど新メンバーがジョインするタイミングで全社的にフルリモートになったこともあり、このタイミングで情報整理を行えたことは不幸中の幸いでした。
結果として、新メンバーに対するインプットや、立ち上がりに一役買う効果がありました。
共有・相談タイムの実施
コロナウィルスの影響で、LCLでは今年の春頃から現在進行系で、フルリモートで業務を行っています。
前述の通り、4月に新たなメンバーがジョインしてましたが、入社日こそ顔を合わせたものの、その後はフルリモートで、入社直後のフォローがしにくい状態となりました。
対策として、フロントエンドチームでは毎日決まった時間に、オンラインMTGで共有・相談タイムを設けました。
メンバー間の困っていることや相談したいこと等を気軽に持ち込める場となり、始めは新メンバーがスムーズにチームに馴染むことを目的としていましたが、チーム全体のコミュニケーション促進に繋がり、リモートワークの中でも良い雰囲気のチーム作りができました。
ただ、フロントエンド以外のチームとのコミュニケーションは出社をしていた頃より必然的に少なくなっていて、その辺りに対しても技術開発部全体としてこの1年取り組んできましたので興味のある方は是非。
気軽なペアプロ・モブプロ
出社時には、隣に並んで一つの画面を見ながらいわゆるペアプロをすることがよくありましたが、フルリモートになり物理的に隣に並ぶことが出来ないので、オンラインでのペアプロ・モブプロを行うようになりました。
前述の共有・相談タイムに、相談したい内容を持ち込み、軽くペアプロ・モブプロをするということを繰り返すことで、実施ハードルも下がり、今ではかなり気軽にペアプロ・モブプロをしています。
開発時に困っている部分をサポートし合ったり、わいわい相談しながら解決した体験も多く得られたので今後も継続して気軽にペアプロ・モブプロを行っていこうと思っています。
チームでの勉強会
現チームメンバーは、興味領域が似ていることもあり、チーム内で勉強会を継続的に行っています。
勉強会は色々なやり方があると思いますが、今年フロントチームで試したスタイルとしては、
- ハンズオン式の動画コンテンツを観て、実際に手を動かしながら随時気軽に共有し合うスタイル
- 特定の題材に対して担当範囲を決め、各自が持ち帰り、調べたり試したりして、その後場を設けてメンバー間で共有するスタイル
どちらもチームには良く馴染みましたが、後者はスケジュール設定が緩いことで、案件の立て込み状況によって進捗が悪い時期もありましたので、継続するためにはチームの特性や題材選び等を工夫する必要はありそうです。
勉強会は自分達の興味領域に即してスキルアップに繋がり、ひいてはサービス開発の質量に効果を与えるはずなので、今後も意識的に投資していきたいです。
2021年に取り組みたいこと
今年は多くのことに取り組んで、チームにも安定感が出てきて迎える2021年に取り組みたいことをまとめます。
バス比較なびのフロントエンド環境移行を進める
前述した通り、フロントエンドにおける最大の課題です。
今年はReactを中心に開発経験を積むことが出来たので、現在進行中の新規案件でのNext.jsで更に経験を積み、バス比較なびフロント環境の具体的な対応方針を検討していこうと思います。
コロナウィルスの影響もあり、今後の旅行業界を始め社会全体として様々な動きがあると予想されるので、その中でも着実に進められる方針・計画が重要になると感じています。
来年は、LCLで長きに渡るこの古の課題の突破口を見つけることが、フロントチームにおいて大きなミッションになるでしょう。
バスツアーのフロント環境 TypeScript化
バスツアーは前述した通り、昨年にNuxt.jsで構築されたサービスで、今年もリファクタリングを実施できて、開発環境としては比較的良好な状態ではあります。
また、若いサービスではありますがポテンシャルが高く、社会情勢により今後はよりフレキシブルな対応が求められるサービスとも感じています。
サービスがまだ若い今のうちに、フロントエンド環境にはTypeScriptの導入を進め、より開発効率を向上させたいと考えています。
フロントエンドエンジニア x デザイナーの連携強化
LCLでは、デザイン業務と開発業務がキレイに分離していることから、デザイン観点と開発観点を上手く摺合せられていない現状です。
来年は上記を実現するような動きをフロントエンドチームが主体となり推進していき、今後はデザイナーとより密接に関わり、共有認識を持つことで、デザイン・開発の効率を上げ、ユーザーにより良い体験を届けられるように努力していきたいです。
テストの導入・ナレッジ蓄積
現状、各サービスのフロントエンド環境には、テストを導入していない状態となっています。
メンバーがテストに関する知見が無かったり、案件のスケジュール的に余裕が無かったりと、導入しなければという気持ちはありつつも導入できていません。
そんな中、最近始まった新規開発案件では、新たな環境で開発を始めることもあり、テストの導入にチャレンジすることにしました。
現在はテストに関する様々な情報収集や検討を行っている段階なので、本格的な運用は来年実施する予定です。
まずはこの開発を通して、テストに関する経験や、運用の検討を重ねて、後には別サービスへの導入を推進していきたいです。
Core Web Vitalsに対する対応
今年の中旬に、2021年からGoogleの検索結果アルゴリズムにCore Web Vitalsが追加されることが発表されました。
フロントエンドチームとしても、Core Web Vitalsに対して大きな関心を持つ必要を感じています。
現状は情報のキャッチアップが主な取り組みになっていますが、積極的に改善施策の提案・実行をチームとしてチャレンジしていこうと考えています。
さいごに
振り返ってみて、改めて今年は色々なことに取り組めたことを実感できましたが、同時に課題も再確認することができました。
社会的には大変な状況が続いていますが、今自分達にできることを着実に積み重ねていき、安心して旅行等ができるようになった際に、価値のある体験をユーザーに届けられるように取り組んでいこうと思います。
