Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

• 岩下 太 (jaxx2104) • 2017年5⽉ 中途⼊社 • フロントエンドエンジニア • 前職：某ネットニュースサイト

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ビルドツールから改善 5FTU %PDT #VJME 6* 'SBNFXPSL 4FSWJDF • ϏϧυπʔϧͷҠߦ • λεΫվળʹΑΔϏϧυ࣌ؒ୹ॖ • ඇػೳཁ݅Ͱͷվળ͕Մೳʹ • linter ΍ formatter ͷ੔උ • ࣮૷ɾϨϏϡʔίετͷ࡟ݮ • ༨৒࣌ؒͰ඼࣭վળ͠΍͘͢

Slide 15

Slide 15 text

次にテスト,ドキュメントの改善 5FTU %PDT #VJME 6* 'SBNFXPSL 4FSWJDF • Framework ͷҠߦΛݟਾ࣮͑ͯࢪ • Jest ΁ͷҠߦ • ը໘ଆͷςετ͕Մೳʹ • ػೳ։ൃ΋औΓ૊Έ͠΍͘͢ • Storybook ͷಋೖ • ίϯϙʔωϯτͷϞοΫԽ • ϑϥδϟΠϧͳϑϩϯτಛੑʹ߹Θ ͤͯը໘͔Βίϯϙʔωϯτ୯Ґ΁

Slide 16

Slide 16 text

6* 'SBNFXPSL 4FSWJDF 画⾯側の改善 5FTU %PDT #VJME • Vue.js ͷಋೖ • ϏϧυͱςετͷվળʹΑΓߴ͍ SLAͰ࣮૷͕ՄೳͱͳΔΑ͏ઃܭ • ৽نը໘Ͱಋೖ • ࠓޙͷػೳ։ൃͰಋೖࣄྫΛ૿΍ ͍ͯ͘͠

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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