フロントエンドエンジニア組織を作るためにやること

4 min read読了の目安(約4000字

iCAREでフロントエンジニアとして開発させていただいている@watsuyo_2です。

今回はiCAREでフロントエンドエンジニアは一体どんなことをしているのかを文章にしました。
iCAREの主なフロントエンド技術は

  • Vue.js
  • TypeScript
  • GraphQL
    のため、上記の技術を前提とした内容になりますが、この記事を読まれている方の技術スタックに置き換えて読んでいただけると幸いです。

目線合わせのための勉強会

普段の開発から使う技術は、開発に関わるメンバーで目線を合わせたいものです。
個々人によって、経験やスキルもバラバラな現実は避けられませんがフロントエンド組織として

  • 新しい機能やコンポーネントやComposition APIやTypeScriptは必須か?
  • Composition APIの書き方は、命名規則はどうするか?
    etc...

といった議論は週1回の勉強会とフロントエンドエンジニア + デザイナーさん + VPoEが参加するフロントエンド定例にて行われます。

メンバーの目線合わせをする最大のメリットは、

  • 迷ったときの判断軸

になることだと考えています。

iCAREには、フロントエンド技術周りのアドバイザーの@ozu_syoさんと技術顧問の@kahirokunnさんが在籍しています。
上記の定例や勉強会でも、アドバイザーと技術顧問のお二方のご意見を頂きつつ、社員と業務委託のメンバーを含めて議論を行います。

アドバイザーと技術顧問がいることでその都度、分からないことは聞くことができるし、開発の進め方や技術的な壁を乗り越える方法は教えて頂けます。

また自分を含め、勉強会や定例で積極的に議題を持ち込み、考えを発言することで各々の理解と知識が定着し、スキルアップに繋がると考えています。

勉強会では参加するメンバー全員が発言できるように、輪読会ベースで行うこともあります。
各々が担当パートを読み、読んだ内容について感想や補足を発言する。
また、別のメンバーがその内容について知っていることがあれば、プラスで補足をするといったようなやり方で全員が発言し、勉強会を通じて何かを持ち帰る機会を創出しています。

スキルレベルの高い業務委託のエンジニアの方から、業務未経験で最近入社されたフロントエンドエンジニア、インフラ、サーバーサイドエンジニアも参加しています。
そのため、難しい内容に対しても難しい言葉ではなく、目線を合わせるための言葉を選んだり、的確に相手に考えを伝える訓練にもなっています。

個人的にはファシリテーターの練習にもなっているかなと思います。

以上がiCAREのフロントエンドエンジニアが行ってる、目線合わせのための勉強会です。

複数人で一緒に考えるペアプロ

会社やチームによって、ペアプロの捉え方に違いはあるかと思いますが、iCAREのフロントエンドエンジニアにおけるペアプロでは複数人で一緒に考えることを大事にしています。
ペアプロでは、相談したい側が実装や設計における問題や分からない部分を解決したい欲が強くなると、その場しのぎの解決となって、相談した側にとって身につくことは少なくなります。
本記事のタイトルにもある、フロントエンドエンジニア組織を作るためにやることに立ち返ったときに、組織としての底上げが重要だと考えています。

ペアプロのやり方は、

  • DiscordもしくはGoogle Meetで通話と必要があれば画面共有
  • コードはVS CodeのLiveShareにてリアルタイムで双方向編集

です。

ただ、大事なのは複数人で一緒に考えることなので、相談してきた側の考えをまずが聞いて、手を動かしてもらう。
その後に、発見や知識を言葉やコードで伝えることによって、双方にペアプロの効果が発揮できると考えています。

例えば、Vue.jsのOptions APIで書かれているコードをComposition APIに書き換えるタスクでのペアプロであれば、まずはどういった手順ならば影響範囲が少なく、確実に本番環境で動いている動作を再現できるかを一緒に考えます。
1度でも経験があれば、自分なりの正解が見えてきそうですが、この段階では相談側の考えを聞くだけにします。
相手の考えにちょっと肉付けした回答をして、少しずつやりたいことの実現に向かっていきます。
ここは、上述の勉強会もそうですが解を急がず、目線を合わせることで相手も考えをアウトプットしやすいし、認識のズレを小さくしながらペアプロを行えます。

以上のことに気をつけながら、iCAREのフロントエンドエンジニアは一緒に考えるペアプロを行っています。

ここからは、技術的な問題に対する話題ではなく、組織のブランディングや採用に関する話になります。

フロントエンド採用面談への参加

これは個人的にやっていることですが、フロントエンド採用面談に参加しています。
参加することになった経緯は、フロントエンドエンジニアの採用をVPoEが、応募のあったエンジニアを調査から面談に進むかどうかのチェックをほとんど1人で担当していたこともあり、負荷分散のためにも参加することにしました。
採用面談に参加することで、自分自身の経験を振り返り、新たな学びがあります。

例えば、自身や自社の技術スタックと違う経験をしたエンジニアとコミュニケーションを取ることになるので、自然と社内で使う言葉や当たり前に思っている考えを、良い意味で一度リセットできます。
面談が終わったあとに、話した内容を振り返ったときに、説明がうまくできなかった技術や用語を見つけることもできます。

タイトルにもあるフロントエンドエンジニア組織を作るためにやることの文脈からでも、現在のフロントエンド組織に足りないものを発見でき、どんなアクションを起こすことで環境が良くなっていくか?を考えるきっかけになりました。

最後は、毎月開催しているDev Meetについてです。

YouTube Liveでのミートアップ(OBSなども使って)、アーカイブ化

iCARE Dev Meetup

  • フロントエンド
  • サーバーサイド
  • デザイン
  • インフラ

といった内容を中心に毎月開催しています。

YouTube Liveを使ったオンライン配信を行っていて、LTの動画を登壇者の許可を得て、アーカイブを残すようにしました。
アーカイブを公開する理由は、Meetupの開催当日以外でも動画を通じて、エンジニアの方と接点を作るためです。
あわよくば、エンジニアがYouTubeを見ているときに、「Ruby」や「Vue」といったワードでオススメ動画に表示されて、iCARE Dev Meetupのことを認知してほしいと言った目論見もあります。
日本語でモダンな技術を解説する動画はまだまだ少ないので、企業として投資していくには面白い分野だと考えています。
アーカイブの編集も難しい技術は必要無く、ブラウザ上で扱えるYouTube Studioを使って、LTの部分だけを切り抜いてアップロードしています。

これはフロントエンドエンジニアだから取り組んでいるのではなく、Meetup運営者としてですが、MeetupのようなイベントもiCAREとして、エンジニア組織としての採用に向けたブランディングと考えています。
私が入社する前から、iCARE Dev Meetupは100人以上が参加するイベントになっていましたが、アーカイブ公開にチャレンジするタイミングでオープンソースソフトウェアの配信ツールOBSを取り入れました。

Meetupの配信クオリティを上げることで、Meetupに参加する方のiCAREに対するイメージアップ、フィードバックを受けて新しいことに挑戦する雰囲気が伝わればいいなと思っています。。

既にMeetupをきっかけに採用へ繋がった事例がiCAREでもあるので、

  • YouTubeをたまたま見る→iCARE Dev Meetupの存在を知る→iCAREに興味を持ってもらえる

といった循環が働くように日々、チャレンジしています。

おわりに

フロントエンドエンジニア組織を作るために、チームとして取り組んでいることと個人やMeetup運営として取り組んでいることを紹介しました。
現状のメンバーと共に、個々のスキルを高める側面と、採用と採用へつなげるMeetup運営に側面の両軸で活動しています。
今回こういった形でアウトプットすることによって、他社がどんな取り組みをしているのかもっと知りたいと思いました!
ぜひ気軽に@watsuyo_2までメッセージをいただければと思います!

最後に、iCAREではエンジニア採用をしているのでご興味がある方は、こちらをご覧ください!

https://www.wantedly.com/projects/549145