🍮

【初心者】ソースコードリーディングのコツ

2023/01/07に公開約1,200字

1.はじめに

・既存のソースコードを読むコツについて説明しています。
・実務(といっても不十分ですが。。。)から得た経験を基にした記事になります。
 内容は更新していきます。。。!

2.ソースコードリーディングのコツ

①.先ずはアプリなどを動かして、どのような機能が備わっているのか確認します。
  確認できた内容をメモに残すと便利です。
 
②.確認した機能と関係があるコードを見比べていきます。
  最初は大きくソースコード(どのような関数があるのか等)を把握します。
  分かったことについての記録(キャプチャも使用)も残していきます。
  コードリーディングが苦手な方にはおススメです。。。!

③.大きくソースコードを把握できたら、細かくソースコードを読んでいきます。

3.コードリーディングをする際に着目する点

・注目している機能と関係があるid属性値・class属性値・関数名などを把握します。
  
・変数や定数に格納されている値を、コンソールに表示してみます。

・ソースコードをコメントアウトします。
 コメントアウト前後でアプリの挙動に変化があるか確認します。

4.デベロッパーツールを積極的に活用する

〇はじめに
・ソースコードを読んでいく際、デベロッパーツールを積極的に使用していきます。
 抑えておきたいデベロッパーツールの機能を列挙していきます。

〇ブレークポイントを張る
・ブレークポイントを張ることで、プログラムの実行を途中で止めることができます。

〇ステップ実行
・デベロッパーツールには「ステップ実行」という機能が備わっています。
 
ステップインを使用すると、処理の流れを1行ずつ追うことができます。

ステップイン・ステップアウトを使用すると、大まかな処理の流れを
 追うことができます。

5.具体例で説明すると...

〇機能例
 ・ボタンをクリックし、画面上の線にカーソルを合わせるとその線の色が青色に変化。
 ・青色に変化した線をクリックすると赤色に変化。
 以上の機能が備わっています。

〇コードリーディングの流れ
①.機能毎に、大きくコードを把握します。
  ・ボタンのクリック機能に関係している関数
  ・カーソルを合わせた線が青色に変化する機能に関係している関数
  ・青色に変化した線をクリックすると赤色に変化する機能に関係している関数

②.コードの大まかな把握が終わったら、各関数の記述を細かく追っていきます。
   ここでデベロッパーツールを積極的に活用していきます。

6.その他

参考:
ChromeのデベロッパーツールでJavaScriptをデバッグする方法(2022年版)

Discussion

ログインするとコメントできます