ClineとローカルLLMを用いたNext.jsアプリ開発に挑戦〜Qwen2.5-Coder-32B-Instructを使ってみた（後編）〜

はじめに

どんな人向けの記事？

• ローカル LLM に興味のある方
• Cline に興味のある方
• Qwen2.5-Coder-32B の性能に興味のある方
• LLM を用いたアプリ開発に興味のある方

本アプリの開発環境

1. Ubuntu 24.04.1 LTS (Core i5-8400 + メインメモリ 16GB)
2. Mac Studio (M2 Ultra 128GB) # ollama server

概要

前回の記事に引き続き、Qwen2.5-Coder-32B-Instruct を用いて、アプリ開発がどの程度出来るかを検証していきたいと思います。

https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct

以下のように前編と後編に分けて記事にしました。

• 前編（前回の記事）
  • Shaberi3 ベンチマーク評価
  • Open WebUI を用いた html + css + javascript の簡単なアプリ
  • OSS 版 Bolt.new

https://zenn.dev/robustonian/articles/qwen25_coder_32b

• 後編（今回の記事）
  • API や DB 機能具備した Next.js アプリ

ということで、今回は前回に比べてもう少し複雑なアプリ開発に挑戦しようと思います。
具体的にはAPI 機能と DB 機能を有した初歩的な Next.jsを作ります。

また、開発環境としては 1 週間ほど前に話題になった Cline を使うことにしました。
ちなみに Cline については、きのぴーさんの下記のツイートで知りました。

https://x.com/kinopee_ai/status/1855959024505856413

Cline + ollama で Next.js アプリ開発

それでは早速 Cline を VScode の拡張機能からインストールして、開発を開始します。

Setting

• 私の開発環境としては、Ubuntu 上の VScode、 Mac 上の ollama サーバーという構成だったので、Base URL を変更しモデルにはqwen2.5-coder:32b-instruct-q4_K_M-16kを選択。

前回の記事で紹介したように、num_ctx を大きくしすぎるとプロンプト処理に時間がかかるようになるので num_ctx = 16k を選択しました。
量子化サイズも q4_K_M でとりあえず問題なさそうだったので、この設定で開発を進めます。

少し性能が落ちそうですが、英語が苦手なので Custom Instruction に日本語で回答してを追加しました。

また、Always approve read-only operetionsにチェックを入れます。この設定は結構重要で、デフォルトではファイルを読む度に許可を求められます。

本当は全自動でタスクを完了してほしいので、ファイルの書き込みとかコマンドの実行も全部許可したいのですが、そのやり方はわかりませんでした。

もしわかる方がいたらコメントいただけると幸いです。

普段使いのエディタが VScode なのですが、Cline は半自動で動きます。
VScode 上で Cline を使いながら記事を書くなどの別の作業するのはやりづらく、VScode を 2 窓にするのもややこしいので、最終的に Cline は cursor（無課金）で動かすことにしました。

Task

さて、それではタスクを与えましょう。ここでも無茶振りをします。

Task

Next.jsを用いた面白いアプリを作って。

以下では、この無茶振りに対してどのようにアプリが出来上がっていくかを（私のわかる範囲で）順を追って説明します。

第一段階：TODO アプリ

まずは、ollama_app というプロジェクト名で Nextjs アプリの開発環境を作ってくれました。

面白いアプリケーションとしては、簡単な TODO アプリを作成することにしたようです。

やはり、前回同様無茶振りへの対応能力は高くなさそうですが、とりあえず許可します。

ollama_app というプロジェクト名になっているのは、ollama と DB を使ったアプリを作りたいという思いでollama_dbというディレクトリを作り、そこを root として Cline との会話を始めたためだと思います。

出来上がったアプリはこちら。あまりに無骨すぎる 🤣

第二段階：ランダムな引用を表示する機能を追加

ということで、ダメ出しします。パワハラプロンプトを発動。

※自分でも対応できそうなエラーだったので、"use client"; は手動で追加しました。

Cline（Qwen2.5-Coder-32B）の選択は、ランダムな引用を表示する機能を追加するでした。

ここで乱数に起因するエラーが出ますが、エラーメッセージを与えたら自動的に修正してくれました。

Task Completedと表示され、タスクを終わらせたがっているようですが、許しません笑

第二段階での成果物はこちら。少しだけ面白いアプリになりました。

第三段階

第二段階では DB 機能がないので、ブラウザを閉じたり更新したりするとタスクが全て消えてしまいます。そこで、次は DB 機能を追加してもらうことにしました。

DB まわりはほとんど知識がないので、とりあえず sqlite3 を入れたのですがエラーに対処しきれなかったため、最終的に Cline に提案されたbetter-sqlite3を採用しました。

このあたりまで来ると、次のテキストを生成するまでの時間が結構長くなってきており、ある程度手動でデバッグしたりしていました。

何往復かやり取りしている内に、とりあえず DB 機能は実装できました。

DB Browser for SQLiteで db ファイルを確認。

第四段階

次に UI をもう少し洗練させることにしました。

エラーが出なくなったと思ったら、こんな感じの画面になってました。。。css が認識されてない？

