Visual Coding Lab（ビジュアル・コーディング・ラボ）は、 Python と C のコードを書いて実行し、変数がどう変わるか、探索やソートが配列をどう動かすかを 画面上で見ながら学べる学習用のWebアプリです。 インストールは不要で、ブラウザだけで動きます。利用は無料です。
別サイト（visual-coding-lab.web.app）で開きます。登録もログインも不要です。
Feature 01 — できること
書いて、動かして、動きを見る
コードを1行ずつ実行して、そのとき変数がいくつになっているかを横に並べて確認できます。 実行中の行はハイライトされ、指定した行まで一気に進めることも、最初からやり直すこともできます。 探索やソートの教材では、配列の中身と「いま見ているインデックス」が図で動くので、 アルゴリズムが何をしているのかを文章ではなく動きで理解できます。
Feature 02 — 対応言語
Python と C
| Python | ブラウザ内で実行（WebAssembly）。ステップ実行・変数ビューに対応し、完全オフラインで動きます。 |
|---|---|
| C | サーバー側でコンパイルして実行し、出力を表示します。 |
Feature 03 — 通信環境が悪くても
オフラインで動く前提で作っています
発展途上地域や、通信が不安定な場所での利用を想定しています。 一度開けばオフラインでも学習を続けられるよう PWA として作られており、 スマートフォン・タブレット・低スペックのPCでも、ブラウザさえあれば動きます。
Feature 04 — 教材は先生が作れる
現地の言葉の教材を、現地の先生が
教師用の画面から、レッスンや授業（コース）を自分で追加・編集・削除できます。 カリキュラムはJSONで書き出し・取り込みができるので、作った教材を他の学校へ配ることもできます。 翻訳された教材を待たずに、教える人が自分の言葉で教材を用意できることを狙った設計です。
Links — 入口
用途別の入口
- 学習する（/learn）→
- 授業とレッスンを選び、コードを書いて実行します。まずはここから。
- 教材をつくる（/teacher）→
- 教師用の画面。レッスン・授業の追加と編集、カリキュラムの書き出しと取り込み。
- 学習ログを見る（/logs）→
- 実行回数、最終実行日時、最後に書いたコード、エラー回数を確認できます。
Background — 位置づけ
研究として進めているものです
Visual Coding Lab は、奇天烈倶楽部が研究プロジェクトとして開発しているアプリです。
商用サービスではなく、仕様や画面は今後も変わります。
不具合や消えるデータがあるかもしれない前提でお使いください。
他のアプリは公開アプリ一覧に、
開発者については奇天烈倶楽部についてにまとめています。