非エンジニアの文系元経営者が挑む！Amazon BedrockとReactでAIアプリを自作した全記録

Last updated at 2025-08-18Posted at 2025-08-17

非エンジニアの文系経営者が挑む！Amazon BedrockとReactでAIアプリを自作した全記録

皆さん、こんにちは！あばんです。

少し前まで、私はある地方の政令都市で会社を経営していました。完全に文系出身で、プログラミングとは無縁の世界です。しかし、コロナ禍で色々あり、会社を畳むことになり、人生は大きく変わりました。

今は会社員として働きながら、AIに絡めた仕事で再び自分の足で立つ日を目指して、仕事後の時間や休日を使って「AI駆動開発」をゼロから学んでいます。

この記事は、そんな私がAI開発を始めて1年未満で、初めてAmazon Bedrockに挑戦した、はじめての記録です。

「非エンジニアでも、AIと対話しながらなら、ここまで出来るんだ」

ということを、特にコードを書くのが得意ではないプロジェクトマネージャーや、私と同じような経営者の方に見ていただけたら、こんなに嬉しいことはありません。技術的な手順だけでなく、本文もAIに助けてもらいながら書いているので、拙い部分もあるかと思いますが、ぜひ最後までお付き合いください。

アーキテクチャ概要：僕らが作るAIチャットアプリの設計図

今回構築するシステムの全体像は、とてもシンプルとは思いますが、私にとっては未知の世界です。今後もこの言い回しは続くと思いますが。。

（フロントエンド → API Gateway → Lambda → Bedrock というシンプルな構成図のイメージ）

フロントエンド (React): みんなが触る画面の部分です。今回は私のPC上で作ります。
API Gateway: フロントからの「お願い！」を受け付ける、AWS上の安全な受付係です。
AWS Lambda: 受付係からお願いを受け取って、実際の作業をするサーバーレスの働き者。
Amazon Bedrock: Claude 3みたいな超優秀なAIたちが待機している場所です。

サーバーの管理？一切不要です。これがサーバーレスのすごいところ。では早速、この設計図を形にしていきましょう！

Part 1: バックエンド構築〜AIの心臓部をAWSに作る〜

アプリケーションの頭脳となるバックエンドから作っていきます。僕も最初は真っ黒な画面にビビりましたが（笑）、一つずつ進めれば大丈夫。作業はすべてブラウザ上で完結する CloudShell で行います。

ステップ1: プロジェクトの作業場を確保する

まずはCloudShellの中に、今回のプロジェクト専用のフォルダを作り、そこを拠点にします。

# 新しいプロジェクトフォルダを作成
mkdir sap-project-01

# 作成したフォルダに移動
cd sap-project-01

ステップ2: Lambda関数に「身分証明書」を発行する

Lambdaが他のAWSサービスと話をするために、IAMロールという「身分証明書」を作って、必要な権限を与えます。

# （中略：前回の回答と同じコマンド群）

ステップ3: Lambda関数（AIへの司令塔）をデプロイする

BedrockのClaude 3 Haikuモデルを呼び出すPythonコードを作成し、Lambda関数としてAWSにデプロイします。

Pythonコードの作成
以下のコマンドでlambda_function.pyファイルを作成します。
```
# （中略：前回の回答と同じPythonコード）
```
ポイント: headersに'Access-Control-Allow-Origin': '*'を入れるのが地味に重要です。これを忘れると、後でフロントエンドと繋ぐときに「CORSエラー」という壁にぶち当たります（僕もぶち当たりました）。

コードのZIP化とデプロイ

# （中略：前回の回答と同じコマンド群）

【心の声①：ここでエラー発生！】

実は僕、このaws lambda create-functionのところでつまづきました。「そんな関数は見つからないよ！」ってAWSに怒られてしまって。原因は単純で、前のセッションで作ったつもりが、ちゃんと作成されていなかっただけでした（笑）。でも、こういう小さなエラーを一つずつ潰していくのが、開発のリアルなんですね。焦らず、エラーメッセージをしっかり読む。これが大事です。

ステップ4: API Gateway（インターネットとの窓口）の作成

インターネットからのリクエストを受け付ける公式な窓口、API Gatewayを作ります。

# （中略：前回の回答と同じコマンド）

コマンドを実行すると、ApiEndpoint というURLが表示されます。これは後で絶対に使うので、必ずコピーしてメモ帳に貼り付けておいてください！僕らのアプリの「住所」です。

Part 2: フロントエンド構築〜ユーザーが触れる顔を作る〜

さて、ここからは僕のWindows PCに戦場を移します。ユーザーが実際に見て、触れる画面を作っていきましょう。