いろいろ試したもののどうしようもなくなったので、Cline に任せるのは諦めて shadcn-ui の導入を提案しました。

shadcn-ui の導入は Claude でも失敗することがあるのですが、案の定 Qwen2.5-Coder-32B も失敗したので私が代わりに導入しました。

このあと、button input label もうまく導入できなかったので、ここも私が対応。

こんな感じのエラーが出ました。

$ npx shadcn-ui@latest init
sh: 1: shadcn-ui: not found

$ npx shadcn-ui@latest add button input label
sh: 1: shadcn-ui: not found

その後、何往復かやり取りを続けることで UI を改善したアプリができました。

第五段階

第四段階で終わっても良かったのですが、せっかくなので ollama との連携まで挑戦することにしました。プロンプト処理にかなり時間がかかるように感じていたので、スレッドを閉じて新しいタスクから始めました。

いくつか指示を出しつつやり取りを繰り返すことで、当初作りたかった ollama、DB と連携した Next.js アプリを作ることができました！

最終的な成果物はこちら。

Cline+ローカル LLM を用いたアプリ開発に挑戦して思ったこと

役に立つアプリができたかというとかなり微妙なところですが、Next.js アプリの DB や ollama 連携等を Claude や ChatGPT に頼ることなく、実現することができました。時間はかかりましたが、これは結構すごいことなんじゃないかと思ってます。

その過程で感じた備忘録メモを書き留めておきます。

• 開発に要した時間と要件定義について

  • 今回このアプリを作るのにおそらく 5 時間以上要した。
  • 要件定義をしっかりした上で、タスクを与えればもう少し早く作れるかもしれない。

• 実務で使う場合、ローカル環境でしか開発ができない場合を除き、Claude を使うべき

  • Claude 3.5 Sonnet は API 料金がそこそこ高いが、とにかく速いし反復回数も少ない。おまけにクォリティも高いものができる。
  • ローカル LLM + Cline の場合は、長時間のローカル LLM 利用のための電気代と、開発中に"Approve"を何回もクリックするために人の意識と時間を拘束する必要がある。（これはすべて自動 Approve ができるようになれば一応は解決する）
  • 上記を踏まえると、実際のアプリ開発で Claude を使わないという選択肢はほぼないと考えられる。
  • 強いて言えば、機密性の高い情報を取り扱う環境で時間を掛けてでもアプリ開発がしたい場合には有用だと感じる。

• 成長機会が与えられる

  • これは意外なメリットだと感じたが、実のところ私は Claude よりも Qwen2.5-Coder-32B + Cline を使っている時の方が Next.js のアプリ開発に関して学ぶことが多かったように感じる。
  • というのも、Claude 3.5 Sonnet はエラーで止まることも少なく、出力もかなり速い。
  • 一方、Qwen2.5-Coder-32B + Cline はエラーが頻発するし、アウトプットもとにかく遅い。遅すぎて、待っている間に自分で調べて直したくなる。
  • そんな感じで繰り返し使っていると、ある程度 Cline より先回りして動けるようになってくる。つまり、自分が成長する。
  • 逆に、Qwen2.5-Coder-32B + Cline でできることが自分でもできるようになったら、いよいよ得るものはほとんどなくなるだろう。
    → この段階まで来たら、よほど時間を持て余している人以外は API 代で時間と品質を買うべき。

まとめ

今回の記事では、以下について記載しました。

• Cline と Qwen2.5-Coder-32B を用いた Next.js アプリ開発のプロセス

  • 初歩的な TODO アプリから API・DB 連携機能を備えたアプリの構築までの過程を紹介。

• Cline 開発環境のセットアップと注意点

  • VScode や ollama サーバーの設定、量子化サイズの選択、プロンプト処理の最適化。

• 開発段階ごとの Cline とのやり取りと UI 画面の変遷

• ローカル LLM とクラウド LLM の比較

  • ローカル LLM: 学習機会が多いが処理が遅い。
  • クラウド LLM: 高速かつ高品質だがコストが高い。

• 開発を通じて得られた知見

  • スキル向上: 手動でのエラー修正が学びの機会に。
  • 効率化の課題: 時間や品質を考慮すると、実務ではクラウド LLM を使うべき。

時間はかかりますが、ある程度小さな規模なら Cline と Qwen2.5-Coder-32B を用いることで、API や DB 機能を持った Next.js アプリの開発自体はできそうです。
すべてを Approve できれば、タスク完了まで自動でやってくれることも現実味を帯びてくるので全部おまかせモードのオプション追加を期待します。その時は、ダメ元で夜中にタスクだけ放り込んでおくなどができそうです。

まあ欲を言えば今回の記事で紹介したように、ある程度変更を加えたら git commit しつつ、その段階での成果物も保存しておき、制作過程をわかりやすくまとめておいてもらえると嬉しいですね。
このあたりは Custom Instruction を工夫するだけで実現できるかもですが、そのあたりの検証はまた機会があればやってみようと思います。

最後まで読んでいただきありがとうございました。次回もぜひよろしくお願いします。