TraceDebuggerExperiment/courseA/JHotDraw_Reverse/problem2/JHotDraw2_Reverse.html at 14cec051acf22a1a241b30f96de1321f058cef0b

Fork: 0
nitta-lab / TraceDebuggerExperiment
Find file
Newer
Older
TraceDebuggerExperiment / courseA / JHotDraw_Reverse / problem2 / JHotDraw2_Reverse.html
n-nitta on 29 Sep 2020 24 KB 課題の内容とソースコード解析操作が繋がるように説明を加えた。
Raw Blame History
<!DOCTYPE HTML>
<html lang = "ja">
    <head>
        <title>課題A4 (機能理解)</title>
        <meta charset = "UTF-8">
        <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
    </head>
    <body>
        <h1>課題A4 (機能理解)</h1>
        <p>
            課題A4では, JHotDrawの図形の選択機能について見ていきます.<br>
            具体的には,
            <blockquote>
                「配置された図形がJHotDrawのシステム内部でどのように管理され，図形選択機能の実行によってどのように取り出されて，どのように選択図形として登録されるか?」
            </blockquote>
            を理解することを目指して, 以下のようにトレースデバッガを操作していきます.<br>
            ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
        </p>
 
        <hr>
        <h2>前準備</h2>
        <p>
            <p class = "explanation">
                課題A3 (接近過程抽出) の終了直後は下図のような状態になっているはずです.
                <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_01.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                まずは, ステップバックオーバーを2回押してから, ステップオーバーを1回押してください.<br>
                ここで, 変数ビュー上の「呼び出し後」のメソッド名が Iterator.next() であることを確認してください.<br>
                それを確認したら, 変数ビュー上で「呼び出し後」を開いて, 戻り値を右クリックしてください.<br>
                右クリックするとポップアップメニューが現れるので, 「オブジェクトの追加時点に飛ぶ」を選択してください.
                <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_05.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                「オブジェクトの追加時点に飛ぶ」を選択すると, selectedFigures に この RectangleFigure クラスのインスタンス (id = 1952912699) が追加された時点である<br>
                DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目にまで現在の実行時点が遡ります.<br>
                下図の状態になっていれば前準備は終了です.
                <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_06.png" class = "threeQuartersSize"></div>
            </p>
        </p>
 
        <hr>
        <h2>機能理解</h2>
        <p>
            Figure クラスは図形を表す JHotDraw のクラスです.<br>
            また, RectangleFigure クラスは矩形を表す JHotDraw のクラスで, Figure クラスの子孫クラスにあたります.<br>
            現在の実行時点の行は、図形を選択するたびに実行されます.
        </p>
 
        <p>
            <p class = "explanation">
                先ほどの前準備にしたがって進めていくと, 下図のように DefaultDrawingView クラスの<br>
                addToSelection(Figure) メソッド内の780行目で一時停止している状態になっているはずです.<br>
                この状態になっていれば, <font color="red">ここから時間計測を開始</font>してください. 時間計測はできる限り，1分以内の単位での計測をお願いします.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_01.png" class = "threeQuartersSize"></div>
            </p>
            <p class= "explanation">
                まずは,「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
                ここで, ソースコードと変数ビューを見ると, DefaultDrawingView クラスのインスタンス (id = 150367587) のフィールド selectedFigures が参照しているセットへは<br>
                RectangleFigure クラスのインスタンス (id = 1952912699) が追加されていることがわかります.<br>
                この追加によって, この RectangleFigure クラスのインスタンスに対応する矩形が選択状態になります.<br>
                課題A4では, JHotDrawのシステム内部で, 配置された図形がどのように管理されているかを調べるため, この RectangleFigure クラスのインスタンスがどこから来たのかを確認していきます.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_02.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                まずは RectangleFigure がどこから来たのかを見るために, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
                ここで, ソースコードを見ると, 先ほど呼び出されていた addToSelection(Figure) メソッドは, ローカル変数 view で参照されているインスタンスに対する呼び出しであり,<br>
                その実引数としてフィールド anchorFigure の値が渡されていることがわかります.<br>
                また, 変数ビュー上の this を開くと, このフィールドは DefaultDragTracker クラスのインスタンス (id = 758826749) のフィールドであることがわかります.
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_03.png" class = "threeQuartersSize"></div>
            </p>
            <p  class = "explanation">
                ここでは, いったんローカル変数 view の値がどこから来たのかを見ていきます.<br>
                ステップバックオーバーを4回押して98行目に戻ってください.<br>
                ソースコードを見ると, getView() メソッドの戻り値を ローカル変数 view に代入していることが確認できます.<br>
                ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押して getView() メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_04.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                AbstractTool クラスの getView() メソッドに入りました.<br>               
                ここで, 変数ビュー上の this を開くと, DefaultDragTracker クラスのインスタンス (id = 758826749)  の editor フィールドが<br>
                DefaultDrawingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
                これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getAcitiveView() メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_05.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                DefaultDrawingEditor クラスの getActiveView() メソッドに入りました.<br>
                ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) の<br>
                フィールド activeView が DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_06.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
                DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
                呼び出しスタック上で2つ呼び出し元である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_07.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                現在は, 呼び出し元である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの98行目を見ています.<br>
                今までの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) がどのようにして来たのかがわかりました.<br>
                ここからは, RectangleFigure クラスのインスタンス (id = 1952912699) がどこから来たのかを見ていきます.<br>
                ここで, 変数ビュー上の this を開き, その中にある anchorFigure を右クリックしてください.<br>
                右クリックするとポップアップメニューが現れるので, 「値の代入時点に飛ぶ」を選択してください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_08.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                「値の代入時点に飛ぶ」を選択すると, DefaultDragTracker クラスのインスタンス (id = 758826749) の anchorFigure フィールドに<br>
                この RectangleFigure クラスのインスタンス (id = 1952912699) への参照が代入された時点である<br>
                DefaultDragTracker クラスの setDraggedFigure(Figure) メソッドの218行目にまで現在の実行時点が遡ります.<br>
                まずは, 「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
                ここでは, DefaultDragTracker クラスのフィールド anchorFigure に仮引数 f の値を代入していることが確認できます.<br>
                仮引数 f の値がどこから来たのかを見るために, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_09.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                現在は, 呼び出し元である SelectionTool クラスの getDragTracker() メソッド見ています. <br>
                ここで 変数ビュー上の 「呼び出し前」および this を開くと, 先ほどの setDraggedFigure (Figure) メソッドが呼び出されている<br>
                DefaultDragTracker クラスのインスタンス (id = 758826749) は, DelegationSelectionTool クラスのインスタンス (id = 5999587451) の<br>
                dragTracker フィールドによって参照されていることがわかります.<br>
                引き続き, 仮引数 f の値がどこから来ているのかを見るために, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_10.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                現在は, 呼び出し元である DelegationSelectionTool クラスの mousePressed(MouseEvent) メソッドを見ています.<br>
                ここで, ソースコードを見ると, ここではローカル変数 figure の値が実引数として渡されていることが確認できます.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_11.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                今度はこのローカル変数 figure の値がどこから来ているのかを見るために, ステップバックオーバーを3回押して270行目に戻ってください.<br>
                270行目では, ローカル変数 view で参照されるインスタンスに対して findFigure(Point) メソッドが呼び出され, <br>
                その戻り値がローカル変数 figure に代入されていることが確認できます.<br>
                この戻り値がどうなっているのかを確認するために, ステップインでこのメソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_12.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                DefaultDrawingView クラスの findFigure(Point) メソッドに入りました.<br>
                ここで, ソースコードを見ると, このメソッドでは getDrawing() メソッドで取得してきたインスタンスに対して,<br>
                findFigure(Point2D$Double) メソッドが呼び出され, その戻り値を返していることが確認できます.<br>
                これを確認したら, ステップインを2回押して, getDrawing() メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_13.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                DefaultDrawingView クラスの getDrawing() メソッドに入りました.<br>
                ここで, 変数ビュー上の this を開くと, DefaultDrawingView クラスのインスタンス (id = 150367587) の<br>
                フィールド drawing が QuadTreeDrawing クラスのインスタンス (id = 1583174451) を参照していることがわかります.<br>
                これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_14.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                DefaultDrawingView クラスの findFigure(Point) メソッドに戻ってきました.<br>
                ここでは, まずステップネクストを1回押して viewToDrawingPoint(Point) メソッドの呼び出しを飛ばし, <br>
                それから, ステップインを1回押して QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_15.png" class = "threeQuartersSize"></div>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_16.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドに入りました.<br>
                ここでは, ステップインを3回押して QuadTree クラスの findContains(Point2D$Double) メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_17.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                QuadTree クラスの findContains(Point2D$Double) メソッドに入りました.<br>
                ここで, 変数ビュー上の this を開くとQuadTree クラスのインスタンス (id = 808853315) のフィールド root が<br>
                QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) を参照していることがわかります.<br>
                ここでは, ステップオーバーを1回押して83行目に進んだあと, ステップインを2回押して,<br>
                QuadTree$QuadNode クラスの findContains(Point2D$Double, HashSet) メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_18.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                QuadTree$QuadNode クラスの findContains(Point2D$Double, HashSet) メソッドに入りました.<br>
                ここで, 変数ビュー上の this を開くと, QuadTree$QuadNode クラスのインスタンスの<br>
                フィールド objects が HashMap のインスタンスを参照していることがわかります.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_19.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                ここでは, ステップオーバーを3回押して226行目まで進んだあと, ステップネクストを2回押してください.<br>
                ソースコードを見ると, 224行目の拡張for文で 先ほど確認した HashMap から取得してきた要素を用いて, <br>
                226行目ではそのうちのキー要素だけを取り出して, それを仮引数 result で参照されている HashSet オブジェクトに追加していることが確認できます.<br>
                ここで, 変数ビュー上の「呼び出し後」 (Entry.getKey() の呼び出し後) および「呼び出し前」 (HasSet.add(Object) の呼び出し前) を開くと, <br>
                実際に RectangleFigure クラスのインスタンス (id = 1952912699) を取得してから追加していることを確認できます.<br>
                これを確認したら, ステップオーバーを4回押して呼び出し元に戻ってください.
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_20.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                呼び出し元である QuadTree クラスの findContains(Point2D$Double) メソッドの84行目に戻ってきました.<br>
                ここでは, ステップオーバーを1回押して, このメソッド内ではローカル変数 result に何もオブジェクトが追加されず, <br>
                89行目の return result に現在の実行時点が移ることを確認してください.<br>
                これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_21.png" class = "threeQuartersSize"></div>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_22.png" class = "threeQuartersSize"></div>
            </p>
            <p class= "explanation">
                現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドを見ています.<br>
                ここでは, まずステップオーバーを2回押して129行目まで進んでください.<br>
                129行目で「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_23.png" class = "threeQuartersSize"></div>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_24.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの129行目にいます.<br>
                そのあと, ステップネクストを3回実行すると, 現在の実行時点が130行目に移ります.<br>
                ここで, 変数ビュー上の「呼び出し後」 (Iterator.next() の呼び出し後) を開き, 戻り値が RectangleFigure クラスの<br>
                インスタンス (id = 1952912699) であることを確認してください.<br>
                これを確認したら, 呼び出しスタック上で2つ呼び出し元をクリックしてください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_25.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                ここまでの結果から RectangleFigure クラスのインスタンスに関わる各オブジェクトの関係について, 以下のことがわかりました.<br>
                <ol>
                    <li>RectangleFigure クラスのインスタンス (id = 1952912699) は QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) が参照している.</li>
                    <li>QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) は QuadTree クラスのインスタンス (id = 808853315) が参照している.</li>
                    <li>QuadTree クラスのインスタンス (id = 808853315) は QuadTreeDrawing クラスのインスタンス (id = 1583174451) が参照している.</li>
                    <li>QuadTreeDrawing クラスのインスタンス (id = 1583174451) は DefaultDrawingView クラスのインスタンス (id = 150367587) が参照している.</li>
                </ol>
                ここからは, DefaultDrawingView クラスのインスタンス (id = 150367587) がどこから来たのかを見ていきます.<br>
                現在は, 呼び出し元である SelectionTool クラスの mousePressed(MouseEvent) メソッドの270行目を見ています.<br>
                ここで, ソースコードを見ると, この DefaultDrawingView クラスのインスタンスはローカル変数 view で参照されていることが確認できます.
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_26.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                このローカル変数 view の値がどこから来たのかを見るために, ステップバックオーバーを10回押して228行目にまで戻ってください.<br>
                228行目では, ローカル変数 view に getView() メソッドの戻り値を代入していることが確認できます.<br>
                ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押して getView() メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_27.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                AbstractTool クラスの getView() メソッドに入りました.<br>
                ここで, 変数ビュー上の this を開くと, DelegationSelectionTool クラスのインスタンス (id = 599587451) の editor フィールドが<br>
                DefaultDrawingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
                これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getAcitiveView() メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_28.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                DefaultDrawingEditor クラスの getAcitiveView() メソッドに入りました.<br>
                ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) の<br>
                フィールド activeView が DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_29.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
                DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
                呼び出しスタック上で2つ呼び出し元をクリックしてください.<br>
                ここで, 課題A4は終了です. <font color="red">時間計測を終了</font>してください.
                <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_30.png" class = "threeQuartersSize"></div>
            </p>
        </p>
        <hr>
        <p>
            課題A4の機能理解が終了しましたら, 以下のアンケートにお答えください.
            <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSf8dwsDytVTD9Meex-jQ0ISnRIYu8xX-ExYU97Fr_anBErDdA/viewform" target = "_blank">アンケート回答</a></div>           
        </p>
        <a href="JHotDraw2_Reverse_Delta.html">次へ</a>
    </body>
</html>