フロントエンド育成PJに参加してみた

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

FE育成PJ
育成PJで行ったこと（読書課題）
継続的な学習

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide


View Slide

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

View Slide

成果物
技術構成
　既存
　　アプリケーション Laravel + Vue
　　インフラ EC2 RDS
　リプレイス後
　　アプリケーション React + Next
　　インフラ ECS + Fargate
　　既存環境からフロントエンドだけ切り離しリプレイス
営業支援ツールフロントエンドリプレイス

View Slide

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

View Slide


View Slide

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

View Slide

やったこと
　継続的な学習
　type-challenges
成果物
得られたもの
　フロントエンドに関する網羅的な知識
　自信 etc…
まとめ

View Slide

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

View Slide

フロントエンド育成PJに参加してみた

フロントエンド育成PJに参加してみた

レバレジーズTechアカウント

More Decks by レバレジーズTechアカウント

Featured

Transcript