Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンド育成PJに参加してみた
Search
Tech Leverages
July 20, 2023
0
3k
フロントエンド育成PJに参加してみた
Tech Leverages
July 20, 2023
Tweet
Share
More Decks by Tech Leverages
See All by Tech Leverages
ドキュメントとの付き合い方を考える
leveragestech
1
130
開発者体験を向上させる ボトムアップな組織改善
leveragestech
1
130
市場価値の高いエンジニアを 目指そう!!
leveragestech
1
33
より快適なエラーログ監視を目指して
leveragestech
4
1.6k
絶賛設計中!参画者のエンゲージメントを最大化する体験重視のオンボーディング
leveragestech
1
94
SREが強化するべき組織のケイパビリティ
leveragestech
0
74
DevOps実現のための私たちのSREのあり方
leveragestech
1
61
アウトプット=アウトカムではない世界で開発生産性を考える
leveragestech
4
710
ビジネス貢献を目指して 〜開発者体験から始める開発生産性向上~
leveragestech
2
400
Featured
See All Featured
Visualization
eitanlees
143
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Pragmatic Product Professional
lauravandoore
31
6.2k
How to Think Like a Performance Engineer
csswizardry
16
1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Building Adaptive Systems
keathley
38
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Transcript
フロントエンドエンジニア育成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を組み合わせて1つの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ヶ月フロントエンドに関することばかり考えていたため、
組織のフロントエンドを牽引しようという意識が自然と芽生えた