BEエンジニアがFEの業務をできるようになるまでにやったこと

teamLab×DMM tech meetup ~frontend~ の登壇資料です。

Transcript

1. © DMM © DMM BEエンジニアが FEの業務を できるようになるまでにやったこと teamLab×DMM tech meetup ~frontend~ PF開発本部 第1開発部 DMMポイントクラブグループ 吉田 龍信
2. © DMM 自己紹介 吉田 龍信（Yoshida Ryushin） • DMM.com 2023年新卒入社 • DMMポイントクラブグループ Webチーム所属 • DMMポイントクラブの 開発・保守運用をしています GitHub：ysd-rysn 2
3. © DMM • BEエンジニアがFEの業務を こなすことができるようになるまでの道のり • DMMポイントクラブの業務内容 話す内容 3
4. © DMM 入社時のFEスキル 元々BEエンジニアとして入社 • HTML, CSS, JavaScriptは一応触ったことはある • React・Vue・Angularなどのフレームワークは、 存在は知っていたが全く触ったことがない • アウトプットとして何か成果物を作成したことはほとんどない • LPのような静的ページも実装できるか怪しいレベル 4
5. © DMM 新卒エンジニア研修での学び 1. LP作成 HTML・CSS・JavaScriptの学習 静的なページの実装 2. X(旧Twitter)のようなサービス作成 TypeScript・React・Next.jsの学習 Webアプリの実装 5 FEの実務を行うための 最低限の知識を学習
6. © DMM DMMポイントクラブ Webチーム配属後の業務 FE・BEどちらの業務もある （ときにはインフラも） 配属初期はBEの開発を中心に行っていた BEの業務に慣れてきたころに、FEの業務も簡単なものから 少しずつ担当 するようになった 基本的に手を挙げれば色々な業務を任せてもらえる 🙌 6
7. © DMM ページの簡単な修正 • 文言修正 • 画像差し替え • コンポーネント修正 • etc 7
8. © DMM キャンペーンのLP実装 • CSSでのレイアウトに苦戦 • 何を苦手としているか気づくこと ができた • リリースされたときの嬉しさが大 きかった • 新卒エンジニア研修での 学びが活きた業務の一つ 8
9. © DMM ポイントクラブ管理画面の実装 2023年10月頃からポイントクラブ管理画面を作成する施策が始まった これによりFEの開発タスクが大幅に増え、一部機能の実装を 担当することに🙌 ポイントクラブ管理画面とは‥ キャンペーンバナーやお知らせ、プッシュ通知などDMMポイントクラブ運用に 関する様々なデータを管理するWebアプリ 9 Next.jsでの フルスタック開発
10. © DMM ポイントクラブ管理画面の実装 • プッシュ通知のCRUD処理用の画面を実装 10
11. © DMM ポイントクラブ管理画面の実装 • 利用登録画面の実装 11
12. © DMM ポイントクラブ管理画面の実装 • まずは、先輩とのペアプログラミングで1つの機能の実装を行った • 以降は実装の数をこなすうちに、一人でも実装できるように🙌 • 管理画面の実装を通してReact・Next.js周りの理解が 一気に深まった 12
13. © DMM FEの業務を進めるうえでやって良かったこと FEの業務に限らずですが‥ • 先輩とのペアプログラミング • 個人的にこれが一番コード理解が早まった • 技術周りでわからないことはChatGPTに質問 • ドメイン知識は先輩にどんどん質問 • 既存のコードリーディングにGitHub Copilotも役立った 13
14. © DMM まとめ • 小さなことから段階的に できることを 増やしていくことが重要 • 結局アウトプット （業務でFE実装を経験）することが 一番スキル成長につながることを実感 14
15. © DMM ご清聴ありがとうございました
16. © 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
17. © DMM FE技術の勉強に役立ったリソース React・Next.js • Learn React • Learn React Foundations • Learn Next.js 17