NEWS
新ツール「Python を整える（Playground）」をリリースしました
「Python を整える（Playground）」を公開しました。
SQL Playground に続く Code Playground シリーズ第 2 弾です。SQL が「CRUD の 4 動詞」で骨格を示したのと同じ思想で、Python は「変数 → データ型 → 関数 → クラス」の 4 ステップを最前面に置きました。
すべて ブラウザ内処理。本物の CPython（Pyodide）が WebAssembly で動くので、書いたコードもデータも一切サーバに送られません。社内データや個人情報を含むスクリプトを試しても安全です。
主な機能（4 つ）
1. 4 ステップ + 応用のサンプルコード
「人のコードが読める／自分でも書ける」レベルに最短で到達する 4 ステップ：
| STEP | 内容 | サンプル |
|---|---|---|
| STEP 1 | 変数 | name = "太郎"; age = 30 の基本形 |
| STEP 2 | データ型 | リスト・辞書・タプル — プログラムの 9 割はこれで足りる |
| STEP 3 | 関数 | def で「入力 → 処理 → 出力」を再利用 |
| STEP 4 | クラス | class で属性とメソッドをまとめる、OOP の入口 |
加えて応用編として 継承（オーバーライド）、リスト内包表記、例外処理（try/except）も用意。
2. 変数インスペクタ — 実行後のメモリを可視化
実行後、右側のサイドバーに**「現在メモリに存在する変数」**の一覧を表示：
- 変数名・型（
int/str/list/Person等）・値の repr - カテゴリ別の色分け（primitive / collection / callable / instance）
- 参照 ID（同じオブジェクトを指す変数を ↔ で連結）
a = [1, 2, 3]; b = a のような「同じリストを a と b の両方が指している」状況が一目で分かる設計。Python の「参照」概念を抽象論ではなく実物で学べます。
3. CodeMirror 6 + Python シンタックスハイライト
軽量な CodeMirror 6 に Python 文法を載せて、予約語・文字列・数値・コメントを色分け表示。
- Ctrl/⌘ + Enter で即実行
- エラーは下に Python トレースバック をそのまま表示（メッセージから学べる）
- print 出力はリアルタイムにキャプチャ
4. Pyodide CDN ロード（軽量デプロイ）
Python 本体（Pyodide）は CDN（cdn.jsdelivr.net）からロード。
- 初回ロード ~10MB（5〜15 秒）、2 回目以降はブラウザキャッシュから瞬時
- ローカルサイズはわずか + 数 KB（JS のみ）で済む
- NumPy・Pandas など主要ライブラリも動作可能（必要に応じて Pyodide が動的ロード）
なぜ作ったか — 「最初の一歩」を最短化
Python 入門書を読み終えた後、「じゃあ自分で書いてみよう」となる瞬間に次のハードルがあります：
- Python の環境構築（pyenv / venv / pip / PATH の設定）
- VS Code / PyCharm のインストールと拡張機能の設定
- 「Hello World」までに 30 分かかる
本ツールは 「書く → 実行 → 変数が見える」のフィードバックループを最短化することだけが目的です。問題集はあえて作らず、サンプルコードで「お手本」を呼んで、自由に書き換える方式。
特に**「変数とオブジェクトの参照」**は、SQL の「テーブルとレコード」、C の「メモリとポインタ」と並んで、プログラミングを理解する上での核心概念。これを抽象的な説明ではなく、実物の変数を画面の右側に並べて見せることで、頭に入りやすくしました。
よくある質問（抜粋）
| 質問 | 答え（要約） |
|---|---|
| サーバに送られる？ | いいえ、WASM 上の CPython がブラウザ内で完結 |
| Pyodide って何？ | CPython 公式処理系の WebAssembly 版。本物の Python 3.12 |
| 変数とオブジェクトの違いは？ | 変数は「名前のラベル」、オブジェクトはメモリ上の実体。a = b で同じ実体を 2 つの名前が指す |
| PEP 8 の要点は？ | インデント 4 スペース、変数は snake_case、クラスは PascalCase、is None で比較 |
詳細は ツールページの FAQ で 9 問掲載しています。
Code Playground シリーズの今後
- ✅ Phase 1: SQL Playground — 公開済み（CRUD の 4 動詞）
- ✅ Phase 2: Python Playground — 本日公開（変数 → クラス）
- 🔄 Phase 3: C Playground（予定）— tcc.wasm でメモリ図とポインタ可視化
「変数」「クラス」「メモリ」など、プログラミングの抽象概念を触って分かるツール群を、totonoe の中に少しずつ育てています。
