Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Nig...
Search
jaxx2104
July 24, 2018
Technology
0
320
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
July 24, 2018
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
Relative CI が気になっている話
jaxx2104
0
490
デザインファイルにおける継続的インテグレーション
jaxx2104
2
410
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
360
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
700
サイレントヒーローを作らない取り組み
jaxx2104
1
150
開発組織のメンバーからリーダーになって
jaxx2104
0
110
Nikuman
jaxx2104
0
370
Vue.jsとLambdaの導入
jaxx2104
0
360
Other Decks in Technology
See All in Technology
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.2k
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
Охота на косуль у древних
ashapiro
0
110
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.9k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
120
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
EDRの検知の仕組みと検知回避について
chayakonanaika
12
4.9k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
630
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
The Pragmatic Product Professional
lauravandoore
32
6.4k
GraphQLとの向き合い方2022年版
quramy
44
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
How to train your dragon (web standard)
notwaldorf
91
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
A designer walks into a library…
pauljervisheath
205
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Transcript
ϨΨγʔͳϑϩϯτΤϯυڥͰ ৺ཧత҆શੑΛ֬อ͢Δ Futoshi Iwashita / RecoChoku Tech Night #08
• 岩下 太 (jaxx2104) • 2017年5⽉ 中途⼊社 • フロントエンドエンジニア •
前職:某ネットニュースサイト
None
今⽇話したいこと • レストランボードのフロントエンドチームが 向き合う課題 • チーム全員で⼼理的安全性を確保している話
⾃分たちのチームが 向き合っている課題
機能開発をしていて課題に感じること • 業務⽀援アプリなので機能の優位さが重視さ れ、要望に応えていく必要がある • ホットペッパーグルメやAirとのシステム間 の連携が多く仕様が複雑で納期マストも多い
Delivery > Quality になってしまいがち
あとジョブチェンジ組が多い
「この機能のドキュメントが存在しません」 「全く同じ処理(1000⾏)が2つあります」 「この画⾯だけES2015で書かれてません」
None
機能開発をチーム全員が不安なく 進められるようにしなくては
技術的に⼼理的安全性を確保する
フロントエンドの改善するとしても • ϨΨγʔͳڥͰը໘ଆΛ୯७ʹվ ળͯ͠ϓϩμΫτӨڹ͕େ͖͍ɻɻ 5FTU %PDT #VJME 6* 'SBNFXPSL 4FSWJDF
ビルドツールから改善 5FTU %PDT #VJME 6* 'SBNFXPSL 4FSWJDF • ϏϧυπʔϧͷҠߦ •
λεΫվળʹΑΔϏϧυ࣌ؒॖ • ඇػೳཁ݅Ͱͷվળ͕Մೳʹ • linter formatter ͷඋ • ࣮ɾϨϏϡʔίετͷݮ • ༨࣌ؒͰ࣭վળ͘͢͠
次にテスト,ドキュメントの改善 5FTU %PDT #VJME 6* 'SBNFXPSL 4FSWJDF • Framework ͷҠߦΛݟਾ࣮͑ͯࢪ
• Jest ͷҠߦ • ը໘ଆͷςετ͕Մೳʹ • ػೳ։ൃऔΓΈ͘͢͠ • Storybook ͷಋೖ • ίϯϙʔωϯτͷϞοΫԽ • ϑϥδϟΠϧͳϑϩϯτಛੑʹ߹Θ ͤͯը໘͔Βίϯϙʔωϯτ୯Ґ
6* 'SBNFXPSL 4FSWJDF 画⾯側の改善 5FTU %PDT #VJME • Vue.js ͷಋೖ
• ϏϧυͱςετͷվળʹΑΓߴ͍ SLAͰ࣮͕ՄೳͱͳΔΑ͏ઃܭ • ৽نը໘Ͱಋೖ • ࠓޙͷػೳ։ൃͰಋೖࣄྫΛ૿ ͍ͯ͘͠
あとはチーム全員で 「改善」をまわす
全員で「改善」をまわすと • FEチームとして個⼈をサポートする体制づくり • 個⼈としてチーム貢献できるモチベーション⤴ • レガシー環境だけでなく最新フレームワークの機 能や設計を学習できる機会を⽤意する✍
「改善」は参画者のインプットにも • 参画者にはテストケースを追加の改善 • アサイン予定の画⾯仕様を事前に把握 • フロントエンドの技術に慣れてもらう
もちろんフォローも必要 • いきなり改善をまわせる⼈は少ない • 改善フローの進め⽅はもくもく会とレビュー 会を実施してチームとしてサポート • 技術⾯ではFE横断で⽀援
None
チーム全員が事業成⻑のために 機能開発しながら改善に取り組める
改善やっていきましょう!
ありがとうございました!