SoftLoop - タイムラインを活用したプログラムの動作を可視化する学習システムの開発

プロジェクトページ

ここはなに?

Sechack365で開発した成果物を管理するウェブサイトです。

プロジェクト概要

このプロジェクトで開発したものは、高水準プログラミング言語の流れを可視化するツールです。解析対象プログラムに対して、コンパイラ理論を用いた解析を行い、プログラムの流れをトレースします。 トレースした結果を「タイムライン」というUIを用いて可視化します。UMLはオブジェクト単位なのに対し、本システムはコード1行単位で可視化します。プログラミング初学者の理解との助けとなると同時に、デバッカとしての活用を担うことを目標に、開発を進めています。

現在の配布物一覧

可視化ファイル配布リポジトリ

開発リポジトリ

成果物資料

Sechack365 ポスター

Sechack365 スライド (1月版)

技育博 配布資料

技育博 掲示資料 (Sechack365 スライド 1月版のA4リマスター)

フィードバックコメントの抜粋

プログラムがどう動いているのか(How)の部分についてグラフィカルに表現され、視覚的に非常に面白く、抽象的な概念に対する親しさを覚える

初心者から中級者以上まで幅広く役立てられそうなので、このプロダクトの秘めるポテンシャルはかなり大きい

再帰関数を使うプログラムなどは頭の中だけでの想像に限界があるのでこういうツールがあると学習が捗る

タイムラインに表示する粒度を式単位ではなく行単位、ブロック単位にできると見やすさがより向上するかも

配列のswapなど重要な処理に関して、アニメーションでその様子が強調されたら教材レベルになりそう

プロジェクトの歴史

最終更新日 : 2025年02月26日

2021年10月 プログラミング講師のアルバイトを始める。

2022年08月 プログラミング講師のアルバイトを退職する。この時の経験は、このプロジェクトにかなりの影響を与えた。

2023年01月 プロジェクトの原案が生まれる。

2023年02月 ちょっとした字句解析ができるようになる。(のちに再度実装)

2023年03月 高校を卒業する。引っ越しなどで忙しく、2月下旬と、3月はほとんど何もできなかった。

2023年04月 大学の情報系学科に入学する。同学年の人がプログラミングの授業で苦しんでいるのを見て、プロジェクトの原案を実現することを決意する。

2023年05月 原案をもとに、Sechack365に応募を決める。応募書類を書く。

2023年06月 Sechack365に採択される。

2023年07月 タイムライン画面のプロトタイプ版を作る。

2023年08月 高知県の「梶が森」という、標高が1400mぐらいの山の上で、プログラミングをする。標高1400mで、構文解析をする処理の基礎を作った!

2023年10月(ぐらい) コンパイラに基づいた構文解析ができるようになる。

2024年01月 独自言語の開発に目途が立ち、本件ソフトウェアに組み込む。タイムラインを活用した可視化ができるようになる。第一次フィードバックを実施する。

2024年02月 このページを開設する。

2024年03月 東京・秋葉原で発表(Sechack365成果発表会)・Sechack365を修了

2024年05月 東京・虎ノ門で発表(サポーターズ 技育博 2024年 05月 )

2024年08月 このプロジェクトで言語処理系を取り扱ったことがきっかけで、ピクシブ株式会社技術職サマーインターンに参加((2024年8月21日 ~ 30日 )

2024年10月 ~ 2025年01月 派生プロジェクト Declarative UI for M5Stack 開発・学内で発表

2025年02月 SoftLoopCompilerCompilerのリポジトリを独立 SoftLoopCompilerCompiler

現在のプロジェクトの目標

ポインタの可視化

回帰分析の可視化

クラスタリングの可視化

幅優先探索などグラフに関連したアルゴリズムの可視化

リンク集

開発者X(旧Twitter)

プログラミングは楽しい