フロントエンドエンジニア育成PJに 参加してみた レバレジーズ株式会社 レバテック開発部 セールスコラボレートチーム 松村一志 2023/07/10

自己紹介 松村 一志 ● 経歴 ○ 2020年 レバレジーズ新卒入社 ● 出身 ○ 徳島県徳島市 ● 趣味 ○ バイオリン ○ 謎解き ○ ボードゲーム

目次 ● 始めに ● FEエンジニア育成PJについて ○ 背景・目的 ○ 概要 ○ 行ったこと ○ アウトプット ● まとめ ● 感想

FE育成PJについて 目的・背景 狙い 　フロントエンド育成 PJが発足した目的ですが FEをリードできるエンジニアを排出する 状況 　社内正社員のFEエンジニアが不足・また業務委託に依存している部分も大きい 　今後発生する大規模 PJや既存システムのリプレイス・リニューアルの際にも 　フロントエンジニアが必要不可欠

一度フロントエンドを基礎からみっちり学んで組織に還元したい！ ほとんどバックエンドしか実装したことない ... 何ならこの一年マネジメント業務が殆どでまともに開発できてない ...

FE育成PJについて 概要 やること 　FE習得に必要な学習課題 　成果物作成（React, Nextを用いたアプリケーション） 期間 　2ヶ月（インプット期間1ヶ月・成果物実装期間 2ヶ月）

FE育成PJ 身につけたスキル TypeScript 関数型を理解して、型を使いこなせる程度 フロントエンド UIフレームワークを利用したComponentの実装 Web API（非同期通信・認証・CORS） Cookie、Sessionを利用した認証とその仕組の理解 React, Next.js Componentを組み合わせて１つのpageを作成 Formとかログイン状態を含めたステート管理 非同期やCORSを意識したAPI呼び出し DevOps CI・CD 単体テスト

FE育成PJ 育成PJで行ったこと 継続的な学習 　プロを目指す人のための TypeScript入門 　type-challenges 　React チュートリアル 　Next チュートリアル 　TypeScript/Next.JSでつくる実践Webアプリケーション開発 成果物 　生産性可視化アプリケーションの開発 　既存営業支援ツール（求職者向けの求人確認・応募マイページ）のフロントエンドリプレイス

FE育成PJ 育成PJで行ったこと（読書課題） 継続的な学習 　プロを目指す人のための TypeScript入門 　React チュートリアル 　Next チュートリアル 　TypeScript/Next.JSでつくる実践Webアプリケーション開発

継続的な学習 　type-challenge type-challengeとは? 　TypeScriptの型についての問題集のようなもの 　型に関する問題とそのテストケースが提示され 　それを満たす実装を書いてコンパイルエラーをなくしていく TSの型表現の向上が図れる 　依存ライブラリの型の読解時 　汎用的な処理に汎用的な型表現を搭載する時 　依存ライブラリの型をラップしてより厳密な型を作りたい時 FE育成PJ 育成PJで行ったこと（学習課題）

成果物 　生産性可視化アプリケーションの開発 　社内開発チームが生産性を可視化できる様なアプリケーションを開発 技術構成 　アプリケーション 　　フロントはもちろん、バックエンドの処理も APIルートを用いて開発 　インフラ構成 　　ECS + Fargate 　　RDS 　　定期的なデータ取得のため Lambda アウトプットについて 生産性可視化アプリケーション

概要 　生産性を図る指標として DevOps Research and Assessment（DORA）が提唱した 　FourKeysをダッシュボードで提示 FourKeysとは？ ● デプロイの頻度 : 組織による正常な本番環境へのリリースの頻度 ● 変更のリードタイム : commit から本番環境稼働までの所要時間 ● 変更障害率 : デプロイが原因で本番環境で障害が発生する割合（ %） ● サービス復元時間 : 組織が本番環境での障害から回復するのにかかる時間 仕様 　LambdaがGithub APIを定期的に叩き社内リポジトリのデータを取得 　NextのCSRによりダッシュボードを提示 アウトプットについて 生産性可視化アプリケーション

機能 　生産性可視化に必要なデータ取得機能 　ダッシュボード表示機能 　期間・チーム選択機能 　認証機能 開発人数 　4人 期間 　3スプリント（27days） アウトプットについて 生産性可視化アプリケーション

生産性可視化アプリケーション

Atomic Designにはこだわり過ぎず開発 　デザインはなくラフを軽く作ってから開発という流れであったため。 　ただ最低限循環参照は起こさない ・アプリケーションロジックは Organismsに寄せるなど ライフサイクルを意識 　1年分のデータを取得できる仕様上、ダッシュボードの再レンダリングが大量になされると負荷がすぐ高く なるため、特にダッシュボードの再レンダリングのタイミングを意識 　 スプリントスプリントレビューの意見を取り入れる 　仕様も比較的自由度高く決めれたため、スプリントレビューでステークホルダーの意見を 　吸い上げ、翌スプリントには反映できるように アウトプットについて 開発時意識したこと

成果物 　既存営業支援ツール（求職者向けの求人確認・応募マイページ）のフロントエンドリプレイス 技術構成 　既存 　　アプリケーション Laravel + Vue 　　インフラ EC2 RDS 　リプレイス後 　　アプリケーション React + Next 　　インフラ ECS + Fargate 　　既存環境からフロントエンドだけ切り離し リプレイス アウトプットについて 営業支援ツール フロントエンドリプレイス

機能 　求人取得・表示機能 　求人応募機能 　面接希望日時選択機能 　認証機能 etc... 開発人数 　4人（PM 1人） 期間 　1ヶ月 アウトプットについて 営業支援ツール フロントエンドリプレイス

アウトプットについて

Material UIの作法に則ったコーディング 　既存環境ではCSSのベタ書きがされており、改修が入れづらい状況であったため 　多少時間がかかっても改修を入れやすくなるよう Material UIの機能を使ってコーディング 多少デザインが変わることは許容 　古いVue, Nuxtからのリプレイスでデザインデータもなかったため 　PMの許容範囲であればデザインは変更する SSR, CSRの使い分け 　叩くAPI自体はかわらないため既存では CSRで書かれていたところも 　静的ページはSSRによるレンダリングに変更 アウトプットについて 開発時意識したこと

やったこと 　継続的な学習 　プロを目指す人のための TypeScript入門 　type-challenges 　React チュートリアル 　Next チュートリアル 　TypeScript/Next.JSでつくる実践Webアプリケーション開発 成果物 　生産性可視化アプリケーションの開発 　既存営業支援ツール（求職者向けの求人確認・応募マイページ）のフロントエンドリプレイス 得られたもの 　フロントエンドに関する網羅的な知識 　自信 etc… まとめ

感想 アウトプットにこだわるのは大事 　自学習だけでは調べないような深い情報も発表やアウトプットがあることで取りに行くようになった 　また、毎日フロントエンドに関する記事を Slackで共有していたため自然と自学時間が増えた 組織に還元する気持ち大事 　自分の成長だけでなく結果的に組織に還元することがわかっていたため、前向きに取り組めた。 　 意識改革 　2ヶ月フロントエンドに関することばかり考えていたため、 　組織のフロントエンドを牽引しようという意識が自然と芽生えた