フルスタックへの挑戦 - チャットボット開発

はじめに

AIエンジニアを目指しているME_DE_AEです。
元々は機械エンジニアとして、Excelで実験結果を眺める日々でした（設計もやっていました）。そんな私がPythonと出会い、機械学習を用いて「未来を予測する力」に魅了され、データエンジニアに転職。そこから資格取得などを通じて今度はAIと出会いました。そんな私がAIエンジニアとして初めてシステム開発にゼロから挑戦し、LLMを活用したチャットシステムを完成させるまでを共有します。異業種からAIエンジニアを目指す方や、最新技術を活用した開発のリアルを知りたい方の参考になれば嬉しいです。

初めてのITでのモノづくり

AIの世界に飛び込んだ私に与えられた課題は、「フルスタックエンジニアになる」というものでした。その目標に向け、「LLMを活用したチャットボットの開発」がスタートしました。データエンジニアとしての経験はあったものの、フロントエンドもバックエンドも、このプロジェクトで初めて触れる文字通りの「ゼロからの挑戦」でした。

最初の壁： プログラムよりも遥かに手強かった「環境づくり」

開発が始まり、私を待ち受けていた最初の、そして最大の壁はプログラミングそのものではありませんでした。

本当に大変だったのは 開発環境 です。

個人PCではもちろんのこと、機械エンジニアのころは全く関わってこなかったmacOS、さらにGoogle Workspace。今までWindowsとTeamsという組み合わせだったので、「プログラムを打つための環境を用意する」という、スタートラインに立つだけで苦労しました。

AIとの「バイブコーディング」で未知を乗り越える

環境という大きな壁を越え、ようやく実装フェーズへ。フロントエンドはTypeScript、バックエンドはPythonを使って開発をするとチームで決めました。TypeScriptは初めてでしたが、Pythonと似ている部分もあり比較的スムーズに学習を進めることができました。上司からは「どんどんGeminiを使っていいよ」と後押しされ、「バイブコーディング」 を試しました。完璧なコードをAIに求めるのではなく、まずは実現したいことの雰囲気（Vibe）を伝えて大まかな構造を出してもらう。そして、その「骨格」を元に細部を自分の手で実装し理解を深めていくという対話的なアプローチです。
この方法で、自分一人では途方に暮れていたであろう、システム全体の繋がりを効率的に学ぶことができました。

技術的な学び：Docker

今回のプロジェクトはPCを汚さない、チームで同じ環境を再現するという目的のため「Docker」を使うことになりました。初めて個人PCで環境構築したときは、めちゃくちゃになって汚れていたので、こんなすごいものがあるんだと感動しました。

Dockerの主な特徴として下記があります。

• 環境の再現性とポータビリティ
  • アプリケーションとその依存関係（ライブラリ等）を「コンテナ」として一つにまとめる
  • 「自分のPCでは動くのに、サーバーでは動かない」といった環境差異の問題を解決
  • Dockerがインストールされていれば、PC、サーバー、クラウドなど、どこでも同じように動作させることが可能
• 簡単なデプロイとバージョン管理
  • Dockerfileというテキストファイルに環境構築の手順を記述することで、誰でも同じ環境をコマンド一つで構築
  • アプリケーションのデプロイやアップデート作業が簡素化・自動化
  • イメージとしてバージョン管理ができるため、古いバージョンに切り戻すことも容易

チャットボットの技術構成と処理フロー

チャットボットの開発では、私にとって未経験のタスクであったフロントエンドとバックエンド、それとそれぞれの連携に挑戦しました。

実装したシステムは、React、FastAPI、そしてAzure OpenAI Serviceで構成されており、ユーザーからのメッセージを以下の流れで処理します。

1. ユーザーがフロントエンド（React）でメッセージを入力します。
2. Reactがバックエンド（FastAPI）の/chatエンドポイントにPOSTリクエストを送信します。
3. FastAPIがメッセージを受け取り、Azure OpenAI ServiceのAPIに転送します。
4. Azure OpenAI Serviceが回答を生成し、FastAPIに返します。
5. FastAPIがその回答をフロントエンドに返し、Reactが画面に表示します。

この一連の流れを図で示すと、以下のようになります。

この連携を実現するために、Docker Composeを使用しました。docker-compose.ymlという設定ファイルに、各サービスが必要とする環境（コンテナ）の定義をすべて記述します。これにより、コマンド一つで全サービスを同時に起動・停止でき、誰でも全く同じ開発環境を再現することが可能になります。

感動の瞬間：分野は違えど、モノづくりの喜びは同じ

数々の壁を乗り越え、ついにシステムが一通り完成した瞬間が訪れます。自分が入力したテキストに対し、シンプルなチャットボットが意図した通りの応答を返してくれました。ただそれだけのことですが、その画面を見た時の感動は、忘れることのできない喜びになりました。

完成したときの喜びは、機械エンジニア時代に、自分が設計・開発した機械が初めて問題なく動いた時の感動と、全く同じものでした。フィールドは物理的な機械からデジタルのソフトウェアに変わりましたが、「自分の手で作り上げたものが、思った通りに動く」 というモノづくりの根源的な喜びは、どのような分野でも同じであることを実感しました。

「やってきてよかった！」 と心から思えた瞬間でした。

まとめ

異業種からAIエンジニアを目指す方や、AI技術を用いた開発の参考になれば嬉しいです。技術的な挑戦は大変でしたが、その分得られる学びと達成感は計り知れません。

今後も「AIという武器を手に、未経験分野でのモノづくり」という目標に向かって、日々学習を続けていきたいと思います。