EY-Office ブログ

私のMacでQwen3をインストールしてReactアプリを作ってもらったが20分かかった・・・

最近、Alibabaからリリースされたオープンソースの大規模言語モデル(LLM) Qwen3が高性能だと話題になっています。ネット上の記事を読んでいると小型のモデルは私の持っているMac mini M2 Proでも動くらしいので、連休中にローカルマシンでQwen3を動かしてVS Code + ClineでReactのジャンケンアプリを作ってもらいました。

Qwen3 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-Codeollamaを指定し、いつものいうなジャンケン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がバリバリとコードを書いてくれるのかもしれませんね。

少し未来をのぞき見た感じがしました。

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