Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseA / JHotDraw_Reverse / problem2 / JHotDraw2_Reverse.html
r-isitani on 25 Sep 2020 23 KB Trelloのチケットの作業項目3つと日本語版の画像の差し替えを行った。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題A4 (機能理解)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題A4 (機能理解)</h1>
  10.         <p>
  11.             課題A4では, JHotDrawの図形の選択機能について見ていきます.<br>
  12.             具体的には,
  13.             <blockquote>
  14.                 「配置された図形がJHotDrawのシステム内部でどのように管理され，図形選択機能の実行によってどのように取り出されて，どのように選択図形として登録されるか?」
  15.             </blockquote>
  16.             JHotDrawはオープンソースの図形描画ツールで, Javaで書かれております.<br>
  17.             ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
  18.         </p>
  19.  
  20.         <hr>
  21.         <h2>前準備</h2>
  22.         <p>
  23.             <p class = "explanation">
  24.                 課題A3が終了した直後は下図のような状態になっているはずです.
  25.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_01.png" class = "threeQuartersSize"></div>
  26.             </p>
  27.             <p class = "explanation">
  28.                 ここで, ステップバックオーバーを2回押してから, ステップオーバーを1回押してください.<br>
  29.                 そのあと, 変数ビュー上で「呼び出し後」を開いて, 戻り値を右クリックしてください.<br>
  30.                 右クリックするとポップアップメニューが現れるので, 「オブジェクトの追加時点に飛ぶ」を選択してください.
  31.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_05.png" class = "threeQuartersSize"></div>
  32.             </p>
  33.             <p class = "explanation">
  34.                 「オブジェクトの追加時点に飛ぶ」を選択すると, selectedFigures に この RectangleFigure クラスのインスタンス (id = 1952912699) が追加された時点である<br>
  35.                 DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目にまで現在の実行時点が遡ります.<br>
  36.                 下図の状態になっていれば前準備は終了です.
  37.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_06.png" class = "threeQuartersSize"></div>
  38.             </p>
  39.         </p>
  40.  
  41.         <hr>
  42.         <h2>機能理解</h2>
  43.         <p>
  44.             現在の実行時点の行は、図形を選択するたびに実行されます. 
  45.         </p>
  46.  
  47.         <p>
  48.             <p class = "explanation">
  49.                 先ほどの前準備にしたがって進めていくと, 下図のように DefaultDrawingView クラスの<br>
  50.                 addToSelection(Figure) メソッド内の780行目で一時停止している状態になっているはずです.<br>
  51.                 この状態になっていれば, <font color="red">ここから時間計測を開始</font>してください. 時間計測はできる限り，1分以内の単位での計測をお願いします.<br>
  52.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_01.png" class = "threeQuartersSize"></div>
  53.             </p>
  54.             <p class= "explanation">
  55.                 まずは,「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  56.                 ここで, ソースコードと変数ビューを見ると, DefaultDrawingView クラスのインスタンス (id = 150367587) が参照するフィールド selectedFigures へは<br>
  57.                 RectangleFigure クラスのインスタンス (id = 1952912699) が追加されていることがわかります.<br>
  58.                 課題A4では, このオブジェクトの追加に関わっている DefaultDrawingView クラスのインスタンスと RectangleFigure クラスのインスタンスについて見ていきます.<br>
  59.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_02.png" class = "threeQuartersSize"></div>
  60.             </p>
  61.             <p class = "explanation">
  62.                 まずは RectangleFigure がどこから来たのかを見るために, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  63.                 ここで, ソースコードを見ると, 先ほど呼び出されていた addToSelection(Figure) メソッドは, ローカル変数 view で参照されているインスタンスに対する呼び出しであり,<br>
  64.                 その実引数としてフィールド anchorFigure の値が渡されていることがわかります.<br>
  65.                 また, 変数ビュー上の this を開くと, このフィールドは DefaultDragTracker クラスのインスタンス (id = 758826749) が参照していることがわかります.
  66.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_03.png" class = "threeQuartersSize"></div>
  67.             </p>
  68.             <p  class = "explanation">
  69.                 ここでは, いったんローカル変数 view の値がどこから来たのかを見ていきます.<br>
  70.                 ステップバックオーバーを4回押して98行目に戻ってください.<br>
  71.                 ソースコードを見ると, getView() メソッドの戻り値を ローカル変数 view に代入していることが確認できます.<br>
  72.                 ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押して getView() メソッドの中に前から入ってください.<br>
  73.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_04.png" class = "threeQuartersSize"></div>
  74.             </p>
  75.             <p class = "explanation">
  76.                 AbstractTool クラスの getView() メソッドに入りました.<br>               
  77.                 ここで, 変数ビュー上の this を開くと, DefaultDragTracker クラスのインスタンス (id = 758826749) が<br>
  78.                 DefaultDraingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  79.                 これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getAcitiveView() メソッドの中に前から入ってください.<br>
  80.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_05.png" class = "threeQuartersSize"></div>
  81.             </p>
  82.             <p class = "explanation">
  83.                 DefaultDrawingEditor クラスの getAcitiveView() メソッドに入りました.<br>
  84.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  85.                 DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
  86.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_06.png" class = "threeQuartersSize"></div>
  87.             </p>
  88.             <p class = "explanation">
  89.                 先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
  90.                 DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
  91.                 呼び出しスタック上で2つ呼び出し元である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  92.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_07.png" class = "threeQuartersSize"></div>
  93.             </p>
  94.             <p class = "explanation">
  95.                 現在は, 呼び出し元である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの98行目を見ています.<br>
  96.                 今までの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) がどのようにして来たのかがわかりました.<br>
  97.                 ここからは, RectangleFigure クラスのインスタンス (id = 1952912699) がどこから来たのかを見ていきます.<br>
  98.                 ここで, 変数ビュー上の this を開き, その中にある anchorFigure を右クリックしてください.<br>
  99.                 右クリックするとポップアップメニューが現れるので, 「値の代時点に飛ぶ」を選択してください.<br>
  100.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_08.png" class = "threeQuartersSize"></div>
  101.             </p>
  102.             <p class = "explanation">
  103.                 「値の追加時点に飛ぶ」を選択すると, DefaulatDragTracker クラスのインスタンス (id = 758826749) に<br>
  104.                 この RectangleFigure クラスのインスタンス (id = 1952912699) が追加された時点である<br>
  105.                 DefaultDragTracker クラスの setDraggedFigure(Figure) メソッドの218行目にまで現在の実行時点が遡ります.<br>
  106.                 まずは, 「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  107.                 ここでは, DefaultDragTracker クラスのフィールド anchorFigure に仮引数 f の値を代入していることが確認できます.<br>
  108.                 仮引数 f の値がどこから来たのかを見るために, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  109.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_09.png" class = "threeQuartersSize"></div>
  110.             </p>
  111.             <p class = "explanation">
  112.                 現在は, 呼び出し元である SelectionTool クラスの getDragTracker() メソッド見ています. <br>
  113.                 ここで 変数ビュー上の 「呼び出し前」および this を開くと, 先ほどの setDraggedFigure (Figure) メソッドが呼び出されている<br>
  114.                 DefaultDragTracker クラスのインスタンス (id = 758826749) は DelegationSelectionTool クラスのインスタンス (id = 5999587451) が参照していることがわかります.<br>
  115.                 引き続き, 仮引数 f の値がどこから来ているのかを見るために, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.<br>
  116.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_10.png" class = "threeQuartersSize"></div>
  117.             </p>
  118.             <p class = "explanation">
  119.                 現在は, 呼び出し元である DelegationSelectionTool クラスの mousePressed(MouseEvent) メソッドを見ています.<br>
  120.                 ここで, ソースコードを見ると, ここではローカル変数 figure の値が実引数として渡されていることが確認できます.<br>
  121.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_11.png" class = "threeQuartersSize"></div>
  122.             </p>
  123.             <p class = "explanation">
  124.                 今度はこのローカル変数 figure の値がどこから来ているのかを見るために, ステップバックオーバーを3回押して270行目に戻ってください.<br>
  125.                 270行目では, ローカル変数 view で参照されるインスタンスに対して findFigure(Point) メソッドが呼び出され, <br>
  126.                 その戻り値がローカル変数 figure に代入されていることが確認できます.<br>
  127.                 この戻り値がどうなっているのかを確認するために, ステップインでこのメソッドの中に前から入ってください.<br>
  128.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_12.png" class = "threeQuartersSize"></div>
  129.             </p>
  130.             <p class = "explanation">
  131.                 DefaultDrawingView クラスの findFigure(Point) メソッドに入りました.<br>
  132.                 ここで, ソースコードを見ると, このメソッドでは getDrawing() メソッドで取得してきたインスタンスに対して,<br>
  133.                 findFigure(Double) メソッドが呼び出され, その戻り値を返していることが確認できます.<br>
  134.                 これを確認したら, ステップインを2回押して, getDrawing() メソッドの中に前から入ってください.<br>
  135.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_13.png" class = "threeQuartersSize"></div>
  136.             </p>
  137.             <p class = "explanation">
  138.                 DefaultDrawingView クラスの getDrawing() メソッドに入りました.<br>
  139.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingView クラスのインスタンス (id = 150367587) が<br>
  140.                 フィールド drawing として QuadTreeDrawing クラスのインスタンス (id = 1583174451) を参照していることがわかります.<br>
  141.                 これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.
  142.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_14.png" class = "threeQuartersSize"></div>
  143.             </p>
  144.             <p class = "explanation">
  145.                 DefaultDrawingView クラスの findFigure(Point) メソッドに戻ってきました.<br>
  146.                 ここでは, まずステップネクストを1回押して viewToDrawingPoint(Point) メソッドを飛ばし, <br>
  147.                 それから, ステップインを1回押して QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの中に前から入ってください.<br>
  148.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_15.png" class = "threeQuartersSize"></div>
  149.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_16.png" class = "threeQuartersSize"></div>
  150.             </p>
  151.             <p class = "explanation">
  152.                 QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドに入りました.<br>
  153.                 ここでは, ステップインを3回押して QuadTree クラスの findContains(Point2D$Double) メソッドの中に前から入ってください.<br>
  154.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_17.png" class = "threeQuartersSize"></div>
  155.             </p>
  156.             <p class = "explanation">
  157.                 QuadTree クラスの findContains(Point2D$Double) メソッドに入りました.<br>
  158.                 ここで, 変数ビュー上の this を開くとQuadTree クラスのインスタンス (id = 808853315) がフィールド root として<br>
  159.                 QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) を参照していることがわかります.<br>
  160.                 ここでは, ステップオーバーを1回押して83行目に進んだあと, ステップインを2回押して,<br>
  161.                 QuadTree$QuadNode クラスの findContains(Point2D$Double) メソッドの中に前から入ってください.<br>
  162.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_18.png" class = "threeQuartersSize"></div>
  163.             </p>
  164.             <p class = "explanation">
  165.                 QuadTree$QuadNode クラスの findContains(Point2D$Double) メソッドに入りました.<br>
  166.                 ここで, 変数ビュー上の this を開くと, QuadTree$QuadNode クラスのインスタンスは<br>
  167.                 フィールド objects として HashMap を参照していることがわかります.<br>
  168.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_19.png" class = "threeQuartersSize"></div>
  169.             </p>
  170.             <p class = "explanation">
  171.                 ここでは, ステップオーバーを3回押して226行目まで進んだあと, ステップネクストを2回押してください.<br>
  172.                 ソースコードを見ると, 224行目の拡張for文で 先ほど確認した HashMap から取得してきた要素を用いて, <br>
  173.                 226行目ではそのうちのキー要素だけを取り出して, それを仮引数 result で参照されているセットに追加していることが確認できます.<br>
  174.                 ここで, 変数ビュー上の「呼び出し後」および「呼び出し前」を開くと, <br>
  175.                 実際に RectangleFigure クラスのインスタンス (id = 1952912699) を取得してから追加していることを確認できます.<br>
  176.                 これを確認したら, ステップオーバーを4回押して呼び出し元に戻ってください.
  177.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_20.png" class = "threeQuartersSize"></div>
  178.             </p>
  179.             <p class = "explanation">
  180.                 呼び出し元である QuadTree クラスの findContains(Point2D$Double) メソッドの84行目に戻ってきました.<br>
  181.                 ここでは, ステップオーバーを1回実行し, このメソッド内ではローカル変数 result に何もオブジェクトが追加されず, <br>
  182.                 89行目の return result に現在の実行時点が移ることを確認してください.<br>
  183.                 これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  184.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_21.png" class = "threeQuartersSize"></div>
  185.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_22.png" class = "threeQuartersSize"></div>
  186.             </p>
  187.             <p class= "explanation">
  188.                 現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドを見ています.<br>
  189.                 ここでは, まずステップオーバーを2回押して129行目まで進んでください.<br>
  190.                 129行目で「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  191.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_23.png" class = "threeQuartersSize"></div>
  192.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_24.png" class = "threeQuartersSize"></div>
  193.             </p>
  194.             <p class = "explanation">
  195.                 現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの129行目にいます.<br>
  196.                 そのあと, ステップネクストを3回実行すると, 現在の実行時点が130行目に移ります.<br>
  197.                 ここで, 変数ビュー上の「呼び出し後」を開き, 戻り値として RectangleFigure クラスのインスタンス (id = 1952912699) があることを確認してください.<br>
  198.                 これを確認したら, 呼び出しスタック上で2つ呼び出し元をクリックしてください.<br>
  199.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_25.png" class = "threeQuartersSize"></div>
  200.             </p>
  201.             <p class = "explanation">
  202.                 ここまでの結果から RectangleFigure クラスのインスタンスに関わる各オブジェクトの関係について, 以下のことがわかりました.<br>
  203.                 <ol>
  204.                     <li>RectangleFigure クラスのインスタンス (id = 1952912699) は QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) が参照している.</li>
  205.                     <li>QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) は QuadTree クラスのインスタンス (id = 808853315) が参照している.</li>
  206.                     <li>QuadTree クラスのインスタンス (id = 808853315) は QuadTreeDrawing クラスのインスタンス (id = 1583174451) が参照している.</li>
  207.                     <li>QuadTreeDrawing クラスのインスタンス (id = 1583174451) は DefaultDrawingView クラスのインスタンス (id = 150367587) が参照している.</li>
  208.                 </ol>
  209.                 ここからは, DefaultDrawingView クラスのインスタンス (id = 150367587) がどこから来たのかを見ていきます.<br>
  210.                 現在は, 呼び出し元である SelectionTool クラスの mousePressed(MouseEvent) メソッドの270行目を見ています.<br>
  211.                 ここで, ソースコードを見ると, このDefaultDrawingView クラスのインスタンスはローカル変数 view で参照されていることが確認できます.
  212.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_26.png" class = "threeQuartersSize"></div>
  213.             </p>
  214.             <p class = "explanation">
  215.                 このローカル変数 view の値がどこから来たのかを見るために, ステップバックオーバーを10回押して228行目にまで戻ってください.<br>
  216.                 228行目では, ローカル変数 view に getView() メソッドの戻り値を代入していることが確認できます.<br>
  217.                 ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押して getView() メソッドの中に前から入ってください.<br>
  218.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_27.png" class = "threeQuartersSize"></div>
  219.             </p>
  220.             <p class = "explanation">
  221.                 AbstractTool クラスの getView() メソッドに入りました.<br>
  222.                 ここで, 変数ビュー上の this を開くと, DelegationSelectionTool クラスのインスタンス (id = 599587451) が<br>
  223.                 DefaultDraingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  224.                 これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getAcitiveView() メソッドの中に前から入ってください.<br>
  225.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_28.png" class = "threeQuartersSize"></div>
  226.             </p>
  227.             <p class = "explanation">
  228.                 DefaultDrawingEditor クラスの getAcitiveView() メソッドに入りました.<br>
  229.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  230.                 DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
  231.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_29.png" class = "threeQuartersSize"></div>
  232.             </p>
  233.             <p class = "explanation">
  234.                 先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
  235.                 DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
  236.                 呼び出しスタック上で2つ呼び出し元をクリックしてください.<br>
  237.                 ここで, 課題A4は終了です. <font color="red">時間計測を終了</font>してください.
  238.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_30.png" class = "threeQuartersSize"></div>
  239.             </p>
  240.         </p>
  241.         <hr>
  242.         <p>
  243.             課題A4の機能理解が終了しましたら, 以下のアンケートにお答えください.
  244.             <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSf8dwsDytVTD9Meex-jQ0ISnRIYu8xX-ExYU97Fr_anBErDdA/viewform" target = "_blank">アンケート回答</a></div>           
  245.         </p>
  246.         <a href="JHotDraw2_Reverse_Delta.html">次へ</a>
  247.     </body>
  248. </html>