「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
by
Maki Hayashi
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
「とりあえず動く」コードはよい、 「読みやすい」コードはもっとよい まきまき 2024/12/22 PHPカンファレンス2024 1
Slide 2
Slide 2 text
まきまき @_mkmk884 愛媛 → 京都 → 小田原 NE株式会社 アプリケーションエンジニア PHPカンファレンス小田原 コアスタッフ 2
Slide 3
Slide 3 text
新卒1〜2年目の頃…
Slide 4
Slide 4 text
最初は「とりあえず動く」コードを書いていた 4 🔰 ぴちぴちの私 実力がない 納期やばい 設計ワカラン ドメイン知識ない テスト…? 💦 チーム? 自分で手一杯だけど?
Slide 5
Slide 5 text
最初は「とりあえず動く」コードを書いていた 5 🔰 頼む… 💧 ぴちぴちの私 動いて くれ…
Slide 6
Slide 6 text
最初は「とりあえず動く」コードを書いていた 6 🙏 頼む… 💧 ぴちぴちの私 動いて くれ… 祈り駆動開発
Slide 7
Slide 7 text
「とりあえず動く」コード 7 ● 要件通りに動いている ● 開発者が”完全に理解”をしている ● テストコードがなかったり、あっても見たいものを 正しくテストできていなかったりする
Slide 8
Slide 8 text
「とりあえず動く」コード 8 ユーザーに提供したい価値が届く ● 要件通りに動いている よい✌
Slide 9
Slide 9 text
年月は経ち…
Slide 10
Slide 10 text
「読みやすい」コードに救われ、意識しはじめた 10 どこに追加すれば いいかわかる 大体どの辺りに 書いてありそうか わかる 意図がわかる !
Slide 11
Slide 11 text
「読みやすい」コード 11 ● 誰が読んでも読む時間が短縮される ● シンプル ● 振る舞いの単位で処理がまとめられている ● 適度にコメントがある ● 関数名・変数名で意図がわかる ● IDEが認知しやすいコード (コードジャンプができる、Docコメントがある等) コードジャンプできない例:動的にインスタンス化を行っている
Slide 12
Slide 12 text
「読みやすい」コード 12 ● 誰が読んでも読む時間が短縮される ● シンプル ● 振る舞いの単位で処理がまとめられている ● 適度にコメントがある ● 関数名・変数名で意図がわかる ● IDEが認知しやすいコード (コードジャンプができる、Docコメントがある等) コードジャンプできない例:動的にインスタンス化を行っている
Slide 13
Slide 13 text
(余談)コードジャンプができない例 32
Slide 14
Slide 14 text
「読みやすい」コード 13 ● 誰が読んでも読む時間が短縮される 変更箇所・影響範囲がパッとわかる 変更が早くでき、変更に強いものになる もっとよい✌
Slide 15
Slide 15 text
「とりあえず動く」コードと「読みやすい」コード 14 「とりあえず動く」コード 「読みやすい」コード 早く価値を増大できる 仕様変更があっても 価値を持続できる 価値を提供すること ができる
Slide 16
Slide 16 text
● コードを理解しやすくなる 「読みやすい」コードが他者に与える影響 15 → 工数が短縮される → バグに気づきやすくなる → 学習コストを削減できる ● 変更範囲や影響範囲を把握しやすくなり、 見積もりもしやすくなる
Slide 17
Slide 17 text
● コードを理解しやすくなる 「読みやすい」コードが他者に与える影響 16 → 工数が短縮される → バグに気づきやすくなる → 学習コストを削減できる ● 変更範囲や影響範囲を把握しやすくなり、 見積もりもしやすくなる 安 心
Slide 18
Slide 18 text
「とりあえず動く」→「読みやすい」 にすればもっともっとよい💪
Slide 19
Slide 19 text
リファクタリング やっていき!
Slide 20
Slide 20 text
知識・経験を積むごとに力がつき…
Slide 21
Slide 21 text
リファクタリングが楽しくなってきた 20 “完全に理解した” の私 はまっていく感じ パズルみたい めちゃくちゃ 勉強になる あの本に書いて あったことを 適用してみよう ♪
Slide 22
Slide 22 text
リファクタリングが自分に与える影響 21 ● 仕様を把握することができる ● バグの発生率が下がるため、安心して開発できる ● 設計力やコーディングスキルが向上する → 向上する実感も得られる
Slide 23
Slide 23 text
リファクタリングが自分に与える影響 22 ● 仕様を把握することができる ● バグの発生率が下がるため、安心して開発できる ● 設計力やコーディングスキルが向上する → 向上する実感も得られる 本や他者から学んだ 知識を自分も 実践できる…!
Slide 24
Slide 24 text
せっかくリファクタリングするなら コスパよく着実に変更していきたい!
Slide 25
Slide 25 text
リファクタリングをする場所 24 ● 拡張することが確定しているところ ○ チーム開発で別のメンバーが触る等 ● コミットが多いところ ○ つまり、変更・バグがよく発生するところ ○ 逆にいうと「とりあえず動く」コードも長い期間変更 がなければ、そのままで十分 ● テストがしっかり書けている・書かれているところ
Slide 26
Slide 26 text
リファクタリングをする場所 25 ● 拡張することが確定しているところ ○ チーム開発で別のメンバーが触る等 ● コミットが多いところ ○ つまり、変更・バグがよく発生するところ ○ 逆にいうと「とりあえず動く」コードも長い期間変更 がなければ、そのままで十分 ● テストがしっかり書けている・書かれているところ
Slide 27
Slide 27 text
リファクタリング自体も 安心して行いたい
Slide 28
Slide 28 text
不安の壁 27 正しく動くかどうかがわからないまま変更するのは不安 完成の状態(結果・仕様)がわからないと 何をしていけばいいのかもわからない ? 改善後も 正しく動いている から大丈夫だよ ↑ 誰かに言ってほしいですよね? 👀
Slide 29
Slide 29 text
「意味のあるテストコード」が安心をもたらす 28 改善後も 正しく動いている から大丈夫だよ さまざまな制約が「きれいな」どころか「動作する」の前にも立ちふさがる。 私たちは、不安を抱えて考え込んでしまうのをやめにして、代わりに自動化 されたテストによって開発を推し進める。 テスト駆動開発 まえがき
Slide 30
Slide 30 text
「意味のあるテストコード」が安心をもたらす 29 ここでいう 意味のあるテストコード = 信頼ができるテストコード ● エッジケースや異常系も カバーしている ● 実装の細部に依存せずに、 振る舞いをテストしている
Slide 31
Slide 31 text
まとめ 30 ● 「とりあえず動く」コードは、価値を提供できるため よい ● その後も価値を増大、持続しようとしたときに 「読みやすい」コードが効果を発揮してくる ● 変更箇所が多いところからリファクタリングをすると コスパがいい ● 安心してリファクタリングを行うために 意味のあるテストコードが必要
Slide 32
Slide 32 text
「読みやすい」コードにして 自分にも他者にも 安心を届けていきましょう🙌