CopilotでGrok Code Fast 1を使ってオセロ風ゲームを作らせてみた話

はじめに

Grok Code Fast 1が2025年9月2日まで無料で使えるという情報を見て、
試してみたくなり、軽く触ってみました。

https://x.ai/news/grok-code-fast-1

かなり雑なプロンプトにもしっかり動作するオセロ風ゲームが作れたことに感動したので、本記事を記載いたします。

やったこと

VSCodeのCopilotチャットからGrok Code Fast 1 (Preview)が選択できるようになっていたので、それを選べばOKです。

プロンプトはもっと凝りたかったのですが、時短で触りたかったのでちょっと雑に以下の内容で指示しました。

nextjsでオセロ風のゲームを作って。基調カラーは青が良いです

すると、まずこの最新のモデルへのアクセスを有効にせよと表示されました。

Enable access to the latest Grok Code Fast 1 model from xAI. If enabled, you instruct GitHub Copilot to send data to xAI Grok Code Fast 1. Learn more about how GitHub Copilot serves Grok Code Fast 1. During launch week, promotional pricing is 0x.

次に以下をターミナルで実行せよと表示されたので、言われたとおりにします。

cd /Users/cliffstar/grok-code-fast-1-lab/othello-game && npx create-next-app@latest . --ts --tailwind --app

その後、勝手にディレクトリや必要ファイルが作られていきました。

% tree -L 2 
.
└── othello-game
    ├── next-env.d.ts
    ├── next.config.ts
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── public
    ├── README.md
    ├── src
    └── tsconfig.json

そして以下を実行せよと表示され、localhost:3000で表示できる状態になりました。
ここまでちゃんと測ってませんが5分程度でしょうか？

cd othello-game && npm run dev

開くと、確かに青を基調とした背景で、きちんとオセロ風のゲームとして成立する画面が出来上がりました。
（すみません、スコア表示だけ背景色とほぼ被っていたのでちょっとプラスで指示した後の画面になります）

そしてチャット欄には以下のように表示されていました。

オセロ風のゲームを作成しました。Next.jsとTypeScript、Tailwind CSSを使って実装しています。

主な機能:
8x8のボード
黒と白の石を交互に置く
挟まれた石を自動でひっくり返す
有効な移動を青いリングで表示
石の数をカウント
ゲーム終了時の勝敗判定
リセットボタン
青の基調カラー:
背景: 青みがかったライトブルー (bg-blue-50)
ボーダー: 青 (border-blue-300)
有効移動のハイライト: 青 (ring-blue-500)
ボタン: 青 (bg-blue-600)
開発サーバーがポート3000で起動しています。ブラウザで http://localhost:3000 にアクセスしてゲームをプレイできます。

ゲームロジックは標準的なオセロのルールに従っています。クリックで石を置き、挟まれた石が自動で反転します。ゲームが終了すると勝者が表示されます

確かにゲームが終了すると勝者が表示されました。

おわりに

とにかく処理が速くて雑なプロンプトにも正確な動作をするものが作れることに大変驚いた印象ですが、他のモデルとちゃんと比較したわけではないので、
性能差が気になる方は他の記事を参考にしていただければと思います。

今回の構築だけで何トークンくらい使用されたのでしょうか？
ちょっと確認方法が分からなかったのですが、これだけ優秀だと課金する価値がありそうですね。

ここまで読んでいただきありがとうございました。