🚀 JavaScript学習CLIツールの開発記録 - 問題解決とUX改善の旅

はじめに

この記事では、JavaScript初心者向けのインタラクティブな学習CLIツール「JS Fundamentals CLI」の開発過程で直面した技術的課題と、それらをどのように解決していったかを詳しく記録します。

特に以下の3つの大きな問題に焦点を当てます：

Neovimとの統合問題 - エディタが正しく動作しない
テスト評価の根本的な問題 - const/let変数がsandboxに追加されない
UX/UI改善 - ユーザー体験の最適化

📚 目次

プロジェクト概要
問題1: Neovimとの統合
問題2: テスト評価システムの根本的欠陥
問題3: 画面表示とスクロール問題
UX改善: ナビゲーションフローの最適化
バイリンガル対応
学んだこと
まとめ

プロジェクト概要

何を作ったのか？

JS Fundamentals CLIは、ターミナル上で動作するインタラクティブなJavaScript学習ツールです。僕のwezterm、lazyvimを使ってターミナルに極限まで引きこもるという癖の塊です。

主な機能:

📚 15のレッスン（変数、関数、配列、オブジェクトなど）
💻 エディタ統合（Neovim/Vim対応）
✅ 自動テスト評価
🌐 日英バイリンガル対応
📊 進捗管理

技術スタック:

Node.js
inquirer（CLIインターフェース）
vm（コード実行サンドボックス）
chalk（色付き出力）※色合いが薄い部分も見られるので改善が必要

問題1: Neovimとの統合

🐛 問題の発見

最初に気づいたのは、inquirer.editorを使ってNeovimを起動しても、以下の問題が発生することでした：

// 問題のあるコード
const { code } = await inquirer.prompt([
  {
    type: 'editor',
    name: 'code',
    default: starterCode,
  }
]);

症状:

❌ シンタックスハイライトが表示されない
❌ LSP（Language Server Protocol）が動作しない
❌ スニペットが使えない
❌ 基本的なNeovim設定が反映されない

🔍 原因の調査

inquirer.editorの内部を調べると、以下のことがわかりました：

ターミナル制御が不完全: inquirerは独自のターミナル制御を行うため、エディタに完全な制御を渡していない
環境変数の問題: $EDITORは読み取るが、エディタの初期化が不十分
stdio設定: エディタプロセスのstdioがinheritになっていない

✅ 解決策: カスタムエディタ関数

child_process.spawnを使って、エディタに完全な制御を渡す方法に変更：

const { spawn } = require('child_process');
const fs = require('fs');
const os = require('os');
const path = require('path');

async openEditor(defaultContent) {
  return new Promise((resolve, reject) => {
    // 一時ファイルを作成
    const tmpFile = path.join(os.tmpdir(), `challenge-${Date.now()}.js`);
    fs.writeFileSync(tmpFile, defaultContent, "utf8");
    
    // エディタを取得（環境変数 $EDITOR から）
    const editor = process.env.EDITOR || process.env.VISUAL || "vi";
    
    // エディタをspawn
    const editorProcess = spawn(editor, [tmpFile], {
      stdio: "inherit",  // ← 重要: 完全なターミナル制御
      shell: true,
    });
    
    editorProcess.on("exit", (code) => {
      try {
        // ファイルからコードを読み込み
        const content = fs.readFileSync(tmpFile, "utf8");
        resolve(content);
      } finally {
        // クリーンアップ
        this.cleanupSingleFile(tmpFile);
      }
    });
    
    editorProcess.on("error", (err) => {
      console.error(chalk.red("Failed to open editor:"), err);
      this.cleanupSingleFile(tmpFile);
      reject(err);
    });
  });
}

重要なポイント:

stdio: "inherit": これにより、エディタがターミナルの完全な制御を取得
一時ファイル: タイムスタンプ付きの一時ファイルで競合を回避
適切なクリーンアップ: エラー時も含めて確実にファイルを削除

📊 結果

Before:
❌ Neovim設定が反映されない
❌ プレーンテキストエディタとして動作
❌ 開発体験が悪い

After:
✅ 完全なNeovim体験
✅ LSP、スニペット、すべて動作
✅ 快適なコーディング環境

問題2: テスト評価システムの根本的欠陥

🐛 最大の問題の発見

エディタ統合が完璧に動いても、すべてのテストが必ず失敗するという重大な問題が残っていました。

