inflearn logo
知識共有
inflearn logo

バイブコーディングで販売ウェブサイトを構築する

販売用のExcelはあるものの、画面、API、データベースが別々になっていて、1つのアドレスで確認できない問題を扱います。Vite、FastAPI、PostgreSQL、nginxをフォルダーごとに分け、バイブコーディングで受け取ったコードを行数と顧客画面で確認します。

3名 が受講中です。

難易度 初級

受講期間 無制限

React
React
Python
Python
FastAPI
FastAPI
PostgreSQL
PostgreSQL
Docker
Docker
React
React
Python
Python
FastAPI
FastAPI
PostgreSQL
PostgreSQL
Docker
Docker

受講後に得られること

  • 販売プロジェクトをフロントエンドとバックエンドに分け、Viteの画面を開く

  • Excelの販売記録をPostgreSQLに入れ、行数で確認する

  • React画面からFastAPIを呼び出せるようにCORSを開放する

  • 顧客一覧と登録画面をサーバーデータに合わせる

  • Docker Composeとnginxで画面とAPIを一緒に起動する

販売用のExcelはあるものの、画面、API、データベースがそれぞれ別の場所にあると、1つのアドレスで確認するのは困難です。この講義では、Viteで作成したReact画面とFastAPI、PostgreSQL、nginxを1つのプロジェクトとしてつなぎます。コードはバイブコーディングで受け取り、フォルダの場所と実行結果で正しいかどうかを確認します。

このような人に向いています

画面コードとサーバーコードをそれぞれ受け取ったものの、1つのアドレスに接続できない人に向いています。Excelの販売記録をデータベースと照会画面に移したい人に向いています。バイブコーディングでファイルを受け取ったものの、どのフォルダに入れればよいかわからない人に向いています。ターミナルでコマンドを1行実行したことがあれば、授業についていけます。

授業で見る基準

役割だけを指示し、結果で確認します。画面は api、query、pages、components に分けます。api はリクエスト、query は一覧の更新、pages は画面、components は表とモーダルを担当します。API は web、service、repository に分けます。schema は JSON、model はテーブルです。正しいかどうかは、読み込まれた行数、Swagger のレスポンス、登録後に再取得した顧客一覧、起動しているコンテナで確認します。

プロジェクトとデータ

sales_projectをfrontendとbackendに分け、Node.jsとViteでReact画面を開きます。Docker Desktopでコンテナがどこに配置されるかを確認します。顧客、製品、製品分類、プロモーション、チャネル、販売テーブルの関係を定め、docker-compose.ymlでPostgreSQLを準備します。Excelを読み込んでテーブルに挿入した後、行数で読み込みを確認します。GET、POST、PUT、DELETEの役割を分け、画面のアドレスとAPIのアドレスをCORSで接続します。

画面とAPI

package.jsonとnode_modulesの違いを確認し、FastAPIではschemaとmodelを分けます。顧客と商品は登録と更新ができるようにし、販売は参照にします。Swaggerでリクエスト結果を確認します。受け取った画面コードをフォルダに入れ、顧客一覧と登録画面がサーバーのデータと一致しているか確認します。登録後は一覧を再取得します。

Dockerとnginx

backend Dockerfile、frontend、nginx、.env、docker-compose.ymlが担う役割を確認します。PostgreSQLイメージとデータボリュームを用意し、docker compose upでデータベースコンテナを起動します。nginx.confで画面ファイルと/apiパスを振り分けます。Pythonパッケージはrequirements.txtに記載してイメージに含めます。backend、nginx、db-initコンテナが起動しているか確認します。

よくある質問

実習コードはどこから入手しますか? ChatGPTにフォルダの役割を指示して、受け取ります。授業では、そのファイルをどのフォルダに置くか、行数や画面、コンテナと合っているかを確認します。

ReactとFastAPIを別々に終えてから受講する必要がありますか?画面とサーバーをフォルダーに分けて接続する作業を授業で行います。ターミナルコマンドとNode.js、Docker Desktopがあれば大丈夫です。

Dockerは必ず使いますか? データベースとサーバーをコンテナとして起動します。Docker Desktopをインストールしておき、授業を受けてください。

受講前に

実習はNode.js、Docker Desktop、Pythonがあるコンピューターで行います。画面はViteとReact、サーバーはFastAPI、データはPostgreSQLです。動画は教室で行った授業をアップロードしたものです。

授業の順序

プロジェクトフォルダ、販売テーブル、Excel取り込み、API接続、画面構成、Docker Compose、nginxの順に進める授業です。最後には、画面とAPIが1つのアドレスで動作することまで確認します。

短い見出し行を7つそれぞれ選択して、見出しに変更してください。「こんな人に向いています」「授業で見る基準」「プロジェクトとデータ」「画面とAPI」「Dockerとnginx」「よくある質問」「受講する前に」です。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • 画面側のコードとサーバー側のコードをそれぞれ用意しておきながら、1つのアドレスに接続できない人

  • Excelの販売記録はあるものの、データベースや検索画面に移行できていない人

  • バイブコーディングでファイルを受け取ったものの、どのフォルダに入れればいいのかわからない人

前提知識、
必要でしょうか?

  • ターミナルでコマンドを1行実行したことがあれば大丈夫です。

  • Node.jsとDocker Desktopをインストールしておきます。

  • 実習用のコードはChatGPTに指示して受け取ります。

こんにちは
kogo14905334です。

キャリア認証

講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価が集まっていない講座です。
ぜひ最初のレビューをお寄せください。

似ている講座

同じ分野の他の講座を見てみましょう!

無料