レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08

Transcript

1. ϨΨγʔͳϑϩϯτΤϯυ؀ڥͰ ৺ཧత҆શੑΛ֬อ͢Δ Futoshi Iwashita / RecoChoku Tech Night #08

2. • 岩下 太 (jaxx2104) • 2017年5⽉ 中途⼊社 • フロントエンドエンジニア •

   前職：某ネットニュースサイト
3. None

4. 今⽇話したいこと • レストランボードのフロントエンドチームが 向き合う課題 • チーム全員で⼼理的安全性を確保している話

5. ⾃分たちのチームが 向き合っている課題

6. 機能開発をしていて課題に感じること • 業務⽀援アプリなので機能の優位さが重視さ れ、要望に応えていく必要がある • ホットペッパーグルメやAirとのシステム間 の連携が多く仕様が複雑で納期マストも多い

7. Delivery > Quality になってしまいがち

8. あとジョブチェンジ組が多い

9. 「この機能のドキュメントが存在しません」 「全く同じ処理(1000⾏)が2つあります」 「この画⾯だけES2015で書かれてません」

10. None

11. 機能開発をチーム全員が不安なく 進められるようにしなくては

12. 技術的に⼼理的安全性を確保する

13. フロントエンドの改善するとしても • ϨΨγʔͳ؀ڥͰը໘ଆΛ୯७ʹվ ળͯ͠΋ϓϩμΫτӨڹ͕େ͖͍ɻɻ 5FTU
    %PDT #VJME 6* 'SBNFXPSL 4FSWJDF

14. ビルドツールから改善 5FTU
    %PDT #VJME 6* 'SBNFXPSL 4FSWJDF • ϏϧυπʔϧͷҠߦ •

    λεΫվળʹΑΔϏϧυ࣌ؒ୹ॖ • ඇػೳཁ݅Ͱͷվળ͕Մೳʹ • linter ΍ formatter ͷ੔උ • ࣮૷ɾϨϏϡʔίετͷ࡟ݮ • ༨৒࣌ؒͰ඼࣭վળ͠΍͘͢

15. 次にテスト,ドキュメントの改善 5FTU
    %PDT #VJME 6* 'SBNFXPSL 4FSWJDF • Framework ͷҠߦΛݟਾ࣮͑ͯࢪ

    • Jest ΁ͷҠߦ • ը໘ଆͷςετ͕Մೳʹ • ػೳ։ൃ΋औΓ૊Έ͠΍͘͢ • Storybook ͷಋೖ • ίϯϙʔωϯτͷϞοΫԽ • ϑϥδϟΠϧͳϑϩϯτಛੑʹ߹Θ ͤͯը໘͔Βίϯϙʔωϯτ୯Ґ΁

16. 6* 'SBNFXPSL 4FSWJDF 画⾯側の改善 5FTU
    %PDT #VJME • Vue.js ͷಋೖ

    • ϏϧυͱςετͷվળʹΑΓߴ͍ SLAͰ࣮૷͕ՄೳͱͳΔΑ͏ઃܭ • ৽نը໘Ͱಋೖ • ࠓޙͷػೳ։ൃͰಋೖࣄྫΛ૿΍ ͍ͯ͘͠

17. あとはチーム全員で 「改善」をまわす

18. 全員で「改善」をまわすと • FEチームとして個⼈をサポートする体制づくり • 個⼈としてチーム貢献できるモチベーション⤴ • レガシー環境だけでなく最新フレームワークの機 能や設計を学習できる機会を⽤意する✍

19. 「改善」は参画者のインプットにも • 参画者にはテストケースを追加の改善 • アサイン予定の画⾯仕様を事前に把握 • フロントエンドの技術に慣れてもらう

20. もちろんフォローも必要 • いきなり改善をまわせる⼈は少ない • 改善フローの進め⽅はもくもく会とレビュー 会を実施してチームとしてサポート • 技術⾯ではFE横断で⽀援

21. None

22. チーム全員が事業成⻑のために 機能開発しながら改善に取り組める

23. 改善やっていきましょう！

24. ありがとうございました！