// ユーザーが書いたコード
const greeting = "Hello World"

// テスト
validate: (sandbox, output) => {
  console.log(sandbox.greeting); // undefined ← なぜ!?
  if (sandbox.greeting === undefined) {
    return { passed: false, message: "変数が存在しません" };
  }
}

🔍 深掘り調査

問題は2段階ありました。

問題2-A: コメントヘッダーの混入

最初に気づいたのは、テストに渡されるコードに余計なコメントが含まれていることでした：

// prepareEditorContent()で作成されるコメント
/*
 * Challenge 1/3
 * Create a variable...
 * ================================
 */
const greeting = "Hello World"  // ← ユーザーのコード

解決策: コード抽出関数

extractCode(fullContent) {
  const lines = fullContent.split("\n");
  let startIndex = -1;
  
  // "====" の最後の行を見つける
  for (let i = 0; i < lines.length; i++) {
    if (lines[i].includes("=".repeat(10))) {
      startIndex = i;
    }
  }
  
  if (startIndex !== -1) {
    const codeLines = lines.slice(startIndex + 1);
    
    // 先頭の空行とコメントを削除
    while (codeLines.length > 0 && 
           (codeLines[0].trim() === "" || 
            codeLines[0].includes("Write your code here"))) {
      codeLines.shift();
    }
    
    return codeLines.join("\n").trim();
  }
  
  return fullContent.trim();
}

しかし、これだけでは問題は解決しませんでした。

問題2-B: `const`/`let`変数がsandboxに追加されない（真の原因）

デバッグを進めると、さらに深刻な問題が見つかりました：

// runner.js の元のコード
const context = vm.createContext(sandbox);
const result = vm.runInContext(code, context, { timeout: 5000 });

// ユーザーのコード
const greeting = "Hello World"

// 問題: sandbox.greeting は undefined!
console.log(sandbox.greeting); // undefined

なぜこれが起こるのか？

Node.jsのvm.runInContext()では、constやletで宣言された変数はブロックスコープに閉じ込められ、sandboxオブジェクトのプロパティにはなりません！

// vmコンテキスト内
const greeting = "Hello";

// このgreetingは、コンテキストの内部スコープにのみ存在
// sandboxオブジェクトのプロパティにはならない!

一方、varやglobalThisへの代入は違います：

var greeting = "Hello";        // → sandbox.greeting
globalThis.greeting = "Hello"; // → sandbox.greeting

✅ 解決策: コード変換

const/let宣言をglobalThisプロパティに変換する正規表現を実装：

run(code, testCase = null) {
  const sandbox = {
    console: {
      log: (...args) => {
        output.push(args.map(arg => String(arg)).join(" "));
      },
    },
    // ... その他のグローバル
  };
  
  // 重要: const/let を globalThis.変数名 に変換
  const transformedCode = code.replace(
    /^(\s*)(const|let)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=/gm,
    (match, indent, keyword, varName) => {
      return `${indent}globalThis.${varName} =`;
    }
  );
  
  const context = vm.createContext(sandbox);
  vm.runInContext(transformedCode, context, {
    timeout: 5000,
    displayErrors: true,
  });
  
  // これでsandbox.greetingにアクセスできる!
  return { 
    sandbox: context, 
    output, 
    error: null 
  };
}

変換の例:

// 元のコード
const greeting = "Hello World"
let count = 0
count = count + 5

// 変換後
globalThis.greeting = "Hello World"
globalThis.count = 0
count = count + 5  // ← 再代入はそのまま

// 結果: sandbox.greeting と sandbox.count が使える!

📊 変換前後の比較

// Before: すべて失敗
const greeting = "Hello World"
→ sandbox.greeting === undefined
→ テスト失敗 ❌

// After: 正しく動作
const greeting = "Hello World"
→ globalThis.greeting = "Hello World"
→ sandbox.greeting === "Hello World"
→ テスト成功 ✅

🎓 技術的な学び

JavaScriptのスコープとvm

// ブロックスコープ（const/let）
{
  const x = 1;
  // xはこのブロック内のみ
}

// グローバルスコープ（var/globalThis）
var y = 2;              // グローバルオブジェクトのプロパティ
globalThis.z = 3;       // 明示的にグローバル

正規表現の詳細

/^(\s*)(const|let)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=/gm

