フロントエンドのEMが技術選定するときに取り組んだこと

フロントエンドのEMが技術選定 するときに取り組んだこと 伊代⽥ ⼤樹 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」 1

⾃⼰紹介 氏名 伊代田 大樹（いよだ ひろき） ウェルスナビ株式会社 Webフロント開発T / Engineering Engagement T Engineering Manager ウェルスナビでの役割 ● Webフロントエンド開発チームのEM ● 開発組織強化を担当するチームの責任者 2 @2023 WealthNavi Inc.

アジェンダ 1. WNのフロントエンド開発チーム 2. チームでのEMの役割 3. EMとしての技術選定への取り組み 4. さいごに 3 @2023 WealthNavi Inc.

1. WNのフロントエンド開発チーム どんなチームがどのように仕事しているか（技術選定の前提） 4 @2023 WealthNavi Inc.

Webフロントエンド開発チーム ミッション：Webフロントエンドの開発を通してWNの顧客のプロダクト体験を最⼤化する 対象プロダクト：ロボアド（WealthNavi）のWebアプリ、サービス紹介サイト（、⼀部新規事業） メンバー構成： ● EM（チーム責任者：伊代⽥） ● フロントエンドエンジニア ３名（うち業務委託の⽅１名） 業務内容：以下の業務範囲をメンバー全員が状況に合わせて対応 Web制作業務 Webアプリ開発業務 ユーザーに効率よく質の⾼い情報を伝えるためのシステム開発 ユーザーの課題を解決するためのシステム開発 ● ● ● コーポレートサイトやLPなどのコーディング等 マーケターやWebディレクター、デザイナーと開発 サーバーサイドの保守運⽤も⾏う 主な使⽤技術 ● HTML/CSS/JS(Vue) ● WordPress,Laravel ● ● ● ロボアドに関するフロントエンド開発 PMやバックエンド開発チームなどと開発 ⼀部フロントはNext.jsによるSSRを採⽤しているためNext サーバの運⽤も⾏う 主な使⽤技術 ● HTML/CSS ● Next.js/TypeScript ● (Java/Springboot/Thymeleaf) @2023 WealthNavi Inc.

2. EMの役割 WNのフロントエンド開発チームのEMの役割 6 @2023 WealthNavi Inc.

エンジニアリングマネージャーの４領域 テクノロジーマネジメント ピープルマネジメント ● ● ● ● ● チームビルディング 組織戦略 メンバーフォロー 採⽤、評価、⽬標 etc.. ● ● ● ● ● プロジェクトマネジメント ● ● ● ● ● PMBOK アジャイル/リーン リリースマネジメント プロセスマネジメント etc… ソフトウェア品質 技術選定、技術リード 運⽤戦略‧設計 アーキテクチャ etc… プロダクトマネジメント 7 ● ● ● ● ● プロダクト（システム）のビジョン 「Core, Why, What, How」 企画⽴案 ロードマップ etc… @2023 WealthNavi Inc.

チームでのEMの役割 ● EMとして⽬指していること ○ チームのパフォーマンスの最⼤化を通してのプロダクトビジョンの実現 ○ 短期ではなく⻑期継続的に価値の提供を最⼤化していきたい ● チームの良いところ ○ ベテランメンバーが多く業務知識が豊富 ○ メンバーが柔軟に動きかつコミュニケーションも積極的 ○ コンフォートゾーンから抜けるチャレンジもできる環境がある（新規事業含む） ● チームの課題 ○ やりたいことや担当業務領域に対して⼈数が少ない ○ 業務フローが完成されつつあるがもっと効率アップできそう 8 @2023 WealthNavi Inc.

3. EMとしての技術選定 どのように考え、どう取り組むか 9 @2023 WealthNavi Inc.

EMとしての技術選定の考え⽅ - 技術選定としての基本 ● プロダクト戦略から考える ○ プロダクトやシステムに必要な技術は必ずおさえる ■ 要求‧要件を満たすものは前提 ■ 逆に⾔えば、満たす以外の部分については別の観点を⼊れる余地がある ● ● それは何かをチームで考える なるべく技術課題と組織課題は分けて考える ○ システムに必要な技術と組織的な状況を⽐較しない ○ ex)特定の技術を採⽤することに対するデメリットがメンバーの学習コスト ■ 必要な技術であれば導⼊の仕⽅を考える 10 @2023 WealthNavi Inc.

EMとしての技術選定の考え⽅ - チームを強化する視点で技術選定する ● フロントエンドエンジニアとしてのキャリア観点 ○ 特定の技術やバージョンにロックインしすぎない⽅針 ■ 特にフロントエンドは流⾏り廃りなどの動きがまだある状況 ■ 汎⽤性を求めるより⾊々な技術に触れやすい環境が⼤事と考えている ● ● ● ex) 担当システムの技術をReactで統⼀しない、など 採⽤のしやすさの観点 ○ 事業成⻑に合わせたチームの⾏く末を視野にいれる ○ チャレンジはしつつも選定、設計が奇抜しすぎていないかは重要 メンバーの成⻑へのリスクマネジメント観点 ○ 何をリスクとして考えるか。またその期間。 ○ できる限りメンバーに判断できる環境を整備する。 ■ 判断に必要な状況や、観点の共有。しっかりしたレビュー体制など。 ■ えいやで判断させることを丸投げという。委譲できる仕組みが⼤事。 11 @2023 WealthNavi Inc.

4. さいごに まとめと理想 12 @2023 WealthNavi Inc.

さいごに ● まとめ ○ EMとしての技術選定の観点 ■ 如何にプロダクト要求を満たしつつチームが成⻑できる選択をするか ■ ● 結果 ○ ● キャリア、採⽤、チーム成⻑も選定観点に⼊れる チームで技術選定する際の選択肢や考え⽅の幅が広がった 今後 ○ やりたいことが出てきたときに技術調査から始めたくない ■ ⽇々どうすれば理想に近づけるか試⾏錯誤しています 13 @2023 WealthNavi Inc.

積極的に採⽤中です ウェルスナビでは複数の開発系ポジションで採⽤を強化しています。 主な採⽤中職種 ● ● ● ● ● フロントエンドエンジニア バックエンドエンジニア エンジニアリングマネージャー（各チーム） SRE QAエンジニア 採⽤情報詳細 ● 下記URL（QRコード）よりご確認ください。 https://hrmos.co/pages/wealthnavi 採⽤に関する お問い合わせ先 ● ● 「カジュアルに話を聞いてみたい」という温度感でも構いません。 ウェルスナビ採⽤チーム（recruiting@wealthnavi.com）までご連 絡お待ちしております。 14 @2023 WealthNavi Inc.

• https://hrmos.co/pages/wealthnavi

ご清聴ありがとうございました 15 @2023 WealthNavi Inc.

【重要な注意事項】 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを⽬的としており、いか なる種類の商品も勧誘するものではありません。最終的な決定は、お客様⾃⾝で判断するものと し、当社はこれに⼀切関与せず、また、⼀切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、ま た、本資料の内容の正確性、信頼性、完全性、適時性等を⼀切保証するものではありません。本資 料に基づいて被ったいかなる損害についても、当社は⼀切の責任を負いません。また、当社は、新 しい情報や将来の出来事その他の情報について、更新⼜は訂正する義務を負いません。 ● 本資料を利⽤することによりお客様に⽣じた直接的損害、間接的損害、派⽣的損害その他いかなる 損害についても、当社は⼀切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会 一般社団法人日本投資顧問業協会 16 @2023 WealthNavi Inc.