NEW 新たにAIワーカー機能が登場。あなただけのAI社員をつくろう! 詳しくはこちら
AIワーカー機能であなただけのAI社員をつくろう! 詳しくはこちら
【実務で使える?】Geminiでコーディング!対話でのコンポーネント作成からテストまで
【実務で使える?】Geminiでコーディング!対話でのコンポーネント作成からテストまで
Yoomを詳しくみる
この記事のテンプレートを試す
【実務で使える?】Geminiでコーディング!対話でのコンポーネント作成からテストまで
AI最新トレンド

2026-03-12

【実務で使える?】Geminiでコーディング!対話でのコンポーネント作成からテストまで

Kana Saruno
Kana Saruno

みなさん、毎日の開発業務お疲れ様です!

プログラミングをしていると、「もっと効率よくコードが書けたらいいのに」と思うことはありませんか?

最近はAIによるコーディングサポートが当たり前になりつつありますが、その中でも「Gemini」を活用したコーディング支援が多くのエンジニアから熱い視線を集めているんです。

この記事では、Geminiを使った開発支援の代表格である「Gemini Code Assist」の基本機能やスムーズな導入方法について、初心者の方にも分かりやすくお話ししていきます。

さらに、自分でコードを打たずにAIとの会話だけでシステムを作っていく、今話題の「Vibe Coding(バイブコーディング)」を私が実際に試してみた体験談もたっぷりとお伝え!

開発スピードをグッと上げたい方は、ぜひ最後までお付き合いください!

📱Yoomを使えばGeminiでのコーディング周辺の業務も自動化できる

Geminiでコーディングを効率化しても、要件の整理やメール対応など、開発の前後に発生する作業は意外と手つかずだったりしますよね。
Yoomは、こうしたさまざまなSaaSやアプリをノーコードで連携し、業務フローを自動化できるツールです。

[Yoomとは]

たとえば、Gmailに届いた問い合わせにAIワーカーがマニュアルをもとに下書きを作成し、承認を経て返信まで完了するテンプレートなど、開発チームの負担を減らす仕組みがすぐに試せます。
コードを書く作業はGeminiに任せつつ、その前後の雑務はYoomで自動化する。この組み合わせ、ぜひ試してみてください👀


■概要
システム開発の要望や機能改善に関するメールを受け取るたびに、内容を整理して要件定義書を作成する作業は手間がかかるのではないでしょうか。担当者によってアウトプットの質にばらつきが出たり、ドキュメント化を失念したりするケースも少なくありません。
このワークフローは、特定のメール受信をトリガーとして、AIエージェントが自動で要件定義を支援し、その結果をNotionに記録するため、こうした課題の削減に繋がります。
■このテンプレートをおすすめする方
  • ユーザーからの要望メールをもとに、要件定義を行うプロダクトマネージャーや開発担当者の方
  • AIエージェントを活用した要件定義支援のプロセスを自動化し、業務を効率化したい方
  • Notionを情報集約のハブとして活用しており、手作業での転記に手間を感じている方
■このテンプレートを使うメリット
  • メールの内容をAIが自動で整理・要約するため、要件定義書の作成にかかる時間を短縮し、コア業務に集中できます。
  • 担当者のスキルに依存せず、AIエージェントによる要件定義支援で一定の品質を担保でき、業務の属人化を防ぎます。
■フローボットの流れ
  1. はじめに、NotionをYoomと連携します。
  2. 次に、トリガーでメールトリガーを選択し、「メールが届いたら」というアクションを設定します。
  3. 次に、オペレーションで、AIワーカーに対して、受信したメールの内容から要件定義を行うためのマニュアル(指示)を作成します。
  4. 最後に、オペレーションでNotionの「データベースにアイテムを追加する」アクションを設定し、AIワーカーが生成した要件定義を記録します。
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
  • メールトリガーでは、フローを起動する条件として、特定のメールアドレスや件名に含まれるキーワードなどを任意で設定してください。
  • AIワーカーへの指示内容は、アウトプットの形式や分析の観点などを自由にカスタマイズすることができ、連携するNotionのアカウントや保存先のデータベースも任意で設定が可能です。
