Cline が有名なので、教育用の Cline を自作した話

TLDR;

１. Cline 1.0.4 を参考に、教育用の Cline（ウェブ版）を作りました

２.「教育用」とは、書き込むファイルを 穴埋めにし正解率チェックをしている から
３. デモ動画

経緯

最近、Cline など LLM がアツいですね。

いずれは自分の仕事も LLM に完全に取られてしまうのでは？と恐怖心しかない毎日ですが、便利さゆえの同時に幾つかの問題があります。

その１つに、「初心者の技術習得を妨げてしまう」 というものがありそうです。

皆さんもコーディングスキルを身につけたのには、コードを読んだりデバッグして試行錯誤した結果の賜物ではないでしょうか？

自分の感想ですが、コードを書いて試行錯誤する経験なしにただ与えられたコードを理解する能力はつきづらいと思います。

ただ、現状の暴走列車のような Cline ではそれらの能力をつけるのは難しいかもしれません。

なので、作ってみました。教育用の初心者向けの Cline を（VS Code拡張での web-view のデバッグが分からなかったので、とりあえずWebSocketで繋げるウェブ版で作りました）。

Cline 違って何が教育用なのか？

まだ 初期開発の段階で Cline1.0.4 を参考にしたウェブアプリなので、足りない機能はたくさんあると思います（2025/3/20 現在の Cline は 3.7.1）。

ただ大きな違いとして、書き込むファイルを 穴埋めにし正解率チェックをしている ところがあります。

例えば、Claude が css を書きこむ時には、通常の Cline ならCSSファイルの内容を見てユーザーが「Approve」するかを選択すると思いますが、
こちらのウェブアプリでは、その css ファイルのランダムな行をマスクし、そのマスクした処理のコメントを残してユーザーに一旦「ファイル名_your_edit.拡張子」のファイルで返します。

body {
/*This CSS property enables flexbox layout on an element, making it a flex container for better control over alignment and distribution of space among items.*/
------------------
    justify-content: center;
    align-items: center;
    min-height: 100vh;
/*Sets the margin spacing around an element to zero, removing any default spacing between elements.*/
--------------
    background-color: #f0f0f0;
}

上の CSS がその一例で、ユーザーには、その「your_edit」の一時ファイルの中でコメントを参考にして「-------------------------」部分にコードを書いてもらいます。
このような箇所が最大で１０箇所ほどあるので、全て埋めてもらい、できたら「Check Accuracy」を押して０〜１００点の点数を Claude に答えてもらいます。
その後で、正しいファイルが出力されます。

つまり、

• Cline では、「Approve」さえ押せばファイルが勝手に作られる
• こちらのウェブアプリでは、自分で一旦コードが隠されるので、隠されたコードの内容を記述したコメントに沿ったコードを書いて、それが正確かどうかをLLMに確認してもらってから、ファイルが作られます

これが、「教育用のCline」としてこれを作った所以です。

他は、Cline 1.0.4 とほぼ同じだと思います（analyze_file はないなど少しの違いはありますが...）。今後は VS Code 拡張にするなど、最新の Cline に寄せていければと思っています。

実際のデモ動画は、下のYoutubeをご覧になってください。

実装はどうなっているか？

実装は、README を見れば分かりますが、ファイル操作をするサーバーと、入力をしてもらうフロントに分かれています。

流れとしては、以下のような感じです。

１. サーバー起動。フロントの localhost5173 にアクセス

２. ウェブソケットでサーバーとフロントが繋がる

３. フロントでタスクを入力しボタンを押すと、サーバーが再帰的にClaude APIにリクエストを投げて、その結果を、フロントにウェブソケットで渡したり（say）、フロントに応答をお願い（ask）します

４. ファイルの書き込み・更新の場合のみは、上記の説明の穴埋め・穴埋めのコメント取得と点数評価を行います。途中経過は say・ask でフロントに通知されます

５. ３〜４を完了するまで続けます

ここまで見たら、そんな難しいことはやっていないように見えませんか？
実際 自分もCline 1.0.4 を移植して少し修正を入れただけではありますが、意外といける気がしないでしょうか？
自分も簡単なプロジェクトで動くことを確認しただけではありますが、いずれは難しいプロジェクトでも運用できるようにしたいですね。

開発の障壁

Cline1.0.4 のバックエンドとフロントのコードの移植は意外とできたんですが、それを動かすための環境作りが慣れていなかったので手こずりました。改めて下記記事の tsx で救われたことを感謝します。

感想

Cline は 1.0.4 くらいなら読みやすいので、読んで移植することをおすすめします！意外と移植して機能を追加するのも楽しいですよ！
ここまで読んでくれた皆様も、今後の Cline, Cursor の問題を見越していいプロダクトを作ってくださると嬉しいです！

現場からは以上でした！