feat: URLクエリ(view)による初期表示ビューの指定(ADR-036)

BhvVisualizer連携のセッション内pre/post設問で、操作して確認する内容を
学生間で揃える必要があるが、ViewSwitcherが前回アクティブだったタブを
localStorageから復元するため、学生ごとに無関係な過去セッションの続きから
始まってしまう問題があった。

exercise-source.jsのparseQuery()にview、ViewSwitcherにsetInitialView()を
追加し、URLクエリでの初期ビュー指定を最初の実行1回だけ有効にする
(localStorageの保存値自体は書き換えない)。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: tntetsu

docs/adr/ADR-036-url-query-initial-view.md

@@ -0,0 +1,76 @@
+# ADR-036: URLクエリ（`view`）による初期表示ビューの指定
+
+## ステータス
+
+採択済み（2026-08-27）
+
+## コンテキスト
+
+BhvVisualizer（別リポジトリ）は、演習内で「ツールに触れる前に予想 → 操作して確認 → 再回答」という
+セッション内pre/post設問を評価手法として採用している
+（BhvVisualizer/its/course-redesign-plan.md 4.2節、BhvVisualizer/docs/evaluation-plan.md 3.4節）。
+
+「操作して確認」の体験が学生ごとにバラバラだと、pre/post測定の「介入」自体が学生間で統制されず
+内的妥当性が下がる。特に`ViewSwitcher`は前回アクティブだったタブを`localStorage`
+（`jsv-active-tab`）に保存し、次回起動時に復元する設計になっている
+（`onReady()`、`src/components/view-switcher.js`）。これは通常の利用（同じ学生が継続して
+同じツールを使う）では望ましい挙動だが、pre/post設問の文脈では、学生ごとに全く無関係な
+過去のセッションで最後に使ったタブが復元されてしまい、「操作して確認」した内容が学生間で
+揃わないという問題になる。
+
+## 決定
+
+ADR-029/031と同じ「JSVisualizer単体でも汎用的に使える機能」として、URLクエリに`view`
+パラメータを追加する。BhvVisualizerとの連携を前提としないため`# BHV:`タグは付けない。
+
+```
+?view=<登録済みビューID>
+```
+
+- 値は`ViewSwitcher.register()`で登録されているビューID（`state`/`trace`/`exectrace`/`subst`/
+  `exprtrace`/`colorbox`/`heatmap`/`calltree`/`lifetime`/`controlflow`/`memory`/`objgraph`、
+  `src/app.js`参照）と一致させる
+- **`code`/`exercise`のコード読み込みとは独立**に処理する（コードの取得元とは無関係な指定のため）
+- 効いてよいのは**そのページの最初の実行（Run）1回だけ**。以後の再実行では通常通り
+  「前回アクティブだったタブ」の挙動に戻る。`localStorage`の保存値自体は書き換えない
+  （pre/post設問という一時的な用途のために、その学生の以後の通常利用の体験を変えたくないため）
+- 未登録のID・指定なしの場合は何もせず、従来通りの優先順位（前回保存したタブ → 最初のビュー）
+  で決まる（回帰なし）
+
+### 変更ファイル
+
+- **`src/core/exercise-source.js`**: `parseQuery()`が`view`も読むよう変更（`viewId`を返り値に追加）。
+  コード読み込みとは独立な指定のため、`loadExerciseFromQuery()`自体は変更しない
+- **`src/components/view-switcher.js`**: `#presetId`フィールドと公開メソッド`setInitialView(id)`を追加。
+  `onReady()`の「アクティブビュー未確定時」の分岐で、優先順位を「`setInitialView`指定 → 前回保存した
+  タブ → 最初のビュー」に変更し、使用後は`#presetId`を消費（null化）する
+- **`src/app.js`**: `parseQuery()`から取り出した`viewId`があれば`switcher.setInitialView(viewId)`を呼ぶ
+  （`loadExerciseFromQuery(editor)`とは別に、独立した呼び出しとして追加）
+
+### 安全性の担保
+
+- `tests/core/exercise-source.test.js`: `parseQuery()`の`view`解析を追加（Jest、86件中の一部）
+- `verify-exercise-query.mjs`（Playwright、実ブラウザ）にテストF・Gを追加（計20件合格）
+  - F: `?code=...&view=memory`で実行後、Memoryタブが最初からアクティブになる
+  - G: `view`未指定なら従来通り最初のビュー（コールスタック）が開く（回帰確認）
+
+## 結果
+
+- 既存Jestテストスイート（86件、全て合格）
+- `verify-exercise-query.mjs`（20件、全て合格）
+- `verify-bhv-hook.mjs`（既存、ADR-028）に影響なし（`ViewSwitcher`の変更は`onReady()`の
+  ビュー選択ロジックのみで、ログ送信経路には触れていない）
+
+## 代替案
+
+- **`localStorage`の保存値自体を`view`クエリの値で上書きする**: 不採用。pre/post設問という
+  一時的な用途のために、その学生が次にJSVisualizerを開いたとき（この設問とは無関係な場面）の
+  体験まで変えてしまうため
+- **毎回の実行（Run）で`view`を効かせ続ける**: 不採用。ページの最初の実行だけを揃えれば
+  pre/post設問の目的（「操作して確認」の内容を学生間で揃える）には十分で、2回目以降まで
+  固定するとタブ切り替えという通常の操作性を損なう
+
+## 今後の方針
+
+BhvVisualizer側では`codes.initialView`（コード単位、教員が任意指定）から、iframe埋め込み時の
+URLに`view`を付与する（BhvVisualizer/docs/design.md 2.4.6節）。

