新卒3年目、ヤフーで学んだ2年間を振り返る

エンジニアとして新卒入社しWebフロントエンドに触れてから丸2年、ヤフーのBtoBツール開発を通して学んだことを振り返ります。
-----

Bonfire Frontend #特別編 で発表したものです。

Transcript

1. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2019年4⽉15⽇ ヤフー株式会社 濱⽥ 唯 新卒3年⽬、 ヤフーで学んだ2年間を振り返る Frontrend × Bonfire Frontend
2. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ⾃⼰紹介 2 濱⽥唯 • 1994年⽣まれ、愛知県出⾝ • 2017年新卒⼊社 • フロントエンドエンジニア • JavaScript (React, Redux), TypeScript, HTML/CSS
3. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 今回のLTでは 3 エンジニアとして新卒⼊社しWebフロントエンド に触れてから丸2年、ヤフーのBtoBツール開発を 通して学んだことを振り返ります ※具体的な技術やツールをどこでどう使いました という話は出てきません
4. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2年間どんなことがあったか？
5. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2年間の流れ 5 エンジニア研修 + OJT 広告管理ツールのFE開発 2017年4⽉ ⼊社 2019年4⽉ 3年⽬突⼊ 2017年10⽉ フロントエンド チームに配属 • チーム開発 • Git • Java • JavaScript • React • Redux • TypeScript etc
6. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ⼊社〜本配属 6
7. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 基礎技術研修 7 • Linux, Java の勉強 • 新卒同⼠のチーム開発 • 社内技術研修 • 社内技術を使って再度チーム開発 基礎知識をつけ、同期同⼠のつながりを作る
8. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. OJT 8 • カンパニー単位で実施 • 技術・担当サービス垣根なくチームローテ • 広告ドメインの理解 • 各チームの分野や雰囲気の把握
9. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 本配属 9 フロントエンド特化チームに配属 • 担当プロダクト間の知⾒共有 • このアーキテクチャを採⽤してどうだった、 • こんな感じでスクラムをやっている etc... • インプット・アウトプットの習慣づけ • チームLT • アプリ制作
10. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 関わったプロダクト 10 • 広告⼊稿管理画⾯の フロントエンド • B向けツール • 利⽤者も開発側も ⼤規模
11. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2年間でどう変化があったか？
12. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 振り返りポイント 12 チーム開発 の⼼構え 設計・構成 への意識 新しい技術に 対する意欲
13. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 13 チーム開発の⼼構え
14. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. チーム開発の⼼構え 14 コードレビューは⼤事
15. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. レビューは⼤事 15 • 読めるコードにする意識 • 作業再開も楽 • レビュワーはロジックに集中できる • レビューが滞ると他⼈の作業を⽌める
16. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. レビューは⼤事 16 • プロジェクトの雰囲気もつくる気がする
17. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 17 設計・構成への意識
18. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 設計・構成への意識 18 動けばいい ⼤⼈数が関わる、⻑期で運⽤されるプロダクト、、、 アプリケーションの構成にルールが必要
19. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ルール 19 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割
20. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ルール 20 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 • propsの中⾝を明確化 • 機能修正時の漏れを防ぐ
21. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ルール 21 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 • UI層/Domain層に分けた上で • storeをモジュール単位で分割
22. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ルール 22 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 • コンポーネントの分割粒度を揃える • 共通⾔語化
23. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ルール 23 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 何を採⽤するかはサービス次第
24. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ルール 24 ⼤事なのは ルールが⾔語化されていること メンバーが合意していること
25. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 25 新しい技術に対する意欲
26. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 新しい技術に対する意欲 26 ⾔われた技術をとりあえず取り⼊れる 議論に参加するためにも⾃分から取り⼊れる
27. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 新しい技術を採⽤するとき 27 サービス単位で判断 メリット・デメリットを開発チームで話し合う • どんな良いことがあるか？ • 新しいだけでとびついていないか？ • 導⼊コストはメリットに⾒合っているか？ 当たり前だけど知らないと議論に参加できない
28. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 新しい技術を採⽤するとき 28 普段から知識を取り⼊れるモチベーションUP TS未経験な⾃分 TSｶﾝﾍﾟｷﾆﾘｶｲｼﾀ⾃分 TS書いてみたいです〜 メンテしやすくしたい！！！！！！ → 学習コストとスケジュールの兼合いで断念 → 経験者で⼟台をかためて導⼊
29. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. まとめ
30. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 振り返りポイント 30 チーム開発 の⼼構え 設計・構成 への意識 新しい技術に 対する意欲
31. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. まとめ 31 ⾊んな概念を知ったことがまず成⻑！ コードレビュー、アーキテクチャ、デザインパターン etc... チームや社内に知⾒がたくさんある それを積極的に共有する⽂化がある
32. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. まとめ 32 ⼤規模プロダクトに関われてよかった！ 実際に運⽤されていて 関わる⼈の数も動くお⾦の額も⼤規模 その上でフレキシブルに技術選定できる環境
33. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. これからも⽇々成⻑していき