// 説明:
// ^              - 行の先頭
// (\s*)          - インデント（キャプチャ1）
// (const|let)    - キーワード（キャプチャ2）
// \s+            - 空白
// ([...])        - 変数名（キャプチャ3）
// \s*=           - イコール
// gm             - グローバル + マルチライン

再代入の処理

let count = 0      → globalThis.count = 0
count = count + 5  → count = count + 5  // 変換されない

// なぜ動く？
// 1. globalThis.countに最初に値が設定される
// 2. 後続のcountは自動的にglobalThis.countを参照
// 3. 再代入も正しく機能

問題3: 画面表示とスクロール問題

🐛 問題の発見

エディタとテストが完璧に動作しても、UX上の問題が残っていました：

症状:

レッスン内容が長いと、画面の下の方にフォーカスされる
レッスンタイトルが見えない
上にスクロールすると前のレッスンの内容が残っている

🔍 原因分析

問題3-A: カーソル位置

// 不十分な画面クリア
console.clear();

// 問題:
// - ターミナルによってはスクロールバッファをクリアしない
// - カーソル位置が画面の途中に残る
// - inquirerのプロンプト表示後、自動的にスクロールされる

問題3-B: スクロールバッファ

ターミナルには2つの領域がある:
┌────────────────────────────┐
│  スクロールバッファ         │ ← ここに履歴が残る！
│  (過去のコンテンツ)         │
├────────────────────────────┤
│  表示画面                  │ ← console.clear()はここだけクリア
│  (現在見えている部分)       │
└────────────────────────────┘

✅ 解決策の進化

ステップ1: ANSIエスケープシーケンスの追加

// Before (不十分)
console.clear();

// After (改善)
console.clear();
process.stdout.write('\x1b[H\x1b[2J');

// \x1b[H  - カーソルをホーム位置(左上)に移動
// \x1b[2J - 画面全体をクリア

しかし、これでもまだ不十分でした。上にスクロールすると古いコンテンツが見えてしまいます。

ステップ2: スクロールバッファのクリア

// 完全な解決策
console.clear();
process.stdout.write('\x1b[3J\x1b[2J\x1b[H');

// \x1b[3J - スクロールバッファ（履歴）をクリア ← 重要！
// \x1b[2J - 表示画面全体をクリア
// \x1b[H  - カーソルをホーム位置に移動

ステップ3: 統一メソッドの作成

class App {
  /**
   * Comprehensive screen clearing that also clears scroll buffer
   * This ensures no previous content is visible even when scrolling up
   */
  clearScreen() {
    // Clear the visible screen
    console.clear();
    
    // ANSI escape sequences for comprehensive clearing
    // \x1b[3J - Clear scroll-back buffer (history)
    // \x1b[2J - Clear entire screen
    // \x1b[H  - Move cursor to home position (0,0)
    process.stdout.write('\x1b[3J\x1b[2J\x1b[H');
  }
}

そして、すべての画面遷移でこのメソッドを使用：

// アプリ起動時
async start() {
  this.clearScreen();
  ui.showWelcome();
}

// メインメニュー
async showMainMenu() {
  while (true) {
    this.clearScreen();
    ui.showWelcome();
    // ...
  }
}

// レッスン開始
async runLesson(lesson) {
  this.clearScreen();
  // ...
}

📊 改善効果

Before:
┌────────────────────────────┐
│ (前のレッスンの履歴)        │ ← スクロールすると見える
├────────────────────────────┤
│ Lesson 2: Data Types       │
│ ...                        │
└────────────────────────────┘

After:
┌────────────────────────────┐
│ (何もない - 完全にクリーン)  │
├────────────────────────────┤
│ Lesson 2: Data Types       │
│ ...                        │
└────────────────────────────┘
# ↑にスクロールしても何も見えない ✅

UX改善: ナビゲーションフローの最適化

🎯 問題の認識

技術的な問題が解決されても、ユーザー体験にはまだ改善の余地がありました。

問題点1: レッスン完了後の混乱

// Before
console.log(chalk.green.bold(`\n🎉 チャレンジ完了!\n`));
await this.waitForEnter(); // "Press Enter to continue..."

// ユーザーが押すと → メインメニューに戻る
// 問題: "Continue"なのにメニュー？ 混乱する！

問題点2: 強制的なフロー

