AI×Python

Django初心者がAIを使って爆速で今風なWebサービスを作ってみた

  /
目次
  1. djangoでアプリを作る経緯
  2. 競合他社のクラウド在庫管理システム
  3. Djangoさらっと学習
  4. Claudeで要件定義
  5. 要件定義できあがり
  6. bolt.newでモック画面を自動生成
  7. bolt.newで作成した内容の確認
  8. Claude Codeに課金という手段
  9. フロントとバックエンドの繋げ方を確認
  10. 飽きたので先にLPを作る
  11. VSCode内AIツールでバックエンドの実装
  12. サービス名を決める

djangoでアプリを作る経緯

ココナラ、クラウドワークスで受注開発してたが、サブスクアプリを作って楽がしたい。

ココナラでの出品サービスに、サブスク型のWebシステムを売ってる人を発見。

このレベルなら自分でも開発できそうなので挑戦してみる。どの企業でも需要がありそうな在庫管理システムから始めた。

キッカケとなった自動化Webサービス

キッカケとなった出品者さんのサービスページ

この方のほかに販売・保守しているWebサービス

https://biz-sys.s-o-b.jp/order-demo/mng/login

受注開発で販売している方の顧客管理webサービス

https://coconala.com/services/1860090
https://hot-linux.app/management/

競合他社のクラウド在庫管理システム

zaico

ロジレス

spes

Djangoさらっと学習

動画要約

DjangoにおけるWebアプリケーションの作成

Djangoを使ってWebアプリケーションを作成する基本的な手順が解説されています。 [06:47]

日記アプリのトップページを作成し、サーバーを起動してWebアプリケーションを動作させる方法が実演されています。 [07:00]

URLルーティングの設定

urls.pyファイルを使用して、リクエストされたURLに応じてどの関数を呼び出すかを定義する方法が説明されています。 [07:23]

日記アプリのURLパターンを定義し、それに対応するビュー関数を紐付ける方法が解説されています。 [07:50]

ビュー（View）の作成

views.pyファイルで、Webアプリケーションのロジックを記述する方法が説明されています。 [10:18]

リクエストを受け取り、HTMLテンプレートをレンダリングしてレスポンスを返すビュー関数の作成方法が解説されています。 [11:51]

HTMLテンプレートの作成

HTMLファイルを作成し、Webページの構造やコンテンツを定義する方法が説明されています。 [01:22:31]

CSSやJavaScriptなどの静的ファイルをHTMLに組み込む方法も解説されています。 [01:22:31]

CSSとJavaScriptの組み込み

CSSを適用してWebページの見た目を装飾する方法が説明されています。 [01:22:31]

JavaScriptを使用して、Webブラウザ側で動的な処理を行う方法が解説されています。 [01:23:44]

静的ファイルの管理

CSSやJavaScriptなどの静的ファイルをDjangoプロジェクトで管理する方法が説明されています。 [01:22:31]

settings.pyファイルで静的ファイルのディレクトリを設定する方法が解説されています。 [01:22:37]

Claudeで要件定義

プロンプト

djangoとsqliteでシンプルな在庫管理システムを作りたい。

bolt.newという自動構築サイトで指示したいので、md形式で要件をまとめてほしい。

最重要なコアタスクを第一に挙げて、他のUIのモダンな要件や、動作要件等をまとめて

要件定義できあがり

Claudeで作成したマークダウンファイルをダウンロードして、中身をコピー

bolt.newでモック画面を自動生成

Bolt.newにプロンプトを貼り付けて指示を出す。

自動で今風なモック画面が生成されたので、バンクエンドの追加開発をしてもらいます。

急にbass、supabaseをDBとして開発を始めたので、ローカルで動かす際はsqliteで使いたいので修正必要です。これはこれでzipダウンロードして残します。

モック作成時点完了で、無料の制限がきてしまいました。

bolt.newで作成した内容の確認

mock.zipとしてダウンロードした中身を確認すると、TypeScriptのReactフレームワークで書かれていたので、VSCodeでそれらが使えるように環境構築します。以下動画参考。

Node.jsをダウンロード

JavaScriptの実行環境であるNode.jsを公式サイトからダウンロード。

node-v22.14.0-x64.msiを起動し、next連打でセットアップする。

コマンドプロンプトでインストールを確認できた。

並行してclaudeにreactとDjango側の実装を聞いたので、その時のreact手順で実行

npx create-react-app frontend
cd frontend
npm install axios react-bootstrap bootstrap

上記でテンプレートプロジェクトが出来ました。npm runで一応起動しました。

reactの雰囲気をつかんだところで、本題のbolt.newで出力した

mockのプロジェクトに対してサーバー立てて実行します。

名前はfrontedに変更

vite関連がインストールされてないので対応

