Webアプリの基本構造
Webアプリはフロントエンドとバックエンドという2つの世界で成り立っています。
フロントエンドとは何か
フロントエンドは、ユーザーがブラウザやスマートフォンで目にし操作する部分です。画面のレイアウト・ボタン・入力フォーム・表示されるデータがすべてフロントエンドに相当します。HTML（構造）・CSS（デザイン）・JavaScript（動作）という3つの技術で構成されます。ユーザーが「送信」ボタンを押したとき、フロントエンドはそのデータをバックエンドに送信します。
バックエンドとは何か
バックエンドは、ユーザーからは見えないサーバー側の処理です。データの保存・取得・ビジネスロジックの実行・外部サービスとの連携・認証・セキュリティ処理を担います。AIアプリでは、ユーザーの質問を受け取ってLLM APIに送信し、回答を受け取ってユーザーに返す処理もバックエンドが行います。
APIという接続口
API（Application Programming Interface）はフロントエンドとバックエンド、またはバックエンドと外部サービスをつなぐ「接続口」です。フロントエンドが「この形式でリクエストを送ると、この形式でレスポンスが返ってくる」というルールに従って通信します。OpenAIのAPIも「この形式でプロンプトを送ると、LLMの回答が返ってくる」というAPIです。
フロントエンドの技術
現代のWebフロントエンドはReact等のフレームワークで効率的に開発されます。
HTML・CSS・JavaScriptの役割
HTMLはWebページの構造を定義するマークアップ言語です。「ここが見出し・ここが本文・ここがボタン」という骨格を記述します。CSSは見た目（色・フォント・レイアウト）を定義します。JavaScriptはボタンのクリック・入力値の検証・非同期通信（ページを再読み込みせずにデータを取得する）などの動作を実装します。
ReactとNext.jsの役割
ReactはMeta（Facebook）が開発したJavaScriptライブラリで、現在のWebフロントエンド開発の標準になっています。コンポーネントと呼ばれる再利用可能なUI部品を組み合わせてアプリを構築します。Next.jsはReactをベースにしたフレームワークで、サーバーサイドレンダリング・ルーティング・パフォーマンス最適化の機能を追加します。多くのLLMアプリのフロントエンドがNext.jsで構築されています。
チャットUIの実装
ChatGPTのようなチャットインターフェースは、フロントエンドでメッセージの送受信・ストリーミング表示（文字が少しずつ現れる動作）・会話履歴の管理を行います。VercelのAI SDKなどを使うと、ストリーミングレスポンスに対応したチャットUIを数十行のコードで実装できます。
バックエンドとデータベース
バックエンドはLLM APIの呼び出しとデータ管理の中枢です。
バックエンドの役割とフレームワーク
バックエンドはHTTPリクエストを受け取り、処理を実行してレスポンスを返す「サーバー」です。PythonのDjango・FastAPI、JavaScriptのExpress・Honoなどが代表的なバックエンドフレームワークです。AIアプリではバックエンドが「プロンプトの組み立て→RAGの検索→LLM API呼び出し→レスポンス処理→フロントエンドへ返却」という一連の処理を担います。
データベースの基本
データベースは永続的なデータの保存・管理に使います。大きく2種類あります。リレーショナルDB（RDB）はExcelのような表形式でデータを管理します。PostgreSQL・MySQLが代表例で、トランザクション管理と整合性保証に強みがあります。NoSQLはJSONに近い柔軟な形式でデータを管理します。MongoDB・Firebaseが代表例で、構造が変わりやすいデータや大量のドキュメント保存に向いています。
AIアプリ特有のデータ管理
AIアプリでは通常のDBに加えてベクトルDB（RAGの検索用）とキャッシュ（同一プロンプトへの回答再利用）が使われます。また会話履歴・ユーザー設定・アクセスログなどをどのDBに保存するか、どの期間保存するかの設計もコストとパフォーマンスに影響します。
クラウドとデプロイ
AIアプリはクラウドサービスを活用することで素早く・スケーラブルに構築できます。
クラウドサービスの基本
アプリを世界中からアクセスできる状態にする（デプロイ）には、クラウドサービスを使います。大きく3種類あります。IaaS（Infrastructure as a Service）はサーバーの仮想マシンを提供します（AWS EC2・GCP Compute Engine）。PaaS（Platform as a Service）はアプリのコードを渡せば動かしてくれる環境です（Heroku・Render）。SaaS（Software as a Service）はすぐ使えるソフトウェアを提供します（ChatGPT・Notion・Salesforce）。
LLMアプリに使うクラウドサービスの例
- Vercel：フロントエンドのホスティングに適しており、デプロイを簡単に行える
- AWS Lambda / Cloud Run：サーバーレスでバックエンド処理を実行。利用量に応じた従量課金
- Supabase：データベースと認証機能を備えたBaaS。ベクトル検索にも対応しRAGに活用可能
- Pinecone / Weaviate Cloud：マネージド型のベクトルデータベース。インフラ管理なしでRAGを構築可能
まとめ
この記事では、WebアプリとAIアプリの基本構造をフロントエンド・バックエンド・DB・クラウドの観点から解説しました。
- Webアプリはユーザーが操作するフロントエンドと処理を担うバックエンドで構成され、APIで連携する
- フロントエンドはHTML/CSS/JavaScriptで構成され、ReactやNext.jsで効率的に開発される
- バックエンドがLLM APIの呼び出し・RAG検索・セッション管理を担い、RDBとベクトルDBを使い分ける
- Vercel・AWS・Supabaseなどのクラウドサービスを組み合わせてAIアプリを素早くデプロイできる
これらを理解することで、AIシステム開発の提案内容を技術的に評価し、自社の技術ロードマップと投資判断を正しく判断できるようになります。
コメント