docs/adr/README.md

@@ -44,3 +44,4 @@ git 履歴（2026-05-25〜2026-06-08）と設計ドキュメントをもとに 2
 | [033](ADR-033-hide-builtin-samples-when-remote.md) | `exercise`/`code`指定時は組み込みサンプルをサンプル選択から取り除く | 2026-08-12 |
 | [034](ADR-034-code-only-placeholder-and-disable.md) | `code`単体指定時もプレースホルダをコードタイトルにし、サンプル選択を選択不可にする | 2026-08-12 |
 | [035](ADR-035-editor-line-wrapping.md) | エディタの折り返し表示を常時有効にする | 2026-08-12 |
+| [036](ADR-036-url-query-initial-view.md) | URLクエリ（`view`）による初期表示ビューの指定 | 2026-08-27 |

src/app.js

@@ -37,7 +37,7 @@ import { MemoryView }       from './views/memory-view/index.js';
 import { ObjectGraph }      from './views/object-graph/index.js';
 import { SubstTrace }      from './views/subst-trace/index.js';
 import { ExprTrace }       from './views/expr-trace/index.js';
-import { loadExerciseFromQuery } from './core/exercise-source.js';
+import { loadExerciseFromQuery, parseQuery } from './core/exercise-source.js';
 
 // ── DOM 参照 ───────────────────────────────────────────────────────────────
 