ステップ1: Reactプロジェクトの初期化

まずは、Reactプロジェクトの雛形をコマンド一つでサクッと作ります。

# 開発用フォルダをPC上に作成し、その中で作業します

# Node.jsとnpmがインストールされていることを確認
node -v
npm -v

# Viteを使ってReact + TypeScriptプロジェクトを作成
npm create vite@latest . -- --template react-ts

# 必要なライブラリをインストール
npm install

ステップ2: API通信ライブラリの追加

バックエンドと通信するために、axiosという便利な道具をインストールします。

npm install axios

ステップ3: UIとAPI連携ロジックの実装

いよいよコーディングです。src/App.tsxを編集して、見た目と、APIを呼び出す心臓部を作ります。

// src/App.tsx
import { useState } from 'react';
import axios from 'axios';

// ★★★★★ ここに、さっきメモしたご自身のAPI GatewayのURLを貼り付けてください！ ★★★★★
const API_ENDPOINT = "https://xxxxxx.execute-api.us-east-1.amazonaws.com";

// （中略：前回の回答と同じReactコード）

【最重要】 API_ENDPOINTのURLを、必ずご自身で取得したものに書き換えてくださいね！

【心の声②：最大の壁、再び】

ここで、私の挑戦は最大の壁にぶつかりました。最初は「DeepSeek R1」という高コスパなモデルを使いたかったのですが、何度やっても「そのモデルはオンデマンド（従量課金）じゃ使えないよ」というエラーが。

「え、でもモデルの利用申請は通ってるのに！？」と。他のAIに聞いたら「使えるはずだ」なんて言うし…。でも、最終的に信じるべきは、AWSが返してくる一次情報（エラーメッセージ）なんですよね。　※ここはまだ半信半疑なので、もう少し調べてみます。

この経験で、「プロビジョンドスループット」という課金体系があることを、身をもって学びました。これAmazon Bedrockで開発目指す上で、めちゃくちゃ大きな収穫でしたね。遠回りしたけど、無駄じゃなかった。最終的に、オンデマンドで使えるClaude 3 Haikuに切り替えるという判断しプロジェクトを前に進めることができました。

ステップ4: 動作確認！感動の瞬間へ

さあ、すべての準備が整いました。開発サーバーを起動しましょう。

npm run dev

ターミナルに表示されたhttp://localhost:xxxx/をブラウザで開きます。テキストエリアに「こんにちは」と打ち込んで…ボタンをクリック！

…AIからの応答が画面に表示されたら、大成功です！

今後の展望：このアプリはどこへ向かうのか

さて、今回作ったのは、あくまで第一段階、PoC（概念実証）です。僕が本当に作りたいのは、**中小企業の経営を助ける「売上分析ツール」**です。

今後の計画はこうです。

ファイルアップロード機能: チャット画面から、売上データ（CSVやExcel）をアップロードできるようにします。
3段階AI連携: アップロードされたデータを、Lambda関数がまず「構造化」し、次に「集計」、最後にBedrockが「経営洞察」を生成する。そんな賢いパイプラインを構築します。
結果のビジュアライズ: AIが出した分析結果を、ただのテキストじゃなくて、グラフなどで分かりやすくReact上に表示します。

このシステムが完成すれば、「どんなフォーマットの売上データでも、AIが理解して、経営コンサルタント級のアドバイスをくれる」近未来世界に踏み出せる。そう信じています。

おわりに

最後まで読んでいただき、本当にありがとうございました！

今回、僕がこの記録を残そうと思ったのは、ささやかな備忘録であると同時に、過去の自分と同じように、何かに挑戦したくても一歩を踏み出せずにいる誰かの背中を、少しでも押せたらと思ったからです。また、友人のメンターでもあるベテランエンジニアからのアドバイスがあったのも大きかった。後々エンジニアと知り合ったときに技術ブログ書いていると信用度が全く違うよと。

AI駆動開発は、僕のような非エンジニアにこそ、大きな可能性を与えてくれる武器だと確信しています。プログラミングの壁は、対話できるAIが驚くほど低くしてくれました。大事なのは、技術力よりも「何を作りたいか」というビジョンと、諦めずにエラーと向き合う泥臭さなのかもしれません。

会社員として働きながらの開発は、決して楽ではありません。でも、コードを一行書くたび、エラーを一つ乗り越えるたびに、新しい自分に生まれ変わっていくような、そんな感覚があります。正直イライラもありますが、完成した時の達成感が忘れられないです！

このブログでは、今後もAIエージェントの構築や、僕が学んだ様々なAI活用の知見を発信していくつもりです。もしよろしければ、また覗きに来てください。

それでは、また！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up