【フォースタテックブログ】フォースタでのフロントエンドエンジニアの働き方

はじめに

テックラボの藤井（@yutafujii）です。

社内向けのプロダクト「タレントエージェンシー支援システム（SFA/CRM）」のエンジニアとして日々活動しています。

今回はいま現在の当社のフロントエンドエンジニアの働く環境についてご紹介できればと思います。

主な技術スタック

当社のフロントエンドエンジニアが関わる技術スタックはざっと以下の通りです。

主な言語：Vue.js (2.6) /Nuxt.js (2.13)
その他の言語：TypeScript (3.8)，Rails (5.2)
Nodeパッケージ管理：yarn
CSS フレームワーク：scss
BFF：ExpressJS
テスト：Jest
デザイン：AdobeXD, Figma
環境：Docker
インフラ：Terraform，基本的にAWS
CI/CD：AWS CodeBuild
ソースコードバージョン管理：GitHub
タスク管理：Zenhub
ドキュメント管理：Notion
コミュニケーション：Slack

フロントエンドのフレームワークは最も業務の中で触れることの多い言語になると思いますが、当社ではVueを選択しています。技術選定の背景などは後述しますが、比較的最近ソースコードに取り入れたこともあり、VueはTypeScriptで記述しておりStorybookやComposition APIを利用するなどトレンドの変化を追えるように常に技術に関心を持って取り組んでいます。またフロントエンドエンジニアの方もたまにサーバサイドのRailsを書くこともあります。

Vueを選定した背景

React/Vue/Angularの3大フレームワーク・ライブラリのなかでVueを選定している理由は主に2点で、

1．当社では他にもVueを用いたシステムが既に存在しており，今回も統一しておくことでVueを書く人を柔軟に配置できる

2．サーバーサイドエンジニアが多く，学習コストを抑えたい

というものです。

本格的にVue/Nuxtを用い始めた当時のチームとプロダクトの状況も

フロントエンドエンジニアが1名（着任したばかり）
サーバーサイドエンジニアが5名
デザイナーが初めてチームにアサインされてからまだ3ヶ月目

というもので、学習コストに関する利点は特に選定理由になっていたようです。

働き方

実装の概要

当社のエンジニア組織はまだ大きくなく、フロントエンドエンジニアもRailsのAPIを書いたりデータベース設計のマイグレーションを作成するなど、幅広い作業に触れていただいています。もちろん、実際の業務におけるバランスは、チームの状況やメンバーの意向を元に個別柔軟に考える方針となっております。

なお、この点についてはサーバーサイドエンジニアも同様で、TypeScriptでモブプログラミングを行ったりフロントエンドのチケットを受け持っていたり、デザインシステムを利用してモックを作るなどの作業も行っています。

全員が幅広くコードベースを触っているということを表す取り組みとして、GitHubでのPR（Pull Request）レビューはフロントエンドの実装かサーバーサイドの実装かに関わらずまずはランダムにアサインされるようにしています。全員のナレッジをいかに早くシェアし、書き方や思考を揃えることでチーム全体として柔軟に開発できるようになることを狙いとしています。

他にも、プランニングポーカー（工数の見積もり）は全員が全チケットに対して行うので、フロントエンドエンジニアはRailsの実装チケットに関する方針や工数感の議論にも参加しています。

実装案の選定過程

UX/UIデザイナーからは、XDやFigmaなどのデザインツールで作成されたモックをassetsがダウンロード可能な状態でシェアされて実装することが多いものの、アニメーションについては工数感をフロントエンドエンジニアが、理想形をデザイナーがそれぞれ中心となって話していただき、その情報を元に全メンバーで議論して実装案を決めていきます。

実装における技術選定は、CTOとSREチームを巻き込んで行っています。プロダクトの要件やサービス全体の技術面での課題などから新しい技術の採否を検討するにあたり、業務時間の中で技術選定のための時間を一定取って担当メンバーが調査を行い、選定技術の提案を行います。プロダクトチーム・CTO・SREチームで議論を行い決定していきます。

開発フローの改善

ここまでご紹介したのは今現在の当社のフロントエンドエンジニアの働き方の実態ですが、開発フローそのものを改善する振り返りをスプリント最終日に行い、様々な問題やトライをみんなで話し合っています。過去には「今回のスプリントではサーバーサイドのPRレビュー依頼が多くたまってしまい自分のチケットの消化スピードが遅くなっている」という意見が出て毎朝各人どの程度レビューを行う余裕があるかを共有したときもあります。