@@ -223,6 +223,11 @@ const editor = new CodeEditor({
 // クエリが無ければ何もせず、既定のFibonacciサンプルのまま起動する。
 loadExerciseFromQuery(editor).catch((err) => console.error('[exercise-source]', err));
 
+// view クエリがあれば、最初の実行時に開くビューを指定する（ADR-036）。
+// コード読み込みとは独立な指定のため、loadExerciseFromQuery とは別に処理する。
+const { viewId } = parseQuery();
+if (viewId) switcher.setInitialView(viewId);
+
 const stepControls = new StepControls({
   controller:       controller,
   btnStart:         $('btn-start'),

src/components/view-switcher.js

@@ -39,6 +39,9 @@ export class ViewSwitcher {
   /** @type {string|null} 現在アクティブなビュー ID */
   #activeId = null;
 
+  /** @type {string|null} 次の初回 onReady() でのみ使う、外部から指定された初期ビュー ID */
+  #presetId = null;
+
   /** @type {import('../core/debugger-adapter.js').AppState|null} 最後の state */
   #lastState = null;
 
@@ -79,6 +82,16 @@ export class ViewSwitcher {
     this.#addTab(id, label);
   }
 
+  /**
+   * 次の初回 onReady() で開くビューを指定する（URLクエリ`view`等、外部からの初期ビュー指定用。
+   * ADR-036）。登録されていない ID は無視する。既にアクティブビューがある場合（2回目以降の
+   * onReady()）には影響しない。localStorage の「前回使ったタブ」は書き換えない。
+   * @param {string} id
+   */
+  setInitialView(id) {
+    if (this.#registry.has(id)) this.#presetId = id;
+  }
+
   /**
    * 実行開始時に呼ぶ。builder をセットしてアクティブビューを再初期化する。
    * @param {import('../core/debugger-adapter.js').AppState}     state
@@ -103,11 +116,11 @@ export class ViewSwitcher {
       }
       this.#mountView(this.#activeId);
     } else {
-      // 前回保存したタブ → なければ最初のビュー
+      // 優先順位: 外部からの初期ビュー指定（setInitialView） > 前回保存したタブ > 最初のビュー
       const savedId = localStorage.getItem(STORAGE_KEY_TAB);
-      const targetId = (savedId && this.#registry.has(savedId))
-        ? savedId
-        : this.#registry.keys().next().value;
+      const targetId = this.#presetId
+        ?? (savedId && this.#registry.has(savedId) ? savedId : this.#registry.keys().next().value);
+      this.#presetId = null; // 一度使ったら消費する（以後の起動は通常の優先順位に戻す）
       if (targetId) this.#activate(targetId);
     }
   }

src/core/exercise-source.js

@@ -6,17 +6,22 @@
  * JSVisualizerはコードの取得元のパス規約・スキーマを一切知らない。クエリなし時は何もせず、
  * 既定のFibonacciサンプル・21種の組み込みサンプルのまま起動する。クエリがある場合は組み込み
  * サンプルをサンプル選択から取り除き、`exercise`/`code`が指すコードだけを表示する（ADR-033）。
+ *
+ * `view`（推奨初期ビューID）はコード読み込みとは独立な指定のため、`loadExerciseFromQuery()`
+ * では扱わない。`parseQuery()`が返す`viewId`を呼び出し元（`app.js`）がそのまま
+ * `ViewSwitcher.setInitialView()`に渡す（ADR-036）。
  */
 
 /**
  * @param {string} [search]
- * @returns {{ codeUrl: string|null, exerciseUrl: string|null }}
+ * @returns {{ codeUrl: string|null, exerciseUrl: string|null, viewId: string|null }}
  */
 export function parseQuery(search = location.search) {
   const params = new URLSearchParams(search);
   return {
     codeUrl: params.get('code'),
     exerciseUrl: params.get('exercise'),
+    viewId: params.get('view'),
   };
 }
 

tests/core/exercise-source.test.js

@@ -27,24 +27,36 @@ afterEach(() => {
 
 describe('parseQuery', () => {
   test('クエリなしなら全てnull', () => {
-    expect(parseQuery('')).toEqual({ codeUrl: null, exerciseUrl: null });
+    expect(parseQuery('')).toEqual({ codeUrl: null, exerciseUrl: null, viewId: null });
   });
 
   test('codeのみ', () => {
     expect(parseQuery('?code=https%3A%2F%2Fexample.com%2Fcodes%2Fabc')).toEqual({
-      codeUrl: 'https://example.com/codes/abc', exerciseUrl: null,
+      codeUrl: 'https://example.com/codes/abc', exerciseUrl: null, viewId: null,
     });
   });
 
   test('exerciseのみ', () => {
     expect(parseQuery('?exercise=https%3A%2F%2Fexample.com%2Fexercises%2Fex1')).toEqual({
-      codeUrl: null, exerciseUrl: 'https://example.com/exercises/ex1',
+      codeUrl: null, exerciseUrl: 'https://example.com/exercises/ex1', viewId: null,
     });
   });
 
   test('code+exercise', () => {
     expect(parseQuery('?exercise=https://example.com/exercises/ex1&code=https://example.com/codes/co2')).toEqual({
-      codeUrl: 'https://example.com/codes/co2', exerciseUrl: 'https://example.com/exercises/ex1',
+      codeUrl: 'https://example.com/codes/co2', exerciseUrl: 'https://example.com/exercises/ex1', viewId: null,
+    });
+  });
+
+  test('viewのみ', () => {
+    expect(parseQuery('?view=memory')).toEqual({
+      codeUrl: null, exerciseUrl: null, viewId: 'memory',
+    });
+  });
+
+  test('code+view', () => {
+    expect(parseQuery('?code=https://example.com/codes/co2&view=objgraph')).toEqual({
+      codeUrl: 'https://example.com/codes/co2', exerciseUrl: null, viewId: 'objgraph',
     });
   });
 });

verify-exercise-query.mjs

@@ -170,6 +170,38 @@ async function run() {
       check('[E] 存在しないcode URLでエラーメッセージが表示される', errorVisible);
       await page.close();
     }
+
+    // ── テストF: code+view → 実行後、指定したビューが最初から開いている（ADR-036） ──
+    {
+      const page = await browser.newPage();
+      const codeUrl = encodeURIComponent(`${API_BASE}/codes/co3`);
+      await page.goto(`http://localhost:${JSV_PORT}/index.html?code=${codeUrl}&view=memory`, { waitUntil: 'networkidle' });
+      await page.waitForTimeout(300);
+      await page.click('#btn-run');
+      await page.waitForTimeout(300);
+
+      const isActive = await page.locator('.view-tab[data-view="memory"]').evaluate(
+        (el) => el.classList.contains('view-tab--active'),
+      );
+      check('[F] view=memory指定で実行後にMemoryタブが最初からアクティブになる', isActive);
+      await page.close();
+    }
+
+    // ── テストG: view未指定 → 従来通り最初のビュー（コールスタック）が開く（回帰確認） ──
+    {
+      const page = await browser.newPage();
+      const codeUrl = encodeURIComponent(`${API_BASE}/codes/co3`);
+      await page.goto(`http://localhost:${JSV_PORT}/index.html?code=${codeUrl}`, { waitUntil: 'networkidle' });
+      await page.waitForTimeout(300);
+      await page.click('#btn-run');
+      await page.waitForTimeout(300);
+
+      const isActive = await page.locator('.view-tab[data-view="state"]').evaluate(
+        (el) => el.classList.contains('view-tab--active'),
+      );
+      check('[G] view未指定なら従来通り最初のビュー（コールスタック）が開く（回帰確認）', isActive);
+      await page.close();
+    }
   } finally {
     await browser.close();
     jsvServer.close();