ヤプリのフロントエンドチーム@2022年を紹介します

こんにちは、フロントエンドの山田です。

補足すると別記事にも登場する「サーバサイドの山田」と同一人物です。
現在はサーバサイドとフロントエンドを兼務してます。
tech.yappli.io

さて、今回はフロントエンドの山田として、私達フロントエンドチームについて紹介させていただきます！

フロントエンドチームについて

早速、フロントエンドチームのメンバーを紹介します。

Aihara …
2015年入社（全エンジニアの中でも最古参）。フロントエンド業務では主にCMSの新機能実装や設計を担当。最近はフルスタック領域にも興味あり。趣味は演奏、料理、ゲーム、ラジオ、飲酒。

Ykob ...
前職では広告制作会社でReact/Vue、WebGLなどを使用して、キャンペーンサイトの実装を担当。2019年にヤプリに入社して、フロントエンド領域のメンテナンスを主に担当し技術負債や課題解決などを牽引している。最近はa11yやDesignOpsに興味あり。趣味はランニングと推し活。

Kon ...
2021年末に加入、フロントエンド歴は3年でCMSのTypeScript移行を担当。組織のコミュニケーションに興味があり、リモートワークでも円滑に業務ができる体制づくりを試行錯誤するなど。趣味は多すぎて書ききれない。

Yamada ...
2018年入社、現在サーバサイドとフロントエンドのマネージャーを兼務。主にフロントエンドチームのマネジメント業務を担当。趣味は筋トレ、キーボードよりダンベルが好き。

2022年2月現在、フロントエンドチームは私を含めて4人でまだまだ少人数のチームです。
一応誤解の無いよう宣伝ですが、フロントエンドエンジニアは絶賛募集中です！

続いてフロントエンドチームの取り組みについての紹介ですが、2021年末から役割と責務の見直しを行っているので、その背景を含めて説明させていただきます。

フロントエンドチームの取り組み（これまでの）

時は2018年に遡り、ヤプリのフロントエンドは過去 PHP と jQuery で構築されていてメンテコストの高い技術負債となっていました。これらを是正すべくCMS刷新プロジェクトが立ち上がり、バックエンドが PHP から Go へ、フロントエンドは jQuery から Nuxt へ刷新されました。

このCMS刷新プロジェクト発足時点ではフロントエンドチームは存在せず、全メンバーがフルスタックでバックエンドとフロントエンドの両方を担当していました。 ...が、サーバサイドメンバーは軒並みスタイルが不得意で、デザイン通りのマークアップを行う事が非常に苦手という課題感がありました。...苦手というより無理でした。

開発途中でフロントエンドに特化したメンバーがヤプリに加わり、CMS刷新プロジェクトに参加します。フロントエンド領域全般の実装業務の他、サーバサイドメンバーのマークアップ不得手を補うために、主にコンポーネントの実装をしたり、マークアップ不要で画面実装が可能となるようグリッドシステムを導入したり、フロントエンド全般のテコ入れを行ったりしました。

その後、メンバーが増えてフロントエンドチームが発足した現在もフロントエンドメンバーはこのようなCMSフロントエンド領域の実装全般を主業務としてました。

フロントエンドチームの課題

直近の新機能開発におけるCMSの実装業務においても、当時と同じ責務分担で業務を行っていましたがその頃から状況は大分変わってきました。実装ルールもある程度定着し、既存コンポーネントの組み合わせで新規の画面実装も可能となりフロントエンドエンジニア不在でも殆どのフロントエンド実装が可能となりました。

これによりフロントエンドとサーバサイドメンバー間のフロントエンド実装業務の差別化も減り、フロントエンドエンジニアが強みを発揮する機会は少なくなりました。

また、CMS刷新プロジェクト開始から既に数年が経っていて、刷新した Nuxt の基盤自体にも新たな課題や技術負債が出てきました。フロントエンドメンバーの数は少なく、通常業務でプロジェクトのフロントエンド実装全般を担当しているので、技術負債や課題解決などにリソースを充てる事が出来ない状況です。

重ねて、ある程度フロントエンドの実装作業もテンプレ化してきた事により「フロントエンドの技術力を伸ばしたい！」と考える人には魅力的な業務とは言い難い状況になりました。

これらにより、フロントエンドで抱える課題が積み上がってきてました。

プロジェクトでCMSのフロントエンド実装全般が主業務となっていて、UI改善や技術負債解消に手が回ってない。
フロントエンドエンジニアが意欲的にチャレンジ出来る業務や環境を提示出来ておらず、採用が難しい。
また、暗黙的に定着してきた実装ルールが言語化されておらず新入社員の導入コストが高い。

2021年末より、これらの課題に対して向き合い改善に向けて動き出す事にしました。

他社におけるフロントエンドチーム is

フロントエンドチームを持つ組織はヤプリに限った話ではありません。これらの課題解決を実現出来るフロントエンドチーム像を描くにあたり、他社フロントエンドチームの取組などを調べてみる事にしました。

この時参考にさせて頂いた記事をいくつか紹介させていただきます。（とても感謝です）

フロントエンドの役割について

食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･
クラウドワークスのフロントエンド活動を振り返る 2020 - クラウドワークスエンジニアブログ
→ 「フロントエンドエンジニア」というロールは存在するが、「プロダクトおよび開発人数が大規模」or「フロントエンドエンジニアが少数」の場合は、サポーターとしての振る舞いをしている。
Dev03_フロントエンドエンジニア - 株式会社iCARE
採用情報 | 株式会社プレイド
→ デザインシステムやDXなどの仕組みづくりにフォーカスするケースもありそう。

また、採用について

A-1.BASE_フロントエンドエンジニア - BASE株式会社
ウェブアプリケーションエンジニア（フロントエンド） / 株式会社SmartHR
→ フロントエンドエンジニアを募集する場合は、リニューアル、リプレイスなどの単語が紐づくケースが多い。

ヤプリのフロントエンドチーム is

他社事例において大規模サービスを持ちながらもフロントエンドエンジニアが少ない組織はヤプリに限らず、その場合はサポーターやプロフェッショナルな領域の業務に専念する事が多いようです。私達フロントエンドチームにおいてもサーバサイドメンバーが単独でCMSのフロントエンド実装が可能となっているので、 プロジェクトに限定せずに、フロントエンド開発全体のサポートや、プロフェッショナル領域に集中して取り組む事が出来ると考えました。

今後のヤプリのフロントエンドチームは「CMSのフロントエンド領域全般の業務に取り組むチーム」ではなく 「フロントエンドのプロフェッショナル領域の課題解決に取り組むチーム」 に転換して、課題の解決に注力する事に決めました。

この転換により以下の取り組みを実現したいです。

プロジェクトのフロントエンド実装を主業務とせず、実装ルールの言語化や、UI改善、技術負債の解消に注力する。
よりプロフェッショナルな領域にフォーカスする事により、フロントエンドエンジニアが意欲的にチャレンジ出来る業務や環境を用意し採用に結びつける。

ーとはいえ、では明日から早速フロントエンドメンバーは今のプロジェクトから離脱して課題対応にあたります！という訳には行かず...。サーバサイドメンバーがフロントエンドの実装を担当する場面も多くなるので、まずは品質を維持出来るよう土台の整備が必要です。2022年1Qは以下のような内容に取り組んでいます。