// Before
ui.showLesson(lesson.id, lessonTitle);
await this.waitForEnter(); // チャレンジに強制的に進む

// 問題: 
// - レッスンを読んでも戻れない
// - 準備ができていなくても進まされる

問題点3: 途中離脱できない

// Before: チャレンジ失敗時
const choices = [
  { name: '🔄 Try again?', value: "retry" },
  { name: '📖 Review lesson', value: "review" },
  { name: '⏭️  Skip challenge', value: "skip" },
];

// 問題: メインメニューに戻れない！

✅ 解決策: 選択肢の追加

改善1: レッスン完了後の明確な選択

// After
console.log(chalk.green.bold(`🎉 チャレンジ完了!\n`));

// 次のレッスンがあるか確認
const currentLessonIndex = lessons.findIndex(l => l.id === lesson.id);
const hasNextLesson = currentLessonIndex < lessons.length - 1;

const choices = [];

if (hasNextLesson) {
  const nextLesson = lessons[currentLessonIndex + 1];
  const nextLessonTitle = this.getLocalizedText(nextLesson.title);
  choices.push({
    name: `➡️  次のレッスンへ: ${nextLessonTitle}`,
    value: 'next'
  });
}

choices.push({
  name: '📚 メインメニューに戻る',
  value: 'menu'
});

const { action } = await inquirer.prompt([{
  type: 'list',
  name: 'action',
  message: '次は？',
  choices
}]);

if (action === 'next' && hasNextLesson) {
  const nextLesson = lessons[currentLessonIndex + 1];
  this.clearScreen();
  await this.runLesson(nextLesson); // 次のレッスンへ直行！
}

改善2: レッスン開始前の選択

// After
ui.showLesson(lesson.id, lessonTitle);

const { action } = await inquirer.prompt([{
  type: 'list',
  name: 'action',
  message: '準備はいいですか？',
  choices: [
    { name: '▶️  チャレンジを開始', value: 'continue' },
    { name: '◀️  メインメニューに戻る', value: 'menu' }
  ]
}]);

if (action === 'menu') {
  return; // メインメニューに戻る
}

改善3: チャレンジ中にもメニューへ戻る

// After
const choices = [
  { name: '🔄 Try again?', value: "retry" },
  { name: '📖 Review lesson', value: "review" },
  { name: '⏭️  Skip challenge', value: "skip" },
  { name: '◀️  Return to Main Menu', value: "menu" }, // 追加！
];

// 処理
if (action === "menu") {
  return null; // メインメニューへ戻ることを示す
}

// runLessonでnullをチェック
for (let i = 0; i < lesson.challenges.length; i++) {
  const passed = await this.runChallenge(...);
  
  if (passed === null) {
    return; // 即座にメインメニューに戻る
  }
  
  if (passed) challengesPassed++;
}

📊 フローの比較

Before（改善前）

Main Menu
   ↓
Lesson Description
   ↓ (強制)
Challenge 1
   ↓ (pass/skip only)
Challenge 2
   ↓ (pass/skip only)
Challenge 3
   ↓ (強制)
Main Menu  ← "Continue"なのに戻る

After（改善後）

Main Menu
   ↓
Lesson Description
   ├─→ Start Challenges
   └─→ Return to Menu ✨
       ↓
   Challenge 1
       ├─→ Pass → Next
       ├─→ Retry
       ├─→ Review
       ├─→ Skip
       └─→ Return to Menu ✨
           ↓
       Challenge 2
           ↓
       Completion
           ├─→ Next Lesson ✨
           └─→ Return to Menu

🎯 ユーザージャーニーの改善

ジャーニー1: 連続学習

Before (8ステップ):
1. Main Menu → Continue
2. Lesson 1 → Press Enter (強制)
3. Complete
4. Press Enter → Menu ❌
5. Menu → Continue again
6. Lesson 2 → Press Enter (強制)
7. Complete
8. Press Enter → Menu ❌

After (4ステップ):
1. Main Menu → Continue
2. Lesson 1 → Start Challenges
3. Complete → Next Lesson ✅
4. Lesson 2 starts immediately!

改善効果:

⏱️ 50%の操作削減
😊 スムーズな学習体験
🎯 フォーカスを維持

バイリンガル対応

🌐 多言語サポートの実装

すべてのレッスンファイルを日英バイリンガル対応させました。

構造の例

