2.7K Views
May 08, 19
スライド概要
新卒3年目、ヤフーで学んだ2年間を振り返りました
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
新卒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.