■注意事項
  • NotionとYoomを連携してください。AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  • AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。

■概要
日々の問い合わせメールへの返信業務に、多くの時間を費やしている方も多いのではないでしょうか。一つ一つのメールを確認し、適切な文面を作成する作業は、丁寧さが求められる一方で、定型的な業務になりがちです。
このワークフローを活用すれば、Gmailに特定の問い合わせが届くと、AIエージェントがマニュアルを元に自動でメールの下書きを作成し、担当者の承認を経て返信するまでの一連の流れを自動化するため、こうした課題をスムーズに解消できます。
■このテンプレートをおすすめする方
  • Gmailでの問い合わせ対応に多くの時間を費やしているカスタマーサポート担当者の方
  • AIエージェントによるメール下書き作成の自動化で、返信の質と速度を両立させたい方
  • 属人化しがちなメール対応を標準化し、チーム全体の業務効率を改善したいマネージャーの方
■このテンプレートを使うメリット
  • Gmailに問い合わせが届くとAIが自動でメールの下書きを作成するため、返信文面の考案や入力にかかる時間を短縮することが可能です。
  • マニュアルに基づいた下書き作成と承認フローを経ることで、担当者による対応内容のバラつきや記載ミスなどのヒューマンエラーを防ぎ、業務品質の標準化に繋がります。
■フローボットの流れ
  1. はじめに、GmailとGoogleドキュメントをYoomと連携します。
  2. 次に、トリガーでGmailを選択し、「特定のキーワードに一致するメールを受信したら」というアクションを設定します。
  3. 次に、オペレーションでAIワーカーを選択し、問い合わせへの返信メールの下書きを作成するためのマニュアル(指示)を作成します。
  4. 次に、オペレーションで担当者依頼機能を選択し、AIが作成した下書きを担当者が確認・承認するための依頼を設定します。
  5. 最後に、オペレーションでGmailの「メールを送る」アクションを設定し、承認された内容でメールを返信します。
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
  • Gmailのトリガー設定では、自動化の対象としたい問い合わせメールに含まれるキーワード(「料金について」「資料請求」など)を任意で設定してください。
  • AIワーカーの設定では、利用したいAIモデルを任意で選択し、参照させたいマニュアルや返信文のトーンなど、メールの下書きを作成するための指示を任意で設定してください。
  • 担当者依頼機能では、承認を依頼する際の内容の詳細や、確認事項といったフォーム項目を任意で設定してください。
■注意事項
  • Gmail、GoogleドキュメントのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。
  • AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  • AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。

👐Geminiを活用したコーディングとは?

Googleが提供している「Gemini Code Assist」、皆さんはもうチェックされましたか?

これは、Googleが誇る強力なAIモデル「Gemini」をベースにした、プロ向けのAIコーディング支援ツールなんです!

普段愛用しているVisual Studio Code(VS Code)やIntelliJ IDEA、Android Studioといったおなじみのエディタに、専用の拡張機能としてサクッと組み込んで使えるのが嬉しいポイント。

一番の魅力はエディタ上にあるチャット画面やコードの自動補完機能を使って、「こんな機能を作って」と普段の言葉で伝えるだけで、AIが空気を読んで関数やクラスをまるごと書き上げてくれるところです。

単にコードを作ってくれるだけじゃありません。

今あるコードのバグを見つけて直してくれたり、もっと読みやすいきれいなコードにリファクタリングしてくれたり、さらには面倒なユニットテストまで作ってくれたりと開発のあらゆる場面で助けてくれます。

まるで優秀なペアプログラミングの相棒が隣にいてくれるような、そんな安心感を与えてくれる頼もしいツールといえるでしょう。

🪏もっと深掘り「Gemini Code Assist」

出典:https://codeassist.google/

ここで、個人開発者や予算を抑えたいチームのみなさんに朗報!

実は、これまでは企業向けの有料機能というイメージが強かった高度なAIコーディング支援ですが、Gemini Code AssistがIDE(統合開発環境)を通じて無償で利用できるようになりました。

