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
370
BEエンジニアがFEの業務をできるようになるまでにやったこと
teamLab×DMM tech meetup ~frontend~
の登壇資料です。
ysd
December 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
540
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
310
Create a website using Spatial Web
akkeylab
0
300
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
童醫院敏捷轉型的實踐經驗
cclai999
0
190
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
Gleamという選択肢
comamoca
6
760
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
470
VS Code Update for GitHub Copilot
74th
1
360
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Language of Interfaces
destraynor
158
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Being A Developer After 40
akosma
90
590k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Faster Mobile Websites
deanohume
307
31k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Side Projects
sachag
455
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
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