feat(tutorial): チュートリアル全体の体系的拡充 (Block / Ruby / Mesh / DNCL)

[takaokouji]

概要

Welcome モーダルが提示する 3 つの学習軸 (Block / Ruby / Mesh) と、高校生向けの DNCL に沿って、チュートリアルを体系的に拡充する。

各軸は Lv 別の難度 を持つ既存パターン (Lv1: コード挿入 / Lv2: ブロック手組み / Lv3: Ruby) を踏襲しつつ、軸ごとに最適化された構造で提供する。

全体設計

詳細な設計は docs/tutorial/improvement-plan.md に集約。Phase ごとに sub-issue を立てて段階的に進める。

進行管理

• docs/tutorial/progress.md に各 Phase の進捗を反映する (このトラッキング用ドキュメントは全 Phase 完了時に削除予定)
• Phase 1 完了時に progress.md を初版作成
• 各 Phase の sub-issue で個別の DoD を管理

サブイシュー

• feat(tutorial): Phase 1 - Mesh チュートリアルを 3 カテゴリ × 3 lv に再分類 #678 — Phase 1: Mesh チュートリアルを 3 カテゴリ × 3 lv に再分類
• feat(tutorial): Phase 2 - Ruby チュートリアル拡充 (TryRuby ベース、puts 中心) + setup 基盤 #679 — Phase 2: Ruby チュートリアル拡充 (TryRuby ベース、puts 中心) + setup 基盤
• feat(tutorial): Phase 3 - Block チュートリアル 4 シリーズ (書籍プロモーション) #680 — Phase 3: Block チュートリアル 4 シリーズ (書籍プロモーション)
• feat(tutorial): Phase 4 - DNCL チュートリアル (基礎 + アルゴリズム + 共通テスト対策) #681 — Phase 4: DNCL チュートリアル (基礎 + アルゴリズム + 共通テスト対策)

進行順とリリース粒度

順	Phase	規模	画像
1	Phase 1 (Mesh 再分類)	1 PR、~30 分	不要
2	Phase 2 基盤 (setup プロパティ)	1 PR、数日	不要
3	Phase 2 deck (Ruby)	2〜3 PR、1〜2 週	~50 枚
4	Phase 3 (Block 4 系列)	4 PR、3〜5 週	~76 枚
5	Phase 4 (DNCL)	3〜4 PR、3〜4 週	~70 枚

共通方針

deck 起動時の環境セットアップ機構 (Phase 2 の一部として先行実装)

新 deck プロパティ setup: { tab, rubyMode, extensions, rubyVersion } を導入し、deck 起動時にタブ・Ruby モード・拡張機能を自動セットアップする。Phase 2 以降のすべての新規 deck がこれに依存する。

カテゴリ命名

• Mesh: ストーリー型 (「メッセージを送ってみよう」「ふたりで会話しよう」「みんなで会話しよう」)
• Ruby: rubyBasics 単一カテゴリ
• Block: 教科ラベル型 (「はじめての操作」「ゲームを作ろう」「算数: 幾何学模様」「理科: マイクロビット」)
• DNCL: dnclBasics + dnclAlgorithms

Lv 番号付け

• 既存の Mesh 系列は Lv1/Lv2/Lv3 を維持
• 新規 Block 系列は 意図的に Lv0/Lv2/Lv3 を採用し、Lv1 を「書籍を読んで理解する段階」として空ける (書籍プロモーション設計)

Welcome モーダル連携

各 Phase 完了時に Welcome モーダルの該当 CTA (Build with blocks / Step up to Ruby / Connect with friends) が新しい deck を直接開けるように接続する。Welcome → 特定 deck 起動の機構は Phase 2 開始時に検討。

関連資料

• 全体設計: docs/tutorial/improvement-plan.md
• 既存チュートリアル機能: docs/tutorial/README.md
• チュートリアル開発ガイド: .claude/rules/scratch-gui/tutorial.md
• Welcome モーダル実装: packages/scratch-gui/src/components/welcome-modal/welcome-modal.jsx