npm list vite
inventory-management-system@0.0.0 C:\Users\prin\work\individual_dev\InventoryManagement\mock\project
`-- (empty)

C:\Users\prin\work\individual_dev\InventoryManagement\mock\project>npm install vite --save-dev

参考

React + Vite で開発環境を作ってみた

コマンドでフロントエンドを起動

cd C:\Users\~~\inventory-management\frontend
npm run dev

以下実行結果

bolt.newで生成したReactをローカルで起動できました。ここにバックエンドの処理を追加していきます。

Claude Codeに課金という手段

Claudeが発表した、ClaudeCodeというサービスを使うと、ファイルを横断してコードを自動生成する。爆速でバックエンドが出来上がるのだが、まだDjangoの雰囲気を掴めてないので保守できなくなる。一旦学習パートに入りたい。

フロントとバックエンドの繋げ方を確認

React+ViteのフロントとPython Djangoの知識がないため、どのようにして接続するか、マイクロアプリで確認する。Claudeで次の様に指示

プロンプト

最小構成のフロントエンドとバックエンドのサービス例を作ってほしい。
フロントはreact+vite バックエンドはdjango rest DBはSQLite
上記で最小構成のwebシステムを作ってほしい。
機能は少なくてもいいので、フロントとバックエンドのDBやDB更新、更新結果のフロントでの表示を確認したい。

ToDoアプリを作ってくれたので提供してくれたコードをローカルで再現する。

ソースコードが連続して並んでいるので、ディレクトリ構成やシステム機能図を作成してもらって理解の助けにする。

Claudeの回答を元に20分でToDoアプリを起動させる。

以下TODOアプリの回答を転記

セットアップと実行方法

以下Claudeでのセットアップ指示書。大きな流れとしては、

  1. テンプレートプロジェクトの作成
  2. 生成されたコードでテンプレートファイル上書き
  3. サーバーを起動して確認する

以下が実際の作業内容だ。

バックエンド（Django）のセットアップ:

  1. 必要なパッケージをインストール:
pip install django djangorestframework django-cors-headers
  1. プロジェクトを作成:
django-admin startproject todobackend
cd todobackend
python manage.py startapp api
  1. 上記のバックエンドコードを対応するファイルにコピー
  2. データベースのマイグレーションを実行:
python manage.py makemigrations
python manage.py migrate
  1. サーバーを起動:
python manage.py runserver

フロントエンド（React+Vite）のセットアップ:

  1. Viteプロジェクトを作成:
npm create vite@latest todofrontend -- --template react
cd todofrontend
npm install
  1. 必要なライブラリをインストール:
npm install axios
  1. 上記のフロントエンドコードを対応するファイルにコピー
  2. 開発サーバーを起動:
npm run dev

システムの機能

この最小構成のシステムでは以下の機能が実装されています：

  1. タスクの表示: バックエンドのDBからタスク一覧を取得して表示
  2. タスクの追加: 新しいタスクを追加し、DBに保存
  3. タスクの完了/未完了の切り替え: タスクをクリックすると完了状態を切り替え
  4. タスクの削除: 削除ボタンでタスクを削除

この構成で、フロントエンドとバックエンドの連携、DBの操作、そしてフロントエンドでの更新結果の表示を確認できます。必要に応じて機能を追加・拡張することも可能です。

バックエンド側

  • Django REST Framework: RESTful APIを提供するバックエンドフレームワーク
  • SQLite: 軽量なデータベース、単一のファイル（db.sqlite3）に保存
  • TODO Model: タスクのデータ構造（タイトル、完了状態、作成日時）
  • TodoSerializer: モデルとJSONデータ間の変換を担当
  • TodoViewSet: CRUD操作（作成、読取、更新、削除）を処理

フロントエンド側

  • React: ユーザーインターフェイス構築のJavaScriptライブラリ
  • Vite: 高速な開発環境と本番ビルドを提供
  • Axios: HTTP通信を行うためのライブラリ
  • App.jsx: メインのアプリケーションコンポーネント

通信フロー

  1. ユーザーがブラウザでアプリにアクセス
  2. Reactコンポーネントがレンダリングされ、Axiosでバックエンドからデータをフェッチ
  3. DjangoのAPIエンドポイントがリクエストを受け取り、適切なViewSetで処理
  4. データベース操作が行われ、結果がJSONでフロントエンドに返される
  5. Reactコンポーネントが更新され、ユーザーに最新のデータが表示される

DjangoRESTはDjangoと比較し、バックエンド機能に特化している。以下参考

Form機能をもったDjangoの例。https://youtu.be/J4O76oInjIU?si=DB6kxfotXrs-8xnS

飽きたので先にLPを作る

以下Youtube動画を参考に、サービス予定の在庫管理クラウドシステムの紹介HPを作っていく。

ノーコードでレスポンシブなHPが作れるstudioを選択。

LPに記載する内容はClaudeで事前に作成してもらっている。

ヘッダーメニュー作るのだけで一時間以上かかった。。。

VSCode内AIツールでバックエンドの実装

Phind(フィンド)

本当は教えたくない、VScode拡張の最強プログラミングアシスタントAI Phind(導入・使い方)
追記：2025/03/28現在はアカウント連携ができないため優先度が低い。

Codeium（コーディニウム）

【Codeium】VS Codeで使える！完全無料のAIコード補完を徹底紹介

サービス名を決める

天秤AIというGMOが提供している、複数AIの回答を比較できるサービスを使う。

よさげな案を壁打ちで改善して似た名前がない者に決める。

最終的には「在庫アシスト」に決定した。

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RELATED POST