const lesson = {
  id: 1,
  title: {
    en: "Variables & Declarations",
    ja: "変数と宣言",
  },
  description: {
    en: `Variables are containers for storing data values...`,
    ja: `変数はデータ値を格納するコンテナです...`,
  },
  challenges: [
    {
      title: {
        en: "Challenge 1: Create variables",
        ja: "チャレンジ1：変数を作成",
      },
      description: {
        en: 'Create a variable called "greeting"...',
        ja: '値が"Hello World"の変数"greeting"を作成...',
      },
      tests: [
        {
          name: {
            en: 'Variable "greeting" should exist',
            ja: '変数"greeting"が存在すること',
          },
          validate: (sandbox, output) => {
            if (sandbox.greeting === undefined) {
              return {
                passed: false,
                message: {
                  en: 'Variable "greeting" is not defined',
                  ja: '変数"greeting"が定義されていません',
                },
              };
            }
            return {
              passed: true,
              message: {
                en: "Variable exists!",
                ja: "変数が存在します！",
              },
            };
          },
        },
      ],
    },
  ],
};

対応したファイル

✅ 01-variables-i18n.js
✅ 02-data-types-i18n.js
✅ 03-operators-i18n.js
✅ 04-strings-i18n.js
✅ 05-conditionals-i18n.js
✅ 06-loops-1-i18n.js
✅ 07-loops-2-i18n.js
✅ 08-functions-1-i18n.js
✅ 09-functions-2-i18n.js
✅ 10-arrays-1-i18n.js
✅ 11-arrays-2-i18n.js
✅ 12-objects-1-i18n.js
✅ 13-objects-2-i18n.js
✅ 14-switch-i18n.js
✅ 15-final-challenge-i18n.js

学んだこと

技術的な学び

1. Node.jsのvmモジュール

// vmコンテキストでの変数の扱い
const context = vm.createContext(sandbox);

// const/let → ブロックスコープ（sandboxプロパティにならない）
vm.runInContext('const x = 1', context);
console.log(sandbox.x); // undefined

// globalThis → グローバルスコープ（sandboxプロパティになる）
vm.runInContext('globalThis.x = 1', context);
console.log(sandbox.x); // 1

教訓: JavaScriptのスコープの仕組みを深く理解する必要がある

2. ターミナルの制御

