はじめに

インストール

LearnByDiff は VS Code、Cursor、その他の VS Code 系 IDE で使えます。

拡張機能ビューで LearnByDiff を検索するか、次のマーケットから開きます。

• Visual Studio Marketplace（VS Code）
• Open VSX（Cursor およびその他の Open VSX 系 IDE）

手動インストールもできます。リリースページから .vsix をダウンロードし、拡張機能ビューにドロップしてください。

コースを開く

Explorer の LEARN BY DIFF ビューのタイトルバーで「コースを開く」をクリックします（またはコマンドパレットで LearnByDiff: コースを開く）。

一覧から公式コースを選ぶか、次のデモコース設定 URL を貼り付けて確定します。

https://github.com/RJiazhen/learn-by-diff/blob/main/packages/courses-config/demo-course/.course-config/course.jsonc

フォルダー選択で学習ワークスペースの保存先を選びます。コース関連ファイルはそのディレクトリにダウンロードされます。

ダウンロード後の学習ワークスペース構成

対応 IDE では、次のリンクからワンクリックで開けます。

• VS Code
• Cursor

自分のやり方で学ぶ

コースを初めて開くと、第 1 章の開始スナップショットがローカルに展開されます。

デモコースでは Live Preview 拡張で index.html をプレビューできます。

章の「完了」をクリックすると、ローカルのコードがその章の完了スナップショットに置き換わり、完成形を確認できます。

「ドキュメント」ボタンで、その章の内容と学習目標を読めます。

章の中のファイルをクリックすると、目標に到達するためのコード変更を確認できます。

章フォルダーを単独で開いて比較したり、未開始に戻したりする操作は 機能 を参照してください。