これなら、個人のプログラマーさんや立ち上げたばかりのスタートアップでも、最新のAIアシスタントをコストを気にせず毎日の開発に取り入れられますよね。

導入の手順も驚くほど簡単なので安心してください!

例えばVS Codeを使っている方なら、拡張機能の検索画面で「Gemini Code Assist」と入力して、インストールボタンをポチッと押すだけであっという間に準備完了。

あとはご自身のGoogleアカウントでログインしてプロジェクトをつなぐだけで、すぐに便利なチャットや強力なコード補完が使い始められますよ。

また、「会社の機密コードまでAIに読み込まれたらどうしよう」と心配な方もいるかもしれませんが、プロジェクトのフォルダに「.aiexclude」というファイルを作って除外設定をしておけば、大切なコードをしっかり守りながらAIのサポートを受けられます。

セキュリティ面もばっちり配慮されているので安心ですね!

💪【使ってみた】Geminiでコーディング。いざ実践!

さて、ここからは私が実際に試してみた体験談をお話ししますね!

今回は、キーボードでカタカタとコードを打つのではなく、AIに「こうしてほしい!」とお願いするだけで開発を進める「Vibe Coding」という手法にチャレンジしてみました。

皆さんの参考になるよう、3つの検証項目に分けてリアルな感想をお届けします。

【検証1】自然言語のプロンプトだけでコンポーネントをゼロから生成

まずは準備運動として、VS CodeのサイドバーからGeminiを呼び出し、以下のようにお願いしてみました。

Geminiへの入力プロンプト

ユーザー情報とプロフィール画像を表示するReactコンポーネントを作ってください。
前提条件は以下です。
言語:TypeScript
スタイル:Tailwind CSS
~(省略)~

すると、ほんの数秒待っただけで、必要なライブラリの読み込みから型定義、おしゃれなデザインまで完璧に仕上がったコードが返ってきたんです!

コード解説においては、どの部分がどのような様式であるのか、どのような印象で仕上げているのかをテキストでわかりやすく記載してくれているので、実行前の段階で情景をイメージすることができるようになっています。

これをそのままエディタに貼り付けるだけでベースが完成してしまい、「今までの苦労は何だったんだろう…」と感動してしまうくらいスムーズなスタートが切れました。

なお、追加で

このカードに「フォローする」ボタンを追加し、クリック時にアクションを実行できるように変更してください。

というプロンプトを投稿したところ、5分ほどでボタンが追加された内容に変更するコードが提示されました!

直前に生成したデザインを考慮してカラーを選定しているため、デザイン全体が違和感のないものに仕上がりますね。

Geminiをわざわざ開くことなく、VS codeの画面上だけでコードの提案がなされるため、タブやチャット画面が乱立することなく、すっきりとした環境で開発を進められます。

【検証2】チャットでの対話を通じたエラー解消とリファクタリング

次は少し意地悪をして、わざと変数を消してエラーが出るようにしてみました。

画面に表示された赤いエラーメッセージをコピーして、以下のプロンプトを投稿します。

入力プロンプト

以下のコードでエラーが出ています。
【エラーメッセージ】 ReferenceError: userName is not defined
【問題のコード】
〜省略〜
このエラーが発生している理由と、正しい修正方法を教えてください。
VS Code 上でそのまま貼り替えられるように、修正版のコードも合わせて出力してください。

Vibe Codingの手法を活かすべく、この「VS Code 上で加工できるように」と指定した部分がプロンプトのポイントです!

こちらも検証①と同じくらいの時間をかけて、結果を出力してくれました。

エラーの要因は「UserNameが定義されていないことで発生している」ということを指摘した上で、貼り付け可能なコードも漏れなく生成してくれていますね!

さらに「このコード、もっと使い回ししやすいようにきれいに分割してくれる?」と頼むと、プロ顔負けのクリーンな設計案を提案してくれました!

整形してくれたことで他の場面でもコードを引用できるようになったので、その都度手動でコード構造を加工する手間が省けたのは大きなメリットです。

難しいコード修正もプロンプトの入力だけで済んだことには驚き...

