Tweet
Tweet

Slide 1

Slide 1 text

2025年5月31日 さかうぇ (@sakawe_ee) コードリーディング入門！ 先人たちに思いを馳せれば プログラミングがもっと楽しくなる

Slide 2

Slide 2 text

2 新潟県胎内市生まれ。.NET → TypeScript → PHP👈now 2024年3月 コドモン入社。以来、新潟市からフルリモート勤務。 請求系ドメイン担当チームで開発・運用保守に携わっている。 自己紹介 さかうぇ ひかる 経歴 もっぱら家のこと（新築プロジェクト進行中🏠） 最近の気になり @sakawe_ee

Slide 3

Slide 3 text

コードリーディングしてますか？

Slide 4

Slide 4 text

4 コードリーディングしてますか？ ・上から読んでいる ・アタリをつけて読んでいる ・生成AIちゃんに読んでもらう …etc

Slide 5

Slide 5 text

5 では、読んでみましょう！

Slide 6

Slide 6 text

6 準備 ・目的をはっきりさせる ・IDEやエディタを用意する

Slide 7

Slide 7 text

7 準備 ・目的をはっきりさせる ・IDEやエディタを用意する 例題 □ ざっくり全体の流れを捉える □ 朝なのに打刻種別が帰りになってしまう条件を調べる

Slide 8

Slide 8 text

8 全体を捉える

Slide 9

Slide 9 text

9 全体を捉える 　1. 主人公を探す 　2. 構造を捉える 　3. 目的に合わせて焦点を絞る

Slide 10

Slide 10 text

10 コードリーディングの基本 1. 主人公を探す 　● 戻り値など、主人公っぽい変数を探す 　● 初期パーティー（入力パラメータ）を確認する 　● シンタックスハイライトなどを使う

Slide 11

Slide 11 text

11 主人公っぽい変数を探す 戻り値 戻り値 例) $result, $ret

Slide 12

Slide 12 text

12 主人公っぽい変数を探す 戻り値 戻り値 例) $result, $ret echo

Slide 13

Slide 13 text

13 初期パーティーを確認する 入力パラメータ

Slide 14

Slide 14 text

14 初期パーティーを確認する 入力パラメータ シンタックスハイライト で流れを確認

Slide 15

Slide 15 text

15 コードリーディングの基本 2. 構造を捉える 　● 流れに着目する 　● ブロック単位で眺める 　● 発生するイベントを把握する

Slide 16

Slide 16 text

16 ブロック単位で、流れを掴む 初期処理 if サーバ時間との 　 差分チェック if 種別切り分け if 入力チェック 打刻時刻特定 データ更新 打刻種別特定 if 特定施設対応 パラメータ組立て DB更新 if エラー処理 保護者の方への通知 AWS SQSに送信 if 種別 パラメータ組立て 終了処理

Slide 17

Slide 17 text

17 大まかなイベントを把握する 初期処理 if サーバ時間との 　 差分チェック if 種別切り分け if 入力チェック 打刻時刻特定 データ更新 打刻種別特定 if 特定施設対応 パラメータ組立て DB更新 if エラー処理 保護者の方への通知 AWS SQSに送信 if 種別 パラメータ組立て 終了処理 初期処理 時刻決定 DB更新 通知送信 結果返却

Slide 18

Slide 18 text

18 コードリーディングの基本 3. 目的に合わせて焦点を絞る 　● 関連するパラメータ、イベントに着目する 　● 必要な情報に絞って読む

Slide 19

Slide 19 text

19 コードリーディングの基本 3. 目的に合わせて焦点を絞る 　● 関連するパラメータ、イベントに着目する 　● 必要な情報に絞って読む 例題 ✅ ざっくり全体の流れを捉える □ 朝なのに帰りの打刻になってしまう条件を調べる

Slide 20

Slide 20 text

20 焦点を絞って読む 初期処理 if サーバ時間との 　 差分チェック if 種別切り分け if 入力チェック 打刻時刻特定 データ更新 打刻種別特定 if 特定施設対応 パラメータ組立て DB更新 if エラー処理 保護者の方への通知 AWS SQSに送信 if 種別 パラメータ組立て 終了処理 初期処理 時刻決定 DB更新 通知送信 結果返却

Slide 21

Slide 21 text

21 焦点を絞って読む 初期処理 if サーバ時間との 　 差分チェック if 種別切り分け if 入力チェック 打刻時刻特定 データ更新 打刻種別特定 if 特定施設対応 パラメータ組立て DB更新 if エラー処理 保護者の方への通知 AWS SQSに送信 if 種別 パラメータ組立て 終了処理 DB更新

Slide 22

Slide 22 text

22 焦点を絞って読む 初期処理 if サーバ時間との 　 差分チェック if 種別切り分け if 入力チェック 打刻時刻特定 データ更新 打刻種別特定 if 特定施設対応 パラメータ組立て DB更新 if エラー処理 保護者の方への通知 AWS SQSに送信 if 種別 パラメータ組立て 終了処理

Slide 23

Slide 23 text

23 焦点を絞って読む それっぽい名前のメソッド

Slide 24

Slide 24 text

24 焦点を絞って読む 辿ると 打刻種別を決める分岐処理 （しかもコメント付き） それっぽい名前のメソッド

Slide 25

Slide 25 text

もう一つコツがあります

Slide 26

Slide 26 text

26 コードリーディングの基本 4. 役割を理解しようとする ● 実装＝”何をしているか”の前に”何をしたいか”を読む ● 自分だったらどう実装するか仮説を立てる 全体 ブロック メソッド 変数 変数 変数 ブロック 変数

Slide 27

Slide 27 text

27 コードリーディングの基本 4. 役割を理解しようとする ● 実装＝”何をしているか”の前に”何をしたいか”を読む ● 自分だったらどう実装するか仮説を立てる ➡ 実装者の立場で考えるようになる

Slide 28

Slide 28 text

28 コードリーディングの基本 4. 役割を理解しようとする ● 実装＝”何をしているか”の前に”何をしたいか”を読む ● 自分だったらどう実装するか仮説を立てる ➡ 実装者の立場で考え始める そして見えてくるもの…

Slide 29

Slide 29 text

29 コードが書かれた背景が見えてくる ● 過去の状況を推察したり ● 仕様と実装の違いがわかる＝バグに気づいたり ● 本来やりたかったことが見えてきたり

Slide 30

Slide 30 text

辿ると 入退室種別を決める分岐処理 （しかもコメント付き） あれとかこれとか ありがたや！ なんで…？ 通らない分岐 がある

Slide 31

Slide 31 text

辿ると 入退室種別を決める分岐処理 （しかもコメント付き） 通らない分岐 がある ありがたや！ なんで…？ 楽しい！！

Slide 32

Slide 32 text

思いを馳せるコードリーディング 以上！

Slide 33

Slide 33 text

ブースあります