Blog スタッフブログ

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はFlutter開発でCodexを導入し利用する方法について、

お仕事の中で得た知見を共有させていただきたいと思います。

環境構成

本来Flutter開発ではAndroid Studioをメインに開発しますが、Android Studioは2026年5月現在Geminiしかサポートされておらず、Codex拡張などを直接IDE上で利用することは難しいようです。

そのため、Codexを利用する場合はVSCodeと併用し、Android Studioの利用はパッケージ管理やエミュレータ機能の利用、デバッグやビルドなどに絞って利用するといった開発スタイルが楽でしょう。

まずはVSCode上へCodex拡張を導入しましょう。導入の手順は先月の記事を参考にしてください。

VSCode側へのCodex拡張の導入が完了したらAndroid Studioで作成したFlutterプロジェクトのディレクトリをVSCodeで開いて開発をはじめましょう。

導入テスト

それでは、まずはプロジェクトを正しく読み込めているかの検証をしてみましょう。次のプロンプトを実行してみてください。

このプロジェクトの構成を説明してください

筆者の環境での実行結果を添付します。概ねこのようにFlutterプロジェクトの説明が表示されていれば導入に成功しています。

動作が確認できたら実際に画面構築や不具合の原因調査を依頼していくと良いでしょう。

注意点

ここからは実際に利用して気をつける必要があると感じた点を記録していきます。

調査のみで済ませたい時に実装が暴発する

不具合調査を行なっている際は特に注意したい部分で、「この不具合の原因は何？」といったようなプロンプトを迂闊に実行すると、問題の調査を通り越してすぐ実装へ移ってしまう場合が多々ありました。コミット前作業が残っている際は打ち消しも難しいことがあるのでプロンプトの書き方は「調査のみでとどめてください」などと記載するように気をつけましょう。

画面レイアウト実装がうまくいかない

プロンプトによる指令のみだと画面レイアウトの細かな調整が難しい場合や、修正意図が伝わらない場合があります。Codexは画像を読み込むこともできるので、そのような場合は参照画像を渡すなどの対応で改善されることもあります。Codexが読み込むためだけの資料を配置するディレクトリを確保しておき、現状の画面スクリーンショットや画面の元デザインなどを置くことで適宜読み込ませるのも有効なようです。

その他注意すべき挙動

Flutter開発においてCodexを利用した場合、Codexはflutterコマンドを頻繁に利用します。flutter analyzeコマンドによって静的解析を行うだけなら問題ありませんが、問題解決や実装のためにflutter pub系のコマンドを実行しようとする場合もあります。パッケージ導入などは自分の手で行った方が安全でしょう。

これでFlutter開発にCodexを導入することができました。良かったですね。