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
670
フロントエンドの単体テストの使い方/考え方
tnyo43
0
340
Elm でつくるルービックキューブ
tnyo43
1
490
Other Decks in Programming
See All in Programming
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
170
私の後悔をAWS DMSで解決した話
hiramax
4
210
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
AIでLINEスタンプを作ってみた
eycjur
1
230
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
150
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
750
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
160
個人軟體時代
ethanhuang13
0
320
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Code Review Best Practice
trishagee
70
19k
Become a Pro
speakerdeck
PRO
29
5.5k
Scaling GitHub
holman
463
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Ace a Technical Interview
jacobian
279
23k
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 を使ってルールを定義する
ルールに対してポジティブになる • 「守らなければならない義務」ではなく 「守るとみんなが幸せになるもの」 と全員が意識する ◦ メンバーの不安を解消するルール作りを心がける ◦ 守られていないときは、守りやすくするためにはどうするか考える •
ルールに則った実装に納得できないときは、ルール自体を見直す ◦ 守らなくていいルールはない( 割れ窓理論) ◦ ルールを属人化させない、みんなで作り上げる ◦ 小さく始める
明確なルールを作って嬉しいこと • 意図しない実装が減る • レビューの負担が小さくなる ◦ メインのトピックに集中できる • オンボーディングにかかるコストの減少
まとめ • 実装の不満が上がったときは、不満を解消するルール作りのチャンス ◦ 意思決定の背景を明確にする ◦ 可能なら自動化する • ルールに対してポジティブに考えて、守り続けるように運用する