なお、このまま修正対応を行ってもいいのですが、非エンジニアが操作するのはハードルが高い場面もあるので、状況に応じてベテランエンジニアにしっかりとコードレビューしてもらった方が無難といえるでしょう。
このハイブリッドな運用もAIの上手な活用法の一つ。


【検証3】完成したコードに対するテストコードの自動生成

最後に、後回しにしがちなテスト作成をお願いしてみました。

入力プロンプト

作ってもらった UserProfileCard コンポーネントに対して、 Jest と React Testing Library を使ったテストコードを書いてください。
前提条件は以下です:
テストランナー:Jest
テスト用ライブラリ:@testing-library/react, @testing-library/jest-dom
React + TypeScript プロジェクトです。
テストで確認したいポイント:
〜(省略)〜
以下がコンポーネントのコードです。(コード貼り付け)

このように伝えると、コンポーネントの中身をしっかり理解して、丁寧なテストコードの解説まで込みで、一瞬で書き上げてくれました!

テストを書く心理的なハードルが一気に下がり、対応スピードが体感で30〜50%は速くなった気がします。

これはもう、これからの開発に手放せない相棒になりそうです。

全体の検証を通して

  • 一つの画面上で手動での開発とGeminiによるサポートが受けられるので、作業中の不安(本当にこのコード構造で動作するか など)が軽減した
  • 生成結果をそのままエディタに反映できるので、コピペ漏れが減る
  • 不明なコードがあった場合には、すぐにGeminiに相談できるので、先輩のてを煩わせる心理的負担がなくなった

このようなメリットがあると評価しました!

Geminiにすぐに相談できる環境は、実務だけではなく、プログラミングの学習にも応用できるでしょう。

使用場面を限定しない能力は、さすがGemini!と感嘆するばかりです!

👥Geminiと他社AIツール(GitHub Copilot・Cursorなど)の比較

AIでコーディングを支援してくれるツールといえば、すでにGitHub Copilotを使っている方やAI特化型エディタのCursorが気になっている方も多いのではないでしょうか?

「Gemini Code Assistとどう違うの?」と疑問に思うかもしれませんね。

実は、Geminiには他にはない圧倒的な強みがあるんです。

このように、他のツールが「一般的なコードを書く」のが得意だとすれば、Geminiは「大規模な開発やGoogleの環境に特化して真価を発揮する」ツール。

今のツールはちょっと自分には合わないかも...と感じている方は、ぜひ一度Geminiに乗り換えてみる価値はありますよ!

🌲Yoomでできること

ここまで、Geminiを使ってプログラミング自体をいかに楽にするかをお話ししてきましたが、私たちの仕事ってコードを書くだけじゃ終わらないですよね。

そこで皆さんにぜひ使ってみてほしいのが、先ほども少し触れたSaaS連携プラットフォームのYoom。
Yoomには、指示を渡すだけでAIが自律的にアプリ操作や情報検索をこなしてくれるAIワーカーという仕組みがあり、これを活用したテンプレートが豊富に用意されています。

たとえば、Teamsに届いた社内の質問にAIワーカーが社内情報検索を行い自動回答してくれるテンプレートを使えば、問い合わせ対応の手間をぐっと減らせます。

Geminiでのコーディング効率化に加えて、日々のルーティンも一緒に減らしていきたい方は、ぜひ試してみてくださいね。


■概要
日々の業務で発生する様々なファイルを特定のフォルダに集約していると、後からの仕分けや整理に手間がかかることはありませんか。このワークフローを活用すれば、Google Driveに新しいファイルが追加されるたびに、AIエージェント(AIワーカー)がファイル内容を分析し、適切なフォルダへ自動で移動させます。手作業によるフォルダ整理の手間を解消し、効率的なファイル管理を実現します。
■このテンプレートをおすすめする方
  • Google Driveで大量のファイルを扱い、手作業でのフォルダ整理に課題を感じている方
  • AIエージェントを活用したファイル管理業務の効率化や自動化を検討している方
  • ファイルの種類に応じた仕分けルールが複雑で、業務が属人化してしまっているチームの方
