読みやすいコードとはなにか？ 未来の自分とチームへの思いやり

Transcript

1. 読みやすいコードとは なにか？ 未来の自分とチームへの思いやり じょうげん / React Tokyoミートアップ 2025/12/12
2. 私は誰？ 👋 じょうげん と申します フリーランスエンジニア React Tokyo サポーター コードの可読性にこだわりあり
3. https://zenn.dev/bmth/articles/interface-props-ex tends
4. コードの迷宮
5. Co-locatio n 関連するコードは近くに配置する
6. それぞれのコードが遠くにある 機能ごとにバラバラの場所に配置されている。 Directory Structure (Bad) あっちこっちへファイルジャンプが必要 全体像が見えにくい 「hooks」や「types」フォルダに縛られている
7. ディレクトリを近くに Package by Feature 機能単位でまとめる（コロケーション）。 Package by Feature (Good) 関連ファイルが隣にある安心感 ディレクトリ構造が浅くなる 機能の削除や移動が簡単
8. 関連するコードは近くに そのファイルでしか使わないなら、 同じファイルに定義 してしまう。 「1ファイル1コンポーネント」のルールに縛られすぎない。 文脈が分断された短いファイルより、文脈が繋がった長いファイルの方が 読みやすい場合が多い。 user-list. tsx
9. 同じ関数内に定義する 単純な処理なら、無理に外へ切り出さず コンポーネント内（または `useCallback`）に留める。 Component Internal コードジャンプの認知負荷を減らす ロジックのスコープを限定する
10. なぜコードを遠ざけてしまうのか 見かけ上のわかりやすさ ファイルが短いと「整理されている」と錯覚してしま う。 過去の慣習 MVCフレームワークなどの、役割ごとにディレクトリ を分ける古い制約の名残。
11. ファイル内での宣言順序 上から下へ、物語のように
12. Anti-Pattern: Bottom-Up 結論が最後にある 最後まで読まないと「ファイルの目的」がわからない。 ヘルパー関数が延々と続き、読む気を削ぐ。 user-actions. tsx
13. コードは「新聞」のように 見出し（結論） → リード（概要） → 詳細
14. Top-Down Approach 結論から書く ファイルを開いた瞬間に 「何をするモジュールか」が理解できる。 user-actions. tsx
15. 宣言順序の制約 Reactコンポーネントはモジュールのトップレベルで呼ばれることはないので、 アロー関数でも下に定義して問題ない。 Function Declaration (Hoisting OK) Arrow Function (NG)
16. 脳内のリソースを意識しよう ワーキングメモリを節約する記述
17. order-status.tsx Before 認知負荷が高い 「ユーザーがいて、品目があって、残高があって...」 複数の前提条件を同時に記憶しながら読み進める必要があ る。
18. order-status.tsx After 早期リターン 不要な条件（異常系）を先に排除する。 考慮事項を捨てながら読み進められる 関数の最後は必ず正常系 という統一感
19. まとめ 未来の自分への思いやりを。 01 Co-location 関連するコードは近くに。 ディレクトリを分けすぎない。 02 Top-down 重要な処理を先頭に。 新聞のような構成を意識する。
20. Image Sources https://static.vecteezy.com/system/resources/previews/002/907/976/non_2x/maze-background-blue-labyrinth-backdrop-abstract-hi-tech-mosaic-background-modern -technology-backdrop-vector.jpg Source: www.vecteezy.com https://media.istockphoto.com/id/1201229921/vector/vintage-newspaper-design.jpg?s=612612&w=0&k=20&c=Nrqwcj0uZ2SMz8BKY9wXjWR3nEXv0JRVc12RvxhvAc8= Source: www.istockphoto.com