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
ルールの運用から始めるフロントエンド開発改善
Search
Tomoya Kashifuku
April 14, 2023
Programming
5
3k
ルールの運用から始めるフロントエンド開発改善
フロントエンドの開発で開発者体験が下がったときには、適切なルールの運用を始めるとよいのではないか、という話をしています。
特に主張したいのは12ページ目です。
Tomoya Kashifuku
April 14, 2023
Tweet
Share
More Decks by Tomoya Kashifuku
See All by Tomoya Kashifuku
Rustでオリジナルnpmパッケージを作ってみよう
tnyo43
0
320
ユーザのためだけじゃない!エンジニアも嬉しいアクセシビリティ改善のための自動テスト
tnyo43
0
680
フロントエンドの単体テストの使い方/考え方
tnyo43
0
340
Elm でつくるルービックキューブ
tnyo43
1
490
Other Decks in Programming
See All in Programming
Cache Me If You Can
ryunen344
2
3k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Kiroで始めるAI-DLC
kaonash
2
620
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Laravel Boost 超入門
fire_arlo
3
220
1から理解するWeb Push
dora1998
7
1.9k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Practical Orchestrator
shlominoach
190
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Navigating Team Friction
lara
189
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Transcript
ルールの運用から始める フロントエンド開発改善 2023/04 カシフクトモヤ
自己紹介 カシフクトモヤ @cashfooooou 2023/04 ~ 株式会社マネーフォワード 福岡拠点 - Web フロントエンド
- 競技プログラミング - 自動テスト - TypeScript / Elm / OCaml / Rust
今日のテーマ 開発者体験の向上のために 「ルールの運用を見直すこと」から始めてみよう
想像してください こんなプロジェクトに参画 • React を使っている • Atomic Design を取り入れている •
Redux を使っている
チームから上がる不満の声 • React のルールに則った書き方ができてない、気がついたら悪い書き方をしてしまう ◦ key を付与していない、 useEffect の deps
が不適切 • 新しく作る UI コンポーネントが Atomic Design のどのグループに属するかわからない ◦ Atoms と Molecules の境界、 Molecules と Organisms の境界が曖昧 • Redux の store をどこからでも参照してしまって制御が難しい
不満のもととなる問題・不安 • 既存の実装に不満があるけど、どのように直したらよいかわからない • 今は想定通りの挙動をしているけど、いつバグが発生するかわからず不安だ • 開発のタスクで手一杯なので、既存の実装の改修に時間をかけられない • 実装のルールを作っても、ルールを守るのがたいへんで実装が難しくなる
問題・不安を解消するルールの運用 実装のルールを作って適切に運用することで、簡単に守られる状態を作ることで解決したい • ルールが作られた背景が明確であること • 人が注意しなくてもルールが守りやすい状態になっていること • チームメンバーがルールに対してポジティブであること
背景を明確にする • なぜやるのか、なにに困っているか • どのように考えたか • どう実行するか 簡単な ADR や
Slack のスレッドなどに書き込んで、後から見返せる状況を作る 初めからしっかりとドキュメントを作らなくてもよい
背景を明確にする 例) Molecules と Organisms の境界についてのルール なにに困っているか 人によって判断がぶれて、コンポーネントが見つけられない。 Molecules から
Organisms を参照してしまうことがある。 どのように考えたか コンポーネントの複雑さは、人によって感じ方が異なる。 AtomicDesign の再利用性を活かしたいので、ビジネスロジックを含 むか否かで分別するのがよいかも。 どう実行するか Molecules が models (ビジネスロジックの定義)に依存しないよう にする。
自動的にルールを守る仕組みを作る 人の手だけでルールを守り続けるのは難しい、レビューの負担が大きくなる 可能な限り自動化して、気がつくとルールが守れている状況を作る • アーキテクチャを工夫する ◦ 期待しない実装ができない状態 • linter (eslint、
stylelint …)を導入する ◦ 期待しない実装をすると警告を出してくれる ◦ 導入も変更もカンタンでよい
自動的にルールを守る仕組みを作る 例) Molecules と Organisms の境界についてのルール 「Molecules が models (ビジネスロジックの定義)に依存しないようにする」というルールを自動化
eslint の import/no-restricted-paths を使ってルールを定義する
ルールに対してポジティブになる • 「守らなければならない義務」ではなく 「守るとみんなが幸せになるもの」 と全員が意識する ◦ メンバーの不安を解消するルール作りを心がける ◦ 守られていないときは、守りやすくするためにはどうするか考える •
ルールに則った実装に納得できないときは、ルール自体を見直す ◦ 守らなくていいルールはない( 割れ窓理論) ◦ ルールを属人化させない、みんなで作り上げる ◦ 小さく始める
明確なルールを作って嬉しいこと • 意図しない実装が減る • レビューの負担が小さくなる ◦ メインのトピックに集中できる • オンボーディングにかかるコストの減少
まとめ • 実装の不満が上がったときは、不満を解消するルール作りのチャンス ◦ 意思決定の背景を明確にする ◦ 可能なら自動化する • ルールに対してポジティブに考えて、守り続けるように運用する