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
BEエンジニアがFEの業務をできるようになるまでにやったこと
Search
ysd
December 23, 2024
Programming
0
270
BEエンジニアがFEの業務をできるようになるまでにやったこと
teamLab×DMM tech meetup ~frontend~
の登壇資料です。
ysd
December 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
100
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.6k
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.3k
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
2.6k
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
3.2k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
160
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
3.3k
ASP.NET Core の OpenAPIサポート
h455h1
0
170
VitePressを2週間使ってみた感想
hal_spidernight
0
100
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
530
The Cult of Friendly URLs
andyhume
78
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The Language of Interfaces
destraynor
156
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Code Reviewing Like a Champion
maltzj
521
39k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Transcript
© DMM © DMM BEエンジニアが FEの業務を できるようになるまでにやったこと teamLab×DMM tech meetup
~frontend~ PF開発本部 第1開発部 DMMポイントクラブグループ 吉田 龍信
© DMM 自己紹介 吉田 龍信(Yoshida Ryushin) • DMM.com 2023年新卒入社 •
DMMポイントクラブグループ Webチーム所属 • DMMポイントクラブの 開発・保守運用をしています GitHub:ysd-rysn 2
© DMM • BEエンジニアがFEの業務を こなすことができるようになるまでの道のり • DMMポイントクラブの業務内容 話す内容 3
© DMM 入社時のFEスキル 元々BEエンジニアとして入社 • HTML, CSS, JavaScriptは一応触ったことはある • React・Vue・Angularなどのフレームワークは、
存在は知っていたが全く触ったことがない • アウトプットとして何か成果物を作成したことはほとんどない • LPのような静的ページも実装できるか怪しいレベル 4
© DMM 新卒エンジニア研修での学び 1. LP作成 HTML・CSS・JavaScriptの学習 静的なページの実装 2. X(旧Twitter)のようなサービス作成 TypeScript・React・Next.jsの学習
Webアプリの実装 5 FEの実務を行うための 最低限の知識を学習
© DMM DMMポイントクラブ Webチーム配属後の業務 FE・BEどちらの業務もある (ときにはインフラも) 配属初期はBEの開発を中心に行っていた BEの業務に慣れてきたころに、FEの業務も簡単なものから 少しずつ担当 するようになった
基本的に手を挙げれば色々な業務を任せてもらえる 🙌 6
© DMM ページの簡単な修正 • 文言修正 • 画像差し替え • コンポーネント修正 •
etc 7
© DMM キャンペーンのLP実装 • CSSでのレイアウトに苦戦 • 何を苦手としているか気づくこと ができた • リリースされたときの嬉しさが大
きかった • 新卒エンジニア研修での 学びが活きた業務の一つ 8
© DMM ポイントクラブ管理画面の実装 2023年10月頃からポイントクラブ管理画面を作成する施策が始まった これによりFEの開発タスクが大幅に増え、一部機能の実装を 担当することに🙌 ポイントクラブ管理画面とは‥ キャンペーンバナーやお知らせ、プッシュ通知などDMMポイントクラブ運用に 関する様々なデータを管理するWebアプリ 9
Next.jsでの フルスタック開発
© DMM ポイントクラブ管理画面の実装 • プッシュ通知のCRUD処理用の画面を実装 10
© DMM ポイントクラブ管理画面の実装 • 利用登録画面の実装 11
© DMM ポイントクラブ管理画面の実装 • まずは、先輩とのペアプログラミングで1つの機能の実装を行った • 以降は実装の数をこなすうちに、一人でも実装できるように🙌 • 管理画面の実装を通してReact・Next.js周りの理解が 一気に深まった
12
© DMM FEの業務を進めるうえでやって良かったこと FEの業務に限らずですが‥ • 先輩とのペアプログラミング • 個人的にこれが一番コード理解が早まった • 技術周りでわからないことはChatGPTに質問
• ドメイン知識は先輩にどんどん質問 • 既存のコードリーディングにGitHub Copilotも役立った 13
© DMM まとめ • 小さなことから段階的に できることを 増やしていくことが重要 • 結局アウトプット (業務でFE実装を経験)することが
一番スキル成長につながることを実感 14
© DMM ご清聴ありがとうございました
© DMM FE技術の勉強に役立ったリソース HTML・CSS • mdn web docs • W3Schools
HTML Tutorial • W3Schools CSS Tutorial JavaScript・TypeScript • W3Schools JavaScript Tutorial • The Modern JavaScript Tutorial • The TypeScript Handbook • サバイバルTypeScript 16
© DMM FE技術の勉強に役立ったリソース React・Next.js • Learn React • Learn React
Foundations • Learn Next.js 17