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
430
BEエンジニアがFEの業務をできるようになるまでにやったこと
teamLab×DMM tech meetup ~frontend~
の登壇資料です。
ysd
December 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
760
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
120
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
470
Reading Rails 1.0 Source Code
okuramasafumi
0
220
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
120
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Embracing the Ebb and Flow
colly
87
4.8k
Music & Morning Musume
bryan
46
6.8k
Speed Design
sergeychernyshev
32
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Side Projects
sachag
455
43k
Code Review Best Practice
trishagee
70
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
A Modern Web Designer's Workflow
chriscoyier
696
190k
RailsConf 2023
tenderlove
30
1.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
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