Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseB / JHotDraw_Forward / problem2 / JHotDraw2_Forward.html
n-nitta on 25 Sep 2020 35 KB コースAおよびBのすべての課題を繋げた。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題B2 (機能理解)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題B2 (機能理解)</h1>
  10.         <p>
  11.             課題B2では, JHotDrawの図形の選択機能について見ていきます.<br>
  12.             JHotDrawはオープンソースの図形描画ツールで, Javaで書かれております.<br>
  13.             ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
  14.         </p>
  15.  
  16.         <hr>
  17.         <h2>前準備</h2>
  18.         <p>
  19.             <p class = "explanation">
  20.                 課題B1と同様に「トレースデバッガ(順方向)」のパースペクティブを開いてください.<br>
  21.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_01.png" class = "threeQuartersSize"></div>
  22.             </p>
  23.             <p class = "explanation">
  24.                 ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.<br>
  25.                 ブレークポイントを入れたら, 全てのブレークポイントにチェックが入った状態にしてください.<br>
  26.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_03.png" class = "threeQuartersSize"></div>
  27.             </p>
  28.             <p class = "explanation">
  29.                 デバッグ実行してください.<br>
  30.                 すると, まずは DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの98行目で実行時点が一時停止します.<br>
  31.                 そのまま, 再開ボタンを4回押して, 2回目の DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの116行目にまで進んでください.<br>
  32.                 ここで, ステップインを押して DefaultDrawingView クラスの getSelectedFigures() メソッドの中に入ってください.<br>
  33.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_05.png" class = "threeQuartersSize"></div>
  34.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_07.png" class = "threeQuartersSize"></div>
  35.             </p>
  36.             <p class = "explanation">
  37.                 先ほどの操作によって, 現在は DefaultDrawingView クラスの getSelectedFigures() メソッドの931行目にいます.<br>
  38.                 ここで, フィールド selectedFigures に RectangleFigure クラスのインスタンス (id = 1952912699) を実際に追加しているのはどこなのかを見ていきます.<br>
  39.                 ソースコード中の selectedFigures にカーソルを入れ, そのフィールドに対してオブジェクトを追加している全ての行にブレークポイントを入れてください.<br>
  40.                 今回は, DefaultDrawingView クラスの780行目と815行目と889行目の三か所が該当します.<br>
  41.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_10.png" class = "threeQuartersSize"></div>
  42.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_11.png" class = "threeQuartersSize"></div>
  43.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_12.png" class = "threeQuartersSize"></div>
  44.             </p>
  45.             <p class = "explanation">
  46.                 DefaultDrawingView クラスの780行目と815行目と889行目にブレークポイントを入れた状態で,<br>
  47.                 ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.<br>
  48.                 すると, 実際にトレース上に実行された記録が残っている780行目にだけブレークポイントが新規追加されます.<br>
  49.                 そのあと, ブレークポイントビュー上で下記3つのブレークポイントのチェックを外してください.<br>
  50.                 <ol>
  51.                     <li>159行目 DefaultDragTracker.mouseDragged(MouseEvent)</li>
  52.                     <li>&nbsp;&nbsp;98行目 DefaultDragTracker.mousePressed(MouseEvent)</li>
  53.                     <li>116行目 DefaultDragTracker.mousePressed(MouseEvent)</li>
  54.                 </ol>
  55.                 ここで, デバッグ実行をいったん停止してください.<br>
  56.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_13.png" class = "threeQuartersSize"></div>
  57.             </p>
  58.             <p class = "explanation">
  59.                 デバッグ実行を押すと, DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目で止まります.<br>
  60.                 ここで, 再開ボタンを押して, このあと実行がどのように移り変わるかを確認していきます.<br>
  61.                 まずは再開ボタンを1回押すと, 再び780行目に止まることが確認できます.<br>
  62.                 そこからさらに再開ボタンを押していくと, 現在の実行時点は118行目に2回止まることが確認できます.<br>
  63.                 これを確認したら, デバッグ実行をいったん終了してから再び実行して, 再開ボタンを1回押して2回目の780行目に進めてください.<br>
  64.                 下図の状態になれば, ここで課題2の前準備は終了です.
  65.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_14.png" class = "threeQuartersSize"></div>
  66.             </p>
  67.         </p>
  68.  
  69.         <hr>
  70.         <h2>機能理解</h2>
  71.         <p>
  72.             ブレークポイントを置いた行は、図形を選択するたびに実行されます.
  73.         </p>
  74.  
  75.         <p>
  76.             <p class = "explanation">
  77.                 先ほどの前準備にしたがって進めていくと, 下図のように DefaultDrawingView クラスの<br>
  78.                 addToSelection(Figure) メソッド内の780行目で一時停止している状態になっているはずです.<br>
  79.                 この状態になっていれば, ここから時間計測を開始してください.<br>
  80.                 DefaultDrawingView クラスの addToSelection(Figures) メソッドの780行目では, フィールド selectedFigures に<br>
  81.                 仮引数 f で参照される RectangleFigure クラスのインスタンス (id = 1952912699) を追加していることが確認できます.<br>
  82.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_01.png" class = "threeQuartersSize"></div>
  83.             </p>
  84.             <p class = "explanation">
  85.                 まずは, この仮引数 figure の値がどこから来たのかを見るために, 呼び出しスタック上で1つ呼び出し元をクリックして戻ってください.<br>
  86.                 ソースコードを見ると, ここではローカル変数 view で参照されているインスタンスに対して先ほどの addToSelection(Figure) メソッドが呼び出されていることがわかります.<br>
  87.                 ここで, 変数ビュー上で「呼び出し前」および this を開いてオブジェクトのIDを確認してください.<br>
  88.                 すると, view の値は DefaultDrawingView クラスのインスタンス (id = 150367587) であり, その引数には DefaultDragTracker クラスのインスタンス (id = 758826749) が<br>
  89.                 フィールド anchorFigure として参照している RectangleFigure クラスのインスタンス (id = 1952912699) が渡されていることがわかります.<br>
  90.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_02.png" class = "threeQuartersSize"></div>
  91.             </p>
  92.             <p class = "explanation">
  93.                 ここでは, 先にローカル変数 view の値がどこから来たのかを見ていきます.<br>
  94.                 ブレークポイントビュー上の DefaultDragTracekr クラスの mousePressed(MouseEvent) メソッドの98行目のブレークポイントにチェックを入れてください.<br>
  95.                 ブレークポイントを入れたら, デバッグ実行をいったん終了してから, もう一度デバッグ実行してください.<br>
  96.                 すると, まずは DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目に止まります.<br>
  97.                 続けて, 現在の実行時点がどのように移り変わっていくかを確認するために再開ボタンを押していくと, 現在の実行が98行目 → 780行目 と移っていくことが確認できます.<br>
  98.                 これを確認したら, デバッグ実行をいったん終了してください.
  99.             </p>
  100.             <p class = "explanation">
  101.                 再びデバッグ実行してから, 再開ボタンを1回押して DefaultDragTracekr クラスの mousePressed(MouseEvent) メソッドの98行目にまで進めてください.<br>
  102.                 ここで, ステップインを1回押して, getView() メソッドの中に入ってください.
  103.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_03.png" class = "threeQuartersSize"></div>
  104.             </p>
  105.             <p class = "explanation">
  106.                 AbstractTool クラスの getView() メソッドの中に入りました.<br>
  107.                 ここで, 変数ビュー上の this を開くと, DefaultDragTracker クラスのインスタンス(id = 758826749) が<br>
  108.                 フィールド editor として DefaultDrawingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  109.                 これを確認したら, ステップインを3回押して getActiveView() メソッドの中に入ってください.
  110.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_04.png" class = "threeQuartersSize"></div>
  111.             </p>
  112.             <p class = "explanation">
  113.                 DefaultDrawingView クラスの getActiveView() メソッドの中に入りました.<br>
  114.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  115.                 フィールド activeView として DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.<br>
  116.                 これを確認したら, 呼び出しスタック上で2つ呼び出し元をクリックしてください.<br>
  117.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_05.png" class = "threeQuartersSize"></div>
  118.             </p>
  119.             <p class = "explanation">
  120.                 現在は DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの98行目を見ています.<br>
  121.                 ここで, 変数ビュー上で this を開いて, フィールド anchorFigure と this 自体のIDを確認してください.<br>
  122.                 DefaultDragTracker クラスのインスタンス (id = 758826749) が anchorFigure として<br>
  123.                 RectangleFigure クラスのインスタンス (id = 1952912699) を参照していることが確認できます.<br>
  124.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_06.png" class = "threeQuartersSize"></div>
  125.             </p>
  126.             <p class = "explanation">
  127.                 ここからは, このフィールド anchorFigure に RectangleFigure クラスのインスタンスが代入された時点を見ていきます.<br>
  128.                 ソースコード中の anchorFigure にカーソルを入れて, ソースコード中で代入しているところ全てにブレークポイントを入れてください.<br>
  129.                 今回は, DefaultDragTracker クラスの84行目と218行目の二か所が該当します.
  130.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_07.png" class = "threeQuartersSize"></div>
  131.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_08.png" class = "threeQuartersSize"></div>
  132.             </p>
  133.             <p class = "explanation">
  134.                 DefaultDragTracker クラスの84行目と218行目にブレークポイントを入れたら, ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.<br>
  135.                 すると, 実際にトレース上に実行された記録が残っている218行目にだけブレークポイントが新規追加されます.<br>
  136.                 そのあと, ブレークポイントビュー上で780行目と218行目以外のブレークポイントのチェックを外してください.<br>
  137.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_09.png" class = "threeQuartersSize"></div>
  138.             </p>
  139.             <p class = "explanation">
  140.                 デバッグ実行をいったん終了してから, 再びデバッグ実行してください.<br>
  141.                 すると, まずは DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目に止まります.<br>
  142.                 ここで, 再開ボタンを1回押すと, 今度は DefaultDragTracker クラスの setDraggedFigure(Figure) メソッドの218行目に止まることが確認できます.<br>
  143.                 さらに再開ボタンを1回押すと, DefaultDragTracker クラスの addToSelection(Figure) メソッドの780行目に止まることが確認できます.<br>
  144.                 これにより, setDraggedFigure(Figure) メソッドの218行目で フィールド anchorFigure に代入された値があとで取得され, それが780行目で追加されていることがわかります.<br>
  145.             </p>
  146.             <p class = "explanation">
  147.                 デバッグ実行をいったん終了してから, 再びデバッグ実行してください.<br>
  148.                 そのあと, 再開ボタンを1回押して DefaultDragTracker クラスの setDraggedFigure(Figure) メソッドの218行目にまで進んでください.<br>
  149.                 ここで, 変数ビューを見て this と 引数の f のIDをそれぞれ確認してください.<br>
  150.                 これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  151.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_10.png" class = "threeQuartersSize"></div>
  152.             </p>
  153.             <p class = "explanation">
  154.                 現在は, 呼び出し元である SelectionTool クラスの getDragTracker(Figure) メソッドを見ています.<br>
  155.                 ここで, ソースコードを見ると, DefaultDragTracker クラスのインスタンス (id = 758826749) が<br>
  156.                 フィールド dragTracker に代入されており, それが戻り値としても返されることがわかります.<br>
  157.                 これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.<br>
  158.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_11.png" class = "threeQuartersSize"></div>
  159.             </p>
  160.             <p class = "explanation">
  161.                 現在は, 呼び出し元である SelectionTool クラスの mousePressed(MouseEvent) メソッドを見ています.<br>
  162.                 ここで, 変数ビュー上で「呼び出し前」を開いて引数と, this を開いてフィールド dragTracker のIDをそれぞれ確認してください.<br>
  163.                 すると, 先ほどの DefaultDragTracker クラスのインスタンス (id = 758826749) を フィールド dragTracker として<br>
  164.                 DelegationSelectionTool クラスのインスタンス (id = 599587451) が参照していることが確認できます.<br>
  165.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_12.png" class = "threeQuartersSize"></div>
  166.             </p>
  167.             <p class = "explanation">
  168.                 ソースコードを見ると, 278行目で呼び出されている getDragTracker() メソッドの戻り値をいったんローカル変数 newTracker に代入しておいてから,<br>
  169.                 289行目で setTracker(Tool) メソッドに引数として渡していることが確認できます.<br>
  170.                 ここで, ステップオーバーを2回押して, 実際に289行目に止まることを確認し, ステップインを2回押して, setTracker() メソッドの中に入ってください.
  171.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_13.png" class = "threeQuartersSize"></div>
  172.             </p>
  173.             <p class = "explanation">
  174.                 SelectionTool クラスの setTracker(Tool) メソッドに入りました.<br>
  175.                 ここでは, ステップオーバーを4回押して301行目まで進めてください.<br>
  176.                 そのあと, 変数ビュー上で this を開くと, フィールド tracekr の値が 仮引数 newTracker と同じ値に更新されていることがわかります.<br>
  177.                 これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.
  178.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_14.png" class = "threeQuartersSize"></div>
  179.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_15.png" class = "threeQuartersSize"></div>
  180.             </p>
  181.             <p class = "explanation">
  182.                 先ほどの呼び出し先から戻ってきたことで, 現在は SelectionTool クラスの mousePressed() メソッドの291行目にいます.<br>
  183.                 ここでは, ステップインを4回押して, DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの中に入ってください.
  184.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_16.png" class = "threeQuartersSize"></div>
  185.             </p>
  186.             <p class = "explanation">
  187.                 DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドに入りました.<br>
  188.                 ここで, 変数ビュー上で this を開いて, フィールド anchorFigure と this 自体のIDを確認してください.<br>
  189.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_17.png" class = "threeQuartersSize"></div>
  190.             </p>
  191.             <p class = "explanation">
  192.                 呼び出しスタック上で呼び出し元をクリックして戻ってください.<br>
  193.                 なお, 呼び出しスタック上では呼び出し元の行番号が0になっていますが, 実際には291行目にいることに注意してください.<br>
  194.                 ソースコード上で291行目が見えるようにスクロールしてください.<br>
  195.                 ここからはローカル変数 figure の値がどこから来たのかを見ていきます.<br>
  196.                 ローカル変数 figure にカーソルを入れ, この figure に代入された箇所を探していきます.<br>
  197.                 ローカル変数 figure の宣言は234行目にあるため, ここではその次の行である235行目にブレークポイントを入れてください.<br>
  198.                 235行目にブレークポイントを入れたら, ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.<br>
  199.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_18.png" class = "threeQuartersSize"></div>
  200.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_19.png" class = "threeQuartersSize"></div>
  201.             </p>
  202.             <p class = "explanation">
  203.                 いったんデバッグ実行を終了してから, もう一度デバッグ実行してください.<br>
  204.                 すると, まずは DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目に止まります.<br>
  205.                 ここで, 再開ボタンを1回押すと, 235行目に止まることが確認できます.<br>
  206.                 このあと, 実際に実行時点がどのように移り変わっていくのかを確認していきます.<br>
  207.                 再開ボタンを1回押すと, 再び235行目に止まることが確認でき, それからもう一度再開ボタンを押すと今度は2回目の780行目に止まることが確認できます.<br>
  208.             </p>
  209.             <p class = "explanation">
  210.                 いったんデバッグ実行を終了してから, もう一度デバッグ実行してください.<br>
  211.                 そのあと, 再開ボタンを2回押して, 2回目の235行目にまで進んでください.<br>
  212.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_20.png" class = "threeQuartersSize"></div>
  213.             </p>
  214.             <p class = "explanation">
  215.                 ローカル変数 figure に値が代入された時点がどこなのかを見ていきます.<br>
  216.                 ここでは, ステップオーバーを8回押して, 270行目にまで進んでください.<br>
  217.                 270行目では, ローカル変数 view が参照しているインスタンスに対して findFigure(Point) メソッドが呼び出され,<br>
  218.                 その戻り値がローカル変数 figure に代入されていることがわかります.<br>
  219.                 ここで, いったんステップオーバーを3回実行して, この戻り値の代入のあとに別の時点で figure が更新されることなく,<br>
  220.                 278行目で getDragTracker(Figure) メソッドの引数として渡されることを確認してください.<br>
  221.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_21.png" class = "threeQuartersSize"></div>
  222.             </p>
  223.             <p class = "explanation">
  224.                 先ほどの操作によって, ローカル変数 figure に値を代入した箇所がわかりました.<br>
  225.                 ここで, いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  226.                 まずは DefaultDrawingViewクラスの addToSelection(Figure) メソッドの780行目で止まるので, 再開ボタンを2回押して2回目の235行目にまで進んでください.<br>
  227.                 そのあと, ステップオーバーを8回押して270行目にまで進み, ステップインを3回押して findFigure(Point) メソッドの中に入ってください.
  228.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_22.png" class = "threeQuartersSize"></div>
  229.             </p>
  230.             <p class = "explanation">
  231.                 DefaultDrawingView クラスの findFigure(Point) メソッドに入りました.<br>
  232.                 ここでは, ステップインを2回押して, getDrawing() メソッドの中に入ってください.
  233.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_23.png" class = "threeQuartersSize"></div>
  234.             </p>
  235.             <p class = "explanation">
  236.                 DefaultDrawingView クラスの getDrawing() メソッドに入りました.<br>
  237.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingView クラスのインスタンス (id = 150367587) が<br>
  238.                 フィールド drawing として QuadTreeDrawing クラスのインスタンス (id = 1583174451) のインスタンスを参照していることがわかります.<br>
  239.                 これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.
  240.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_24.png" class = "threeQuartersSize"></div>
  241.             </p>
  242.             <p class = "explanation">
  243.                 DefaultDrawingView クラスの findFigure(Point) メソッドに戻ってきました.<br>
  244.                 ソースコードを見ると, 先ほどの getDrawing() メソッドで取得してきた QuadTreeDrawing クラスのインスタンスに対して findFigure(Point2D#Double) メソッドが呼び出され,<br>
  245.                 その引数として, DefaultDrawingView クラスの viewToDrawing(Point) メソッドの戻り値が渡されていることが確認できます.<br>
  246.                 次は, ステップインを1回押して, viewToDrawing(Point) メソッドの中に入ってください.<br>
  247.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_25.png" class = "threeQuartersSize"></div>
  248.             </p>
  249.             <p class = "explanation">
  250.                 DefaultDrawingView クラスの viewToDrawing(Point) メソッドに入りました.<br>
  251.                 そのままステップリターンを1回押して呼び出し元に戻ってください.<br>
  252.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_26.png" class = "threeQuartersSize"></div>
  253.             </p>
  254.             <p class = "explanation">
  255.                 DefaultDrawingView クラスの findFigure(Point) メソッドに戻ってきました.<br>
  256.                 ステップインを1回押して QuadTreeDrawing クラスの findContains(Point2D#Double) メソッドの中に入ってください.<br>
  257.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_27.png" class = "threeQuartersSize"></div>
  258.             </p>
  259.             <p class = "explanation">
  260.                 QuadTreeDrawing クラスの findContains(Double) メソッドに入りました.<br>
  261.                 ここで, 変数ビュー上の this を開くと, QuadTreeDrawing クラスのインスタンス (id = 1583174451) が,<br>
  262.                 フィールド quadTree として QuadTree クラスのインスタンス (id = 808853315) を参照していることがわかります.<br>
  263.                 これを確認したら, ステップインを3回押して, QuadTree クラスの findContains(Point2D#Double) メソッドの中に入ってください.
  264.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_28.png" class = "threeQuartersSize"></div>
  265.             </p>
  266.             <p class = "explanation">
  267.                 QuadTree クラスの findContains(Point2D#Double) メソッドに入りました.<br>
  268.                 ここで, 変数ビュー上の this を開くと, QuadTree クラスのインスタンス (id = 808853315) がフィールド root として<br>
  269.                 QuadTree クラスの内部クラスである QuadNode クラスのインスタンス (id = 2120356010) を参照していることがわかります.<br>
  270.                 また, ソースコードを見ると, 82行目で生成された HashSet がローカル変数 result に代入されたあと, <br>
  271.                 83行目ではいったん呼び出し先に引数として渡され, 最終的には89行目で戻り値として返されていることが確認できます.<br>
  272.                 ここでは, ステップオーバーを1回押したあと, ステップインを2回押して QuadNode クラスの findContains(Point2D#Double, HashSet) メソッドの中に入ってください.
  273.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_29.png" class = "threeQuartersSize"></div>
  274.             </p>
  275.             <p class = "explanation">
  276.                 QuadNode クラスの findContains(Point2D#Double, HashSet) メソッドに入りました.<br>
  277.                 ここで, 変数ビュー上の this を開くと, QuadNode クラスのインスタンス (id = 2120356010) が<br>
  278.                 フィールド objects として HashMap を参照していることがわかります.<br>
  279.                 また, ソースコードを見ると, 224行目の拡張for文でこの HashMap から取り出してきた要素を, 226行目で仮引数 result に追加していることが確認できます.<br>
  280.                 ここでは, ステップオーバーを3回押して226行目にまで進んでください.
  281.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_30.png" class = "threeQuartersSize"></div>
  282.             </p>
  283.             <p class = "explanation">
  284.                 先ほどの操作によって, 現在は226行目にいます.<br>
  285.                 ここでは, ステップインを2回押してください.<br>
  286.                 そのあと, 変数ビュー上の「呼び出し前」を開き, 引数のIDを確認してください.<br>
  287.                 すると, RectangleFigure クラスのインスタンス (id = 1952912699) が引数として渡されており,<br>
  288.                 それが 仮引数 result に対して追加されることがわかります.<br>
  289.                 これを確認したら, ステップオーバーを4回押して呼び出し元に戻ってください.
  290.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_31.png" class = "threeQuartersSize"></div>
  291.             </p>
  292.             <p class = "explanation">
  293.                 呼び出し元である QuadTree クラスの findContains(Point2D#Double) メソッドに戻ってきました.<br>
  294.                 ここで, ステップオーバーを1回押して, ローカル変数 result にそれ以上何も追加されずに<br>
  295.                 そのまま89行目の return result まで進むことを確認してください.<br>
  296.                 これを確認したら, ステップオーバーを1回押して呼び出し元に戻ってください.
  297.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_32.png" class = "threeQuartersSize"></div>
  298.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_33.png" class = "threeQuartersSize"></div>
  299.             </p>
  300.             <p class = "explanation">
  301.                 呼び出し元である QuadTreeDrawing クラスの findContains(Double) メソッドに戻ってきました.<br>
  302.                 ここでは, ステップオーバーを2回押して130行目にまで進めてください<br>
  303.                 ここで, 変数ビュー上の「呼び出し後」を開いて戻り値のIDを確認してください.<br>
  304.                 すると, 先ほどの RectangleFigure クラスのインスタンス (id = 1952912699) を取得していることがわかります.<br>
  305.                 これを確認したら, 呼び出しスタック上で2つ呼び出し元をクリックしてください.
  306.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_34.png" class = "threeQuartersSize"></div>
  307.             </p>
  308.             <p class = "explanation">
  309.                 現在は, 呼び出し元である SelectionTool クラスの mousePressed(MouseEvent) メソッドの270行目を見ています.<br>
  310.                 ここで, ステップオーバーを1回押して271行目に進んでください.<br>
  311.                 そのあと, 変数ビュー上の「呼び出し後」を開いて戻り値のIDを確認してください.<br>
  312.                 すると, 実際に戻り値として先ほどの RectangleFigure クラスのインスタンス (id = 1952912699) が返されていることが確認でき,<br>
  313.                 したがって, その値がローカル変数 figure に代入されていることがわかります.
  314.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_35.png" class = "threeQuartersSize"></div>
  315.             </p>
  316.             <p class = "explanation">
  317.                 ここからは, ローカル変数 view の値がどこから来たのかを見ていきます.<br>
  318.                 ソースコード中のローカル変数 view にカーソルを入れて view に代入している箇所を探していきます.<br>
  319.                 今回は, 228行目に該当するのでブレークポイントを入れ, ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.
  320.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_36.png" class = "threeQuartersSize"></div>
  321.             </p>
  322.             <p class = "explanation">
  323.                 いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  324.                 まずは, DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目に止まります.<br>
  325.                 ここで, 再開ボタンを1回押すと, 今度は SelectionToolクラスの mousePressed(MouseEvent) メソッドの228行目に止まります.<br>
  326.                 さらに, 現在の実行時点がどのように移り変わっていくかを確認するために再開ボタンを押していくと,<br>
  327.                 現在の実行が235行目 → 228行目 → 235行目と移っていくことが確認できます.<br>
  328.             </p>
  329.             <p class = "explanation">
  330.                 いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  331.                 そのあと, 再開ボタンを3回押して, 2回目の228行目にまで進んでください.<br>
  332.                 ここで, ステップインを1回押して, getView() メソッドの中に入ってください.
  333.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_37.png" class = "threeQuartersSize"></div>
  334.             </p>
  335.             <p class = "explanation">
  336.                 AbstractTool クラスの getView() メソッドの中に入りました.<br>
  337.                 ここで, 変数ビュー上の this を開くと, DelegationSelectionTool クラスのインスタンス(id = 599587451) が<br>
  338.                 フィールド editor として DefaultDrawingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  339.                 これを確認したら, ステップインを3回押して getActiveView() メソッドの中に入ってください.
  340.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_38.png" class = "threeQuartersSize"></div>
  341.             </p>
  342.             <p class = "explanation">
  343.                 DefaultDrawingView クラスの getActiveView() メソッドの中に入りました.<br>
  344.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  345.                 フィールド activeView として DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.<br>
  346.                 これを確認したら, 呼び出しスタック上で2つ呼び出し元をクリックして戻ってください.<br>
  347.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_39.png" class = "threeQuartersSize"></div>
  348.             </p>
  349.             <p class = "explanation">
  350.                 呼び出し元である SelectionTool クラスの mousePressed(MouseEvent) メソッドに戻ってきました.<br>
  351.                 ここで課題B2は終了です. 時間計測を終了してください.
  352.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_40.png" class = "threeQuartersSize"></div>
  353.             </p>
  354.             <hr>
  355.             <p>
  356.                 課題B2の機能理解が終了しましたら, 以下のアンケートにお答えください.
  357.                 <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSeddofr2WwcWbQkl1-TX1SQSjKVc_ulZRa4USNpeUH7Hs1azw/viewform" target = "_blank">アンケート回答</a></div>           
  358.             </p>
  359.         <a href="JHotDraw2_Forward_Delta.html">次へ</a>
  360.         </p>
  361.     </body>
  362. </html>