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
2.5k
ルールの運用から始めるフロントエンド開発改善
フロントエンドの開発で開発者体験が下がったときには、適切なルールの運用を始めるとよいのではないか、という話をしています。
特に主張したいのは12ページ目です。
Tomoya Kashifuku
April 14, 2023
Tweet
Share
More Decks by Tomoya Kashifuku
See All by Tomoya Kashifuku
フロントエンドの単体テストの使い方/考え方
tnyo43
0
200
Elm でつくるルービックキューブ
tnyo43
1
280
Other Decks in Programming
See All in Programming
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
810
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
440
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
5
720
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
500
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
360
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
560
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
320
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.2k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
Featured
See All Featured
A Philosophy of Restraint
colly
196
16k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Design by the Numbers
sachag
274
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Done Done
chrislema
178
15k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Become a Pro
speakerdeck
PRO
10
4.5k
Rails Girls Zürich Keynote
gr2m
91
13k
Building an army of robots
kneath
300
41k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Infographics Made Easy
chrislema
237
18k
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 を使ってルールを定義する
ルールに対してポジティブになる • 「守らなければならない義務」ではなく 「守るとみんなが幸せになるもの」 と全員が意識する ◦ メンバーの不安を解消するルール作りを心がける ◦ 守られていないときは、守りやすくするためにはどうするか考える •
ルールに則った実装に納得できないときは、ルール自体を見直す ◦ 守らなくていいルールはない( 割れ窓理論) ◦ ルールを属人化させない、みんなで作り上げる ◦ 小さく始める
明確なルールを作って嬉しいこと • 意図しない実装が減る • レビューの負担が小さくなる ◦ メインのトピックに集中できる • オンボーディングにかかるコストの減少
まとめ • 実装の不満が上がったときは、不満を解消するルール作りのチャンス ◦ 意思決定の背景を明確にする ◦ 可能なら自動化する • ルールに対してポジティブに考えて、守り続けるように運用する