1
/
5

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

はじめに

テックラボの藤井(@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レビュー依頼が多くたまってしまい自分のチケットの消化スピードが遅くなっている」という意見が出て毎朝各人どの程度レビューを行う余裕があるかを共有したときもあります。

おわりに

今回はいま現在の当社のフロントエンドエンジニアの働く環境についてご紹介させていただきました。

実際に仕事をする様子がイメージできるブログとなっていたら幸いですが,今後も組織の規模や技術的なチャレンジに合わせて,働く環境や働き方は変化させていきたいと思っています。

プロダクトとしては,これまでサーバーサイドエンジニアを中心に情報設計やデータ化に重きを置いて取り組んできた中で,今後はフロントエンドでの進化を遂げたいというのが各プロダクトの一つの方向感です!そのためにも一緒に事業を成長させてくれるフロントエンドエンジニアを募集しています!!

We are hiring !

フォースタートアップスはエンジニア・デザイナーを積極採用中です😃

もしこの記事を読んでフォースタートアップスに少しでもご興味をお持ち頂けましたら、下記の「話を聞きに行きたい」ボタンより気軽にエントリーしてください。

事業やチームについての説明から技術スタックの解説まで、CTOやチームメンバーからさせていただきます。


for Startups,Inc's job postings
33 Likes
33 Likes

Weekly ranking

Show other rankings