最近、Alibabaからリリースされたオープンソースの大規模言語モデル(LLM) Qwen3が高性能だと話題になっています。ネット上の記事を読んでいると小型のモデルは私の持っているMac mini M2 Proでも動くらしいので、連休中にローカルマシンでQwen3を動かしてVS Code + ClineでReactのジャンケンアプリを作ってもらいました。
Bing Image Creatorが生成した画像を使っています
ローカルマシンでLLMを動かす
現在、有名なオープンソースのLLMはMac上で簡単に動かせます。そのためのツールがいくつも公開されていますが、今回はOllamaを使いました。このエリアは詳しくないので、ネット上にたくさんの記事がありオープンソースでコマンドラインで動くツールだったのでOllamaを採用しました。
さてOllamaですが、ホームページからダウンロードしインストールするだけで動きました。
Qwen3にはパラメーター数の違いで複数のモデルがあり、パラメーター数が多い方が賢いですが計算リソース(GPUとメモ)が必要です。またQwen3にはMoE(Mixture-of-Experts)モデルという入力ごとに必要なエキスパートのみを選択的に動作させことで計算リソースを節約できるモデルもあります。
ネットの記事によると、Qwen3-30B-A3B
というMoEモデルなら、私のMac miniの32Gbyteメモリーでも動くそうです。
ということで、ollama run qwen3:30b-a3b
でモデルをダウンロードし起動できました。
ollama
コマンドで見るとモデル自体は18GByte、実行時には29GByteメモリーを使っていました。32GbyteもMac miniではギリギリですね。
$ ollama list
NAME ID SIZE MODIFIED
qwen3:30b-a3b 2ee832bc15b5 18 GB 4 days ago
llama3:latest 365c0bd3c000 4.7 GB 4 days ago
$ ollama ps
NAME ID SIZE PROCESSOR UNTIL
qwen3:30b-a3b 2ee832bc15b5 29 GB 23%/77% CPU/GPU 4 minutes from now
動作させている時のメモリーとGPUの使用状況は以下のような感じでした。ファンの音は聞こえませんでしたが、めずらしくMac miniが暖かくなっていました!
さて、いつものジャンケンReactアプリを作ってもらう
いつも使っているRoo-Codeでollama
を指定し、いつものいうなジャンケンReactアプリを作ってもらうと、以下のようなエラーが出てリトライから抜けられませんでした。
Roo tried to use ask_followup_question without value for required parameter 'question'. Retrying...
ということでRoo-Codeは諦め、Clineを使ってみました。作ってもらうアプリはいつもより少し簡単にしました。
# ジャンケンを行うReactアプリを作って下さい
## 画面仕様
- 人間はグー、チョキ、パーのボタンを押し、コンピューターは乱数でジャンケンの手を作り対戦します
- 勝敗(勝ち、負け、引き分け)はコンピューターが判定します
- 対戦の結果(人間の手、コンピューターの手、勝敗)を表形式で表示します
## 環境
- プロジェクトを新規に作成してください
- フレームワークはNext.js
- TypeScript を使ってください
- スタイリングはTailwind CSS を使ってください
1. プロジェクト作成
プロンプトを入れてから5分くらいして、いろいろと検討した結果が表示され。以下のコマンドを実行したいですと表示されたので実行しました。
少しオプションが足りませんでしたが、まあ良いでしょう。
npx create-next-app@latest janken-app --typescript --tailwind
2. コーディング
そして、また5分後にpages/index.tsx
ファイルを作成すると言って、ゆっくりとコードが書かれて行きました。私のタイピングよりも遅いかな?
3. AIのエラー対応
実はReactのコードは以下のように、プロジェクト下の janken-app/app/page.tsx
に書かないといけないのですが、
なぜか、pages/index.tsx
に作ってしまいました。
├── janken-app
│ ├── app
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── eslint.config.mjs
│ ├── next-env.d.ts
│ ├── next.config.ts
│ ├── package-lock.json
│ ├── package.json
│ ├── postcss.config.mjs
│ ├── public
│ │ └ ・・・
│ ├── README.md
│ └── tsconfig.json
└── pages
└── index.tsx
index.tsxは、プロジェクトの外にあるのでCannot find module 'react'...
というエラーになっていました。そこでAIは考え
「npm install react react-dom
を実行したい」と言ってきたのですが、Rejectして終了にしました。
4. 手動で修正
pages/index.tsx
の内容をjanken-app/app/page.tsx
にコピーし、先頭に"use client";
を追加したところ、無事に動作しました !!
しかし、表示された画面は以下でした。
たしかに、プロンプトの仕様を満たしてそうですね。😅
まとめ
ログを見てみるとAIが有効に働いていたのは10分くらいでしたが、無意味なエラー対応等を含めると20分くらい時間がかかりました。
しかし、生成されたコードは動きました。中堅以上のプログラマーでも10分で、このアプリを作れる人は多くないと思います。
さらに、
- 今回動かしたAIモデルは、小さいモデルで最新のClaude3.7やGemini 2.5等に比べるとかなりレベルが低いものです
- 動かしたMac miniも2023年に版でM2Proプロセッサで、最新のM4に比べると遅いようです
現在でもMac Studioを買えば、Claude3.7やGemini 2.5レベルのQwen3をローカルで動かせるようです。そうすれば生成されるコードの品質は上がると思います。
ただし値段は150万円くらいです❗ しかし、NVIDIA DGX SparkのようなMac Studioより安価なAI PCも登場しているので、いずれは少し高いくらいのPCでも
ローカルでAIがバリバリとコードを書いてくれるのかもしれませんね。
少し未来をのぞき見た感じがしました。