プログラミング言語を整える。

プログラミング言語の比較を整える

＝ C・JavaScript・Java・Python を、エソラング図鑑と同じ尺度で並べて比べる

C（1972年・Dennis Ritchie）・JavaScript（1995年・Brendan Eich）・Java（1995年・James Gosling）・Python（1991年・Guido van Rossum）の4言語を、エソラング図鑑と共通の「読みにくさ」「書きにくさ」5段階の尺度と Hello World のコード例で比較する1ページ。Python の実行は既存の /python-playground/ に委ねる。静的ページ・送信ゼロ。

• ● 4言語の比較表（誕生年・作者・生まれた国・読みにくさ・書きにくさ・学べること）
• ● 各言語の Hello World のコード例と特徴
• ● Python は既存の実行環境（/python-playground/）へ導線

Python を整える（Playground）

＝ ブラウザでさわって学ぶ Python 練習場

ブラウザ内 Python (Pyodide WASM) で変数・データ型・関数・クラス・継承を体験できる Python 練習用 Playground。実行後の変数一覧と参照共有を可視化、データ送信なし。

• ● 4 ステップ + 応用のサンプルコード（クラス・継承・内包表記・例外）
• ● 実行後の変数インスペクタ（型・値・参照 ID）
• ● 同じオブジェクトを複数変数が指す「参照共有」をハイライト

SQL を整える（Playground）

＝ ブラウザでさわって学ぶ SQL 練習場

ブラウザ内 SQLite で CRUD（SELECT/INSERT/UPDATE/DELETE）と JOIN を体験できる SQL 練習用 Playground。サンプル DB 付き、データ送信なし。

• ● CRUD 4 動詞のサンプルボタン
• ● JOIN / GROUP BY のサンプル付き
• ● CodeMirror 6 シンタックスハイライト

JavaScript を整える（Playground）

＝ 「1」+ 1 が "11" になる——実行して初めて分かる間違いを、ブラウザ内で安全に試す

ブラウザ内の QuickJS（WASM・cdn.jsdelivr.net から初回のみ約1MB）で JavaScript を実行する Playground。本番 CSP が eval を禁止しているため、ブラウザ本体ではなく独立した WASM エンジンで動かす。Hello World・型の暗黙変換（"1"+1="11"、"1"-1=0）・存在しないプロパティ（TypeError）・引数不足（undefined 混入）・null の扱い（typeof null === "object"）・配列 map/filter/reduce・クラスの7サンプル。「JS は実行するまで間違いが分からない」を4題材で示し、同じ題材の /typescript/ へ誘導。console 出力・最後の式の値・エラー・所要時間を表示。無限ループは期限割り込みで2秒で停止。CodeMirror 6。送信ゼロ。

• ● 7サンプル（Hello World・変数と型・存在しないプロパティ・引数の数違い・null の扱い・配列 map/filter/reduce・クラス）
• ● 「実行するまで分からない」を4題材で解説・JS と TS の違い表
• ● /typescript/ の同じ題材ページへの導線

TypeScript を整える（Playground）

＝ 型検査 → JavaScript への変換 → 実行の3段階を見せる——JS では実行まで分からない間違いが「書いた時点」で赤くなる

ブラウザ内の typescript.js 5.9（cdn.jsdelivr.net から初回のみ約9MB＋lib 約0.4MB）を自前の CompilerHost で動かして型検査し、transpileModule で ES2020 の JavaScript に変換、QuickJS（WASM）で実行する3段階を可視化する TypeScript Playground。型エラーがあっても変換と実行は必ず行い「実行を止める仕組みではなく実行前に指摘する仕組み」を体験させる。診断コード（2322/2345/2554/2339/2531/18048/7006/2304）に日本語の一言説明。/javascript/ と同じ4題材＋TS 固有4題材（interface・ジェネリクス・ユニオン型・enum）。strict 切替。変換で消える部分を薄色表示。CodeMirror 6。送信ゼロ。

• ● 型検査・JS 変換・実行の3段階を必ず表示（型エラーがあっても変換と実行は続行）
• ● /javascript/ と同じ4題材が「書いた時点で赤くなる」ことを体験
• ● interface・ジェネリクス・ユニオン型・enum の TS 固有4本

Ruby を整える（Playground）

＝ 本物の Ruby 3.4 がブラウザ内で動く——配列・ハッシュ・ブロック・クラスを書いて確かめる練習場

