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

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

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

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

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

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

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

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

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

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

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

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

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

チーム開発の⼼構え Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 13

チーム開発の⼼構え コードレビューは⼤事 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 14

レビューは⼤事 • 読めるコードにする意識 • • 作業再開も楽 レビュワーはロジックに集中できる • レビューが滞ると他⼈の作業を⽌める Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 15

レビューは⼤事 • プロジェクトの雰囲気もつくる気がする Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 16

設計・構成への意識 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 17

設計・構成への意識 動けばいい ⼤⼈数が関わる、⻑期で運⽤されるプロダクト、、、 アプリケーションの構成にルールが必要 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 18

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

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

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

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

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

ルール ⼤事なのは ルールが⾔語化されていること メンバーが合意していること Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 24

新しい技術に対する意欲 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 25

新しい技術に対する意欲 ⾔われた技術をとりあえず取り⼊れる 議論に参加するためにも⾃分から取り⼊れる Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 26

新しい技術を採⽤するとき サービス単位で判断 メリット・デメリットを開発チームで話し合う • どんな良いことがあるか？ • • 新しいだけでとびついていないか？ 導⼊コストはメリットに⾒合っているか？ 当たり前だけど知らないと議論に参加できない Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 27

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

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

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

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

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

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