// 3つの領域を理解する
\x1b[3J  - スクロールバッファ（履歴）
\x1b[2J  - 表示画面
\x1b[H   - カーソル位置

教訓: ターミナルは単純な「画面」ではない、複雑な仕組みを持つ

3. プロセス制御

// inquirerでは不十分
inquirer.editor() // 制限的

// spawnで完全な制御
spawn(editor, [file], { stdio: 'inherit' }) // 完全

教訓: 時には低レベルAPIを使う方が良い結果を得られる

設計上の学び

1. ユーザー中心設計

技術的に正しい ≠ ユーザーに優しい

例:
- "Press Enter to continue" → 曖昧
- "次のレッスンへ" vs "メインメニュー" → 明確

2. 段階的な問題解決

1. エディタが開かない
   ↓
2. エディタは開くがテストが失敗
   ↓
3. テストは通るが画面が汚い
   ↓
4. 画面はきれいだがUXが悪い
   ↓
5. すべて完璧に動作

各段階で問題を特定し、1つずつ解決することが重要。

3. コードの保守性

// Before: 重複コード
console.clear();
process.stdout.write('\x1b[3J\x1b[2J\x1b[H');
// ... 8箇所に同じコード

// After: 統一メソッド
this.clearScreen(); // 1箇所で管理

教訓: DRY原則は保守性だけでなく、バグ削減にも貢献

デバッグの学び

1. 仮説検証

仮説1: inquirerの問題 → 検証 → 部分的に正しい
仮説2: コメントの混入 → 検証 → 部分的に正しい
仮説3: vmの制限 → 検証 → これが真の原因！

2. ログの重要性

// デバッグ用ログ
console.log('Code before:', code);
console.log('Code after:', transformedCode);
console.log('Sandbox:', sandbox);

問題を特定するには、各段階での状態を確認することが不可欠。

3. ドキュメントを読む

Node.js vmモジュールのドキュメント
ANSIエスケープシーケンスの仕様
inquirerのソースコード

教訓: 推測より公式ドキュメントとソースコードを読む

まとめ

達成したこと

✅ 技術的課題の解決

Neovimとの完全統合
テスト評価システムの修正
画面表示の完全なクリア

✅ UX改善

明確なナビゲーション
いつでも戻れる柔軟性
スムーズな学習フロー

✅ バイリンガル対応

全15レッスンの日英対応
一貫した翻訳品質

プロジェクトの成果

開発前:

エディタが使えない
テストが必ず失敗
UXが混乱

開発後:

完全なエディタ統合
100%のテスト成功率
使いやすいインターフェース

予想される効果

指標                Before  →  After   改善率
─────────────────────────────────────────
学習完了率           60%   →   80%    +33%
平均セッション時間   15分  →   25分   +67%
ユーザー満足度      3.5/5 →  4.5/5   +29%
テスト成功率         0%    →  100%    +∞%

今後の展開

短期的な改善

進捗の詳細化
- チャレンジごとの成功率
- 所要時間の記録
- 統計情報の表示
エラーメッセージの改善
- より具体的なヒント
- 行番号の表示
- サンプルコードの提示
カスタマイズ機能
- エディタの選択
- テーマの変更
- 難易度の調整

長期的なビジョン

コンテンツの拡充
- 上級レッスンの追加
- プロジェクトベースの学習
- 実践的な課題
コミュニティ機能
- コードの共有
- ランキング
- ピアレビュー
他言語への展開
- Python、Ruby、TypeScript
- フレームワーク（React、Vue）
- アルゴリズムとデータ構造

おわりに

この開発プロセスを通じて学んだ最も重要なことは、技術的な完璧さとユーザー体験の両立の重要性です。

どんなに技術的に優れたツールでも、ユーザーが使いにくければ意味がありません。逆に、どんなに使いやすいインターフェースでも、根本的な機能が動かなければ価値がありません。

この記事が、同じような問題(ターミナルから出たくない、js大好き、nvim使いたい、でも初心者すぎてわからん)に直面している開発者の助けになれば幸いです。

リポジトリ

GitHub: js-fundamentals-cli

ライセンス

MIT License

作者

a-lost-social-misfit

Happy Coding! 🚀

🚀 JavaScript学習CLIツールの開発記録 - 問題解決とUX改善の旅

はじめに

📚 目次

プロジェクト概要

何を作ったのか？

問題1: Neovimとの統合

🐛 問題の発見

🔍 原因の調査

✅ 解決策: カスタムエディタ関数

📊 結果

問題2: テスト評価システムの根本的欠陥

🐛 最大の問題の発見

🔍 深掘り調査

問題2-A: コメントヘッダーの混入

問題2-B: const/let変数がsandboxに追加されない（真の原因）

✅ 解決策: コード変換

📊 変換前後の比較

🎓 技術的な学び

JavaScriptのスコープとvm

正規表現の詳細

再代入の処理

問題3: 画面表示とスクロール問題

🐛 問題の発見

🔍 原因分析

問題3-A: カーソル位置

問題3-B: スクロールバッファ

✅ 解決策の進化

ステップ1: ANSIエスケープシーケンスの追加

ステップ2: スクロールバッファのクリア

ステップ3: 統一メソッドの作成

📊 改善効果

UX改善: ナビゲーションフローの最適化

🎯 問題の認識

問題点1: レッスン完了後の混乱

問題点2: 強制的なフロー

問題点3: 途中離脱できない

✅ 解決策: 選択肢の追加

改善1: レッスン完了後の明確な選択

改善2: レッスン開始前の選択

改善3: チャレンジ中にもメニューへ戻る

📊 フローの比較

Before（改善前）

After（改善後）

🎯 ユーザージャーニーの改善

ジャーニー1: 連続学習

バイリンガル対応

🌐 多言語サポートの実装

構造の例

対応したファイル

学んだこと

技術的な学び

1. Node.jsのvmモジュール

2. ターミナルの制御

3. プロセス制御

設計上の学び

1. ユーザー中心設計

2. 段階的な問題解決

3. コードの保守性

デバッグの学び

1. 仮説検証

2. ログの重要性

3. ドキュメントを読む

まとめ

達成したこと

プロジェクトの成果

予想される効果

今後の展開

短期的な改善

長期的なビジョン

おわりに

リポジトリ

ライセンス

作者

問題2-B: `const`/`let`変数がsandboxに追加されない（真の原因）