Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
読みやすいコードとはなにか? 未来の自分とチームへの思いやり
Search
じょうげん
December 14, 2025
0
30
読みやすいコードとはなにか? 未来の自分とチームへの思いやり
じょうげん
December 14, 2025
Tweet
Share
More Decks by じょうげん
See All by じょうげん
Yamada UIドキュメント v2紹介
bmthd
0
530
TanStack DB ~状態管理の新しい考え方~
bmthd
2
880
コールバックchildrenでロジックの見通しを改善する
bmthd
0
22
Formの複雑さに立ち向かう
bmthd
1
3.2k
Featured
See All Featured
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Practical Orchestrator
shlominoach
190
11k
What the history of the web can teach us about the future of AI
inesmontani
PRO
0
370
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
680
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
Designing Experiences People Love
moore
143
24k
A Modern Web Designer's Workflow
chriscoyier
698
190k
sira's awesome portfolio website redesign presentation
elsirapls
0
87
Done Done
chrislema
186
16k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Transcript
読みやすいコードとは なにか? 未来の自分とチームへの思いやり じょうげん / React Tokyoミートアップ 2025/12/12
私は誰? 👋 じょうげん と申します フリーランスエンジニア React Tokyo サポーター コードの可読性にこだわりあり
https://zenn.dev/bmth/articles/interface-props-ex tends
コードの迷宮
Co-locatio n 関連するコードは近くに配置する
それぞれのコードが遠くにある 機能ごとにバラバラの場所に配置されている。 Directory Structure (Bad) あっちこっちへファイルジャンプが必要 全体像が見えにくい 「hooks」や「types」フォルダに縛られている
ディレクトリを近くに Package by Feature 機能単位でまとめる(コロケーション)。 Package by Feature (Good) 関連ファイルが隣にある安心感
ディレクトリ構造が浅くなる 機能の削除や移動が簡単
関連するコードは近くに そのファイルでしか使わないなら、 同じファイルに定義 してしまう。 「1ファイル1コンポーネント」のルールに縛られすぎない。 文脈が分断された短いファイルより、文脈が繋がった長いファイルの方が 読みやすい場合が多い。 user-list. tsx
同じ関数内に定義する 単純な処理なら、無理に外へ切り出さず コンポーネント内(または `useCallback`)に留める。 Component Internal コードジャンプの認知負荷を減らす ロジックのスコープを限定する
なぜコードを遠ざけてしまうのか 見かけ上のわかりやすさ ファイルが短いと「整理されている」と錯覚してしま う。 過去の慣習 MVCフレームワークなどの、役割ごとにディレクトリ を分ける古い制約の名残。
ファイル内での宣言順序 上から下へ、物語のように
Anti-Pattern: Bottom-Up 結論が最後にある 最後まで読まないと「ファイルの目的」がわからない。 ヘルパー関数が延々と続き、読む気を削ぐ。 user-actions. tsx
コードは「新聞」のように 見出し(結論) → リード(概要) → 詳細
Top-Down Approach 結論から書く ファイルを開いた瞬間に 「何をするモジュールか」が理解できる。 user-actions. tsx
宣言順序の制約 Reactコンポーネントはモジュールのトップレベルで呼ばれることはないので、 アロー関数でも下に定義して問題ない。 Function Declaration (Hoisting OK) Arrow Function (NG)
脳内のリソースを意識しよう ワーキングメモリを節約する記述
order-status.tsx Before 認知負荷が高い 「ユーザーがいて、品目があって、残高があって...」 複数の前提条件を同時に記憶しながら読み進める必要があ る。
order-status.tsx After 早期リターン 不要な条件(異常系)を先に排除する。 考慮事項を捨てながら読み進められる 関数の最後は必ず正常系 という統一感
まとめ 未来の自分への思いやりを。 01 Co-location 関連するコードは近くに。 ディレクトリを分けすぎない。 02 Top-down 重要な処理を先頭に。 新聞のような構成を意識する。
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=612612&w=0&k=20&c=Nrqwcj0uZ2SMz8BKY9wXjWR3nEXv0JRVc12RvxhvAc8= Source: www.istockphoto.com