Tutor AI: 小さなアイデアがコード学習ツールになるまで

Tutor AI: 小さなアイデアがコード学習ツールになるまで

Tutorがコンセプトから強力なコード学習ツールへと進化した経緯をご覧ください。この革新的なコーディングプラットフォームの背後にある感動的なストーリーをお読みください。

ユーザーストーリーZard·

このプロジェクトは壮大な計画から始まったわけではありません。小さくて現実的な何かから生まれました。親戚の子供がC言語プログラミングを学ぶのを見ていて――授業に同席し、宿題を見て――ずっと思っていました:この学習方法は時代遅れだと。教師は教科書から講義し、学生はノートを取って演習をする。完全に無駄というわけではありませんが、本当の計算的思考を育てることはほとんどありません。

実際に気づいたこと

本当の問題は、学生が答えを見つけられないことではありませんでした。問題は:

  • コードを見つめても、各行が何をしているのか全くわからない

  • 一度読んで理解したつもりでも、どう繋がっているか説明できない

  • 最も重要なのは、そのコードが実際に何の問題を解決しているのかわからない

学んだことすべてが断片的でした。私は一つの考えに何度も立ち戻りました:学習とは点を集めることではなく――それらを繋ぐことです。

そこからTutorが始まりました。

https://tutor.artdance.net/

2. どのように構築したか、ステップバイステップ

2.1 シンプルなコード解説から始める

最初のアイデアは極めてシンプルでした:コードを貼り付けると、曖昧な要約ではなく、各行が実際に何をしているのか、なぜそう書かれているのかが見える。

そのためTutorの最初のコア機能は行ごとの解説でした。十数種類のプログラミング言語を自動検出し、古典的なC/C++の例――バブルソート、リンクリスト、二分探索――をワンクリックで分析できるようにしました。

2.2 解説だけでは不十分

一度理解しても、それを学んだことにはなりません。そこで3つの機能を追加しました:

フォローアップQ&A――任意の行をタップして質問を続けられます。AIは完全なコンテキストで応答するため、背景を再説明する必要はありません。自由形式の分析――任意のコードスニペットを貼り付けて個別に分析・議論できます。

練習問題――現在のコードに基づいて自動生成される選択問題、穴埋め問題、コーディング問題。もっと必要なら「さらに生成」を押すだけ。

これらが揃って、ようやく学習ツールらしくなりました。

2.3 知識を自律的に成長させる

解説、Q&A、練習問題があっても、すべてがまだ孤立した情報ブロックのように感じられました。私が本当に求めていたのは知識が有機的に成長する感覚でした。

そこでKnowledge Canvasを構築しました――インタラクティブで無限に拡張可能な知識グラフです。AIがコードから中心概念を抽出し、接続されたノードとしてマッピングします。任意のノードを「探索」して関連概念を発見したり、「展開」してサブトピックを生成したり、ノード上で直接質問したりできます。

気づいたときには、自分自身の知識マップを育てていることに気づきます。

2.4 コードは読むだけでなく、実行する必要がある

コードを理解する重要な部分は、それが実行されるのを見ることです。そこでC、C++、Python、Javaなど十数種類の言語をサポートするオンラインコード実行を統合しました。ユーザーはコードを実行し、入力を行い、ページ上で出力を確認できます。すべての実行は保存され、任意の実行結果についてAIに質問できます。

まず実行する→分析を読む→フォローアップの質問をする→練習する。この流れは、ただ解説を読むよりもずっと自然に感じられます。

2.5 構築プロセスがなぜこれほどスムーズだったか

全体のプロセスは予想以上にスムーズに進みました。その大きな理由は、Enterプラットフォームが重い作業の多くを処理してくれたからです。

  • UIコンポーネントすぐに使える状態でした。

  • バックエンドの必需品— ユーザー認証、データベースストレージ、行レベルセキュリティ — すべて組み込みのSupabase統合を通じて提供されました。

  • **AIモデルへのアクセスは統一されていました:**DeepSeek、Claude、GPT、Gemini、Doubao — キーを申請して各APIに個別に適応する必要はありません。Edge Functionを書いて呼び出すだけです。

そのため、インフラに数週間を費やす代わりに、初日から本当に重要なことに集中できました:説明は十分明確か?知識ポイントは繋がっているか?学習パスは適切に感じられるか?

3. Tutorの使い方

3.1 どこからでも始められる

  • **コードがありますか?**貼り付けて「分析開始」を押す

  • **コードがない?**AIで生成して、ワンクリックでエディタに入力

  • **ただ見ているだけ?**プリセット例をタップ — 2秒で完全な分析が表示されます

3.2 機能ページではなく、学習パス

中に入ると、ユーザーは自然に次のパスをたどります:

  1. コードを実行して何をするか感じ取る

  2. 行ごとの分析を読む

  3. 不明な点についてフォローアップの質問をする

  4. 理解を確認するために練習問題を行う

  5. Knowledge Canvasを開いて外側に探索する

すべてのステップ — 実行結果、会話、演習スコア、知識グラフ — は自動的に保存されます。いつでも戻ってきて、中断したところから続けられます。

4. 振り返って:本当に何についてなのか

振り返ってみると、Tutorは表面的にはコード解説ツールです。しかし実際にやっていることは、人々がコードの一部から始めて、散らばった知識を完全なものに繋げることを支援しています。

コードを貼り付ける → 実行する → 行ごとに理解する → より深い質問をする → 練習する → Knowledge Canvasを開く → ノードからノードへと辿る → マップが自分自身のものへと成長するのを見る。

これが機能するのは2つの理由があります。第一に、プロダクトデザイン — 説明、Q&A、練習、そしてキャンバスは孤立した機能ではなく、連続した学習パスを形成しています。第二に、Enterが提供する基盤 — UI、データベース、AIモデル、デプロイメント — により、インフラとの格闘ではなく「学習体験は本当に良いか?」にすべてのエネルギーを注ぐことができました。

最初の考えに戻ります:学習とは点を集めることではなく — それらを繋げることです。

それがTutorの役割です。その道を舗装する手助けをします。だからコードは単に「見た」ものではなく — 理解し、繋げ、自分のものにしたものになります。

単にコードを説明するのではなく — あなた自身の知識ネットワークを成長させる手助けをします

こちらもおすすめ

同じトピックから自動的にキュレーションされた記事です。