ブラウザ内の Ruby 3.4.1（ruby.wasm・cdn.jsdelivr.net から初回のみ約17MB）を Web Worker で実行する Playground。$stdout/$stderr を StringIO に差し替えて puts/print/p の出力を捕獲。Hello World・変数と文字列補間・配列と each/map・ハッシュ・メソッドとブロック・クラス・Ruby らしい書き方（5.times・Range・&:）の7サンプル。無限ループは5秒で Worker を terminate して停止し次回作り直す。同じ Worker の間は変数・クラス定義を持ち越し、リセットで初期化。CodeMirror 6。送信ゼロ。

• ● 7本のサンプル（変数と文字列補間・配列と each/map・ハッシュ・メソッドとブロック・クラス・Ruby らしい書き方）
• ● Web Worker で ruby.wasm（Ruby 3.4.1）を実行、画面は固まらない
• ● 無限ループは5秒で自動停止・次回は作り直し

Lua を整える（Playground）

＝ 1始まりの添字と多値返却——Lua 5.4 をブラウザ内で動かして覚える練習場

ブラウザ内の Lua 5.4（wasmoon WASM・cdn.jsdelivr.net から初回のみ約0.3MB）で Lua を実行する Playground。Hello World・変数と型・テーブル・for/while・関数と可変引数・メタテーブル（__index）によるクラス風表現・1始まりの添字と多値返却の7サンプル。Web Worker で実行し、無限ループは3秒の時間超過で terminate して自動停止。print 出力と最後の return の戻り値を分けて表示。io/os は使わない。CodeMirror 6。送信ゼロ。

• ● 7サンプル（テーブル・多値返却・メタテーブルのクラス風表現を含む）
• ● Web Worker 実行で無限ループは3秒で自動停止
• ● 戻り値（最後の return）と print 出力を分けて表示

PHP を整える（Playground）

＝ ブラウザの中で PHP を書いて動かす練習場

PHP 8.4 を php-wasm（WebAssembly・cdn.jsdelivr.net から初回のみ約14MB）で blob Worker 内実行する練習場。<?php が無ければ補う。無限ループは6秒で強制終了。echo の出力は HTML として描画せずエスケープして表示。変数と文字列（echo・連結・補間）／配列と連想配列（foreach）／関数（型宣言・デフォルト引数）／クラス（継承）の4課題。送信ゼロ。

• ● ブラウザ内で PHP 8.4 を実行（php-wasm・送信ゼロ）
• ● <?php の有無どちらでも動く
• ● 無限ループは6秒で自動停止

GraphQL を整える（Playground）

＝ スキーマとデータを自分で書いて、GraphQL のクエリを試す練習場

graphql-js 16.11 を cdn.jsdelivr.net から動的読み込みし、buildSchema と簡易 rootValue リゾルバでクエリを実行する練習場。SCHEMA（SDL）／DATA（JSON）／QUERY＋VARIABLES の3欄。リゾルバ規約: フィールド名＝データのキー、id 引数は1件検索、他の引数はプロパティ一致で絞り込み、addXxx ミューテーションは複数形の配列へ追加。4課題。送信ゼロ。

• ● ブラウザ内で graphql-js を実行（送信ゼロ）
• ● SCHEMA／DATA／QUERY＋VARIABLES の3欄
• ● 4課題（フィールド選択／引数／フラグメントと別名／ミューテーション）

NumPy・pandas を整える（Playground）

＝ Excel の「並べ替え」「絞り込み」「集計」を pandas のコードで書く練習場

Pyodide 0.28 に numpy・pandas を追加ロード（初回のみ約9MB）して動かす練習場。コードを ast で分割し、最後の文が式なら値を取得。DataFrame/Series は columns・index・values を文字列化して JS 側でエスケープして表を組む（to_html は使わない）。4課題: NumPy 配列／辞書から DataFrame・head・describe／boolean index と sort_values／groupby.agg と pivot_table。Excel との対応表つき。送信ゼロ。

• ● 4課題（NumPy 配列／DataFrame を作る／絞り込みと並べ替え／groupby・pivot_table）
• ● 最後の式が DataFrame/Series なら表として表示（先頭50行）
• ● NumPy と pandas の役割分担・Excel との対応表

unittest を整える（Playground）

＝ 標準ライブラリだけでテストを書いて実行する練習場

Pyodide 0.28 同梱の標準ライブラリ unittest を動かす練習場（追加パッケージ不要）。仮想 FS に calc.py と test_calc.py を書き、TextTestRunner(verbosity=2) の出力をパーサでテストごとの合否・失敗の抜粋・合計に分解して表示。4課題: assertEqual／setUp／assertRaises／subTest と skip。unittest と pytest の違いを表で解説し /pytest/ と相互リンク。送信ゼロ。

• ● calc.py と test_calc.py の2タブ
• ● 4課題（assertEqual／setUp／assertRaises／subTest とスキップ）
• ● テストごとの合否一覧と失敗の抜粋