■このテンプレートを使うメリット
  • Google Driveへのファイル追加をきっかけに、AIが自動でフォルダ整理を行うため、これまで仕分け作業に費やしていた時間を短縮できます。
  • 手作業によるファイルの移動ミスや整理ルールの見落としといったヒューマンエラーを防ぎ、正確なファイル管理を実現します。
■フローボットの流れ
  1. はじめに、Google DriveをYoomと連携します。
  2. 次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでAIワーカーを選択し、「Google Driveにアップロードされたファイルを分析し、最適なフォルダへ移動する」ためのマニュアル(指示)を作成します。
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
  • Google Driveのトリガー設定では、ファイルの追加を監視したいフォルダのIDを任意で設定してください。
  • AIワーカーでは、どのような基準でフォルダ整理を行うかなど、目的に応じて指示内容などを任意で設定できます。
■注意事項
  • Google DriveとYoomを連携してください。AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  •  AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。 
  • ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
  • トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。 https://intercom.help/yoom/ja/articles/9413924

■概要
社内からの問い合わせに対し、毎回ドキュメントを探したり、同じ質問に答えたりする業務に時間を取られていませんか?こうした繰り返し発生する社内情報の検索と回答は、担当者の負担になりがちです。 このワークフローを活用すれば、Microsoft Teamsに投稿された質問をトリガーとして、まるでAIエージェントのように社内情報を自動で検索し、回答を生成することが可能です。
■このテンプレートをおすすめする方
  • 社内ヘルプデスクで、繰り返される質問への対応を効率化したいと考えているご担当者の方
  • Microsoft Teamsを活用し、AIワーカーによる自動的な社内情報検索の仕組みを構築したい方
  • 属人化しがちなナレッジを共有し、問い合わせ対応業務を自動化したいと考えている方
■このテンプレートを使うメリット
  • Microsoft Teams上の質問に対し、AI agentが社内情報を検索して自動回答するため、担当者の対応工数を削減し、コア業務に集中できます。
  • これまで担当者個人が対応していた問い合わせ業務を自動化することで、業務の属人化を防ぎ、ナレッジのスムーズな共有を促進します。
■フローボットの流れ
  1. はじめに、社内情報の格納先であるGoogleドキュメントと、質問を受け付けるMicrosoft TeamsをYoomと連携します。
  2. 次に、トリガーでMicrosoft Teamsを選択し、「チャネルにメッセージが送信されたら」というアクションを設定します。
  3. 最後に、オペレーションでAIワーカーを選択し、Googleドキュメント内の情報を参照して質問に回答するためのマニュアル(指示)を作成します。
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
  • Microsoft Teamsのトリガー設定では、どのチームのどのチャネルに投稿されたメッセージをきっかけにフローを起動するか、任意のチームIDおよびチャネルIDを設定してください。
  • AIワーカーの設定では、回答を生成するAIモデルを任意で選択し、どのような役割で、どの情報を参照して回答を生成するのか、といった具体的な指示を設定してください。
■注意事項
  • Microsoft Teams、GoogleドキュメントのそれぞれとYoomを連携してください。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。
  • Microsoft365(旧Office365)には、家庭向けプランと一般法人向けプラン(Microsoft365 Business)があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
  • AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  • AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。

出典:

Gemini

Yoomを使えば、今回ご紹介したような連携を
プログラミング知識なしで手軽に構築できます。
無料でYoomを試す
この記事を書いた人
Kana Saruno
Kana Saruno
API連携プラットフォーム「Yoom」がもたらすワークフローの自動化と、生産性の劇的な向上に感銘を受け、現在はコンテンツ制作を担当。カスタマーサポートとして、多様な業界のユーザーが抱える業務課題の解決に取り組む中で、定型業務の非効率性を目の当たりにした経験を持つ。ユーザー視点を武器に、SaaS連携による業務効率化の具体的な手法や、明日から実践できるIT活用のノウハウを分かりやすく発信している。
タグ
Gemini
関連アプリ
お役立ち資料
Yoomがわかる!資料3点セット
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
詳しくみる