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

2.5K Views

May 08, 19

スライド概要

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

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

新卒3年⽬、 ヤフーで学んだ2年間を振り返る Frontrend × Bonfire Frontend 2019年4⽉15⽇ ヤフー株式会社 濱⽥ 唯 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

2.

⾃⼰紹介 濱⽥唯 • 1994年⽣まれ、愛知県出⾝ • 2017年新卒⼊社 • フロントエンドエンジニア • JavaScript (React, Redux), TypeScript, HTML/CSS Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2

3.

今回のLTでは エンジニアとして新卒⼊社しWebフロントエンド に触れてから丸2年、ヤフーのBtoBツール開発を 通して学んだことを振り返ります ※具体的な技術やツールをどこでどう使いました という話は出てきません Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 3

4.

2年間どんなことがあったか? Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

5.

2年間の流れ 2017年4⽉ ⼊社 エンジニア研修 + OJT • • • • チーム開発 Git Java JavaScript Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2017年10⽉ 広告管理ツールのFE開発 フロントエンド チームに配属 • • • 2019年4⽉ 3年⽬突⼊ React Redux TypeScript etc 5

6.

⼊社〜本配属 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 6

7.

基礎技術研修 • Linux, Java の勉強 • 新卒同⼠のチーム開発 • 社内技術研修 • 社内技術を使って再度チーム開発 基礎知識をつけ、同期同⼠のつながりを作る Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 7

8.

OJT • カンパニー単位で実施 • 技術・担当サービス垣根なくチームローテ • 広告ドメインの理解 • 各チームの分野や雰囲気の把握 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 8

9.

本配属 フロントエンド特化チームに配属 • 担当プロダクト間の知⾒共有 • このアーキテクチャを採⽤してどうだった、 • こんな感じでスクラムをやっている etc... • インプット・アウトプットの習慣づけ • • チームLT アプリ制作 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 9

10.

関わったプロダクト • 広告⼊稿管理画⾯の フロントエンド • • B向けツール 利⽤者も開発側も ⼤規模 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 10

11.

2年間でどう変化があったか? Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

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.

ルール 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 19

20.

ルール 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 • propsの中⾝を明確化 • 機能修正時の漏れを防ぐ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 20

21.

ルール 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 • UI層/Domain層に分けた上で • storeをモジュール単位で分割 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 21

22.

ルール 実際に採⽤しているのだと • TypeScriptで型付け • コンポーネントの分割粒度を揃える • 共通⾔語化 • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 22

23.

ルール 実際に採⽤しているのだと • TypeScriptで型付け • Reduxのファイル構成にre-ducks • Atomic Designを元にコンポーネント分割 何を採⽤するかはサービス次第 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 23

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.

新しい技術を採⽤するとき TS書いてみたいです〜 TS未経験な⾃分 → 学習コストとスケジュールの兼合いで断念 メンテしやすくしたい!!!!!! TSカンペキニリカイシタ⾃分 → 経験者で⼟台をかためて導⼊ 普段から知識を取り⼊れるモチベーションUP Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 28

29.

まとめ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

30.

振り返りポイント チーム開発 の⼼構え Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 設計・構成 への意識 新しい技術に 対する意欲 30

31.

まとめ ⾊んな概念を知ったことがまず成⻑! コードレビュー、アーキテクチャ、デザインパターン etc... チームや社内に知⾒がたくさんある それを積極的に共有する⽂化がある Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 31

32.

まとめ ⼤規模プロダクトに関われてよかった! 実際に運⽤されていて 関わる⼈の数も動くお⾦の額も⼤規模 その上でフレキシブルに技術選定できる環境 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 32

33.

これからも⽇々成⻑していき💪 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.