見出し画像

AIを使用した開発手順

フェリシア

はじめに

現代のテクノロジーの進歩は、プログラミングのプロセスを革新しています。特に、AIの活用は開発者にとって新たな可能性を開くものです。この記事では、AIを使ったプログラミングのステップを紹介します。

1. やりたいことを言語化する

プロジェクトの成功のためには、プロジェクトの目的やプロセスを明確に言語化することが重要です。ここでは、簡単なデータベースを用いたタスク管理アプリを例に、プロジェクトの流れを言語化します。

言語化の例：タスク管理アプリ

  • ユーザーのアクション： ユーザーがアプリにアクセスし、タスクの内容を入力フォームに記入します。

  • データのフロー： 入力されたタスクの内容は、「追加」ボタンをクリックすることでデータベースに保存されます。

  • タスクの表示： データベースに保存されたタスクは、アプリのメイン画面にリストとして表示されます。

  • タスクの更新： ユーザーは各タスクの隣にある「編集」ボタンをクリックして、タスクの内容を更新できます。更新された内容はデータベースに保存され、画面に反映されます。

  • タスクの削除： ユーザーはタスクの隣にある「削除」ボタンをクリックすることで、タスクを削除できます。削除されたタスクはデータベースからも消去されます。

このように、ユーザーのアクションとデータの流れを具体的に言語化することで、開発するアプリの機能や動作を明確に理解し、開発プロセスを効率的に進めることができます。

2. AIにマーメイド図を作成させる

次に、言語化した内容をAIに渡し、それをマーメイド図にしてもらいます。マーメイド図は、プロセスフローやシステムの構造を視覚的に表現するのに役立ちます。AIは、与えられた要件から効果的な図を生成することができます。
ChatGPTに書いてもらったコードは下記のサイトで可視化出来ます。


sequenceDiagram
  participant User as ユーザー
  participant App as タスク管理アプリ
  participant Database as データベース

  User->>App: アプリにアクセス
  User->>App: タスクの内容を入力
  App->>Database: タスクの内容を保存
  App-->>User: タスクが保存されました
  User->>App: タスクの表示を要求
  App->>Database: タスクのリストを取得
  Database-->>App: タスクのリスト
  App-->>User: タスクのリストを表示
  User->>App: タスクを更新
  App->>Database: タスクの内容を更新
  App-->>User: タスクが更新されました
  User->>App: タスクを削除
  App->>Database: タスクの削除
  Database-->>App: タスクが削除されました
  App-->>User: タスクが削除されました
z∑

3. マーメイド図を基にディレクトリ構造を作成する

マーメイド図が完成した後、次のステップは、その図をGPT-4に入力し、必要なディレクトリ構造を構築することです。このプロセスでは、AIが提供するディレクトリの提案を基に、プロジェクトのファイルとフォルダーを最適に配置します。

ディレクトリ構造作成のプロセス：

  • 図の解析： まず、GPT-4はマーメイド図を分析し、アプリの各機能に必要なコンポーネントを理解します。

  • ディレクトリ提案： 次に、GPT-4はアプリの機能に基づいてディレクトリ構造を提案します。この構造には、各機能に対応するフォルダーとファイル、およびデータベースへのアクセスを管理するファイルが含まれます。

  • ファイルの配置： 各ファイルとフォルダーは、アプリの機能やデータフローを考慮して適切な場所に配置されます。例えば、タスクの追加、編集、削除を行うためのファイルは、それぞれのアクションを処理するためのフォルダー内に作成されます。

  • 整理と最適化： ディレクトリ構造が提案されたら、開発者はそれをレビューし、プロジェクトの要件に合わせて最適化します。

このようにディレクトリ構造をAIを使って構築することで、開発者はより効率的にコードを管理し、プロジェクトの整理を容易にします。また、将来的な拡張やメンテナンスも考慮した構造を作ることができ、開発の柔軟性が向上します。

先程の図をGPT4に渡し、下記のようなディレクトリ構造を作成します。

  1. ウェブアプリケーション

    • app.py - アプリケーションのエントリポイント。

    • requirements.txt - 依存ライブラリのリスト。

  2. バックエンド

    • models/ - データモデルを定義。

    • routes/ - ルーティングとビュー関数。

    • templates/ - HTMLテンプレート。

    • static/ - CSSとJavaScriptファイル。

  3. データストレージ

    • db.sqlite - 軽量なSQLiteデータベースファイル。


4. 必要なファイルとスケルトンの作成

最後に、AIの提案に基づいて必要なファイルを作成します。この段階では、AIがコードのサンプルやテンプレートを提供することも可能です。プログラマーはこれらのリソースを活用し、効率的にコーディングを進めることができます。
最初にスケルトンを作成することで、大まかなプログラムの全体像を設計することが出来ます。結果として手戻りが減ります。
さっきほどの図と見比べながら実装に過不足が無いかを確認します。AIは全てを間違いなく実装できるわけではないので、必要に応じてコミュニケーションを取ることが大事です。

//app.py
from flask import Flask, render_template, request, redirect, url_for
from models import init_db, Task

app = Flask(__name__)

@app.route('/')
def index():
    tasks = Task.query.all()
    return render_template('index.html', tasks=tasks)

@app.route('/add', methods=['POST'])
def add():
    # タスクの追加処理
    return redirect(url_for('index'))

@app.route('/update/<int:task_id>', methods=['POST'])
def update(task_id):
    # タスクの更新処理
    return redirect(url_for('index'))

@app.route('/delete/<int:task_id>')
def delete(task_id):
    # タスクの削除処理
    return redirect(url_for('index'))

if __name__ == '__main__':
    init_db()
    app.run(debug=True)

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(80), nullable=False)
    # 他に必要なフィールドがあればここに追加

def init_db():
    db.create_all()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task Manager</title>
</head>
<body>
    <h1>Task Manager</h1>
    <form action="/add" method="post">
        <input type="text" name="title" placeholder="New task">
        <button type="submit">Add Task</button>
    </form>
    <ul>
        {% for task in tasks %}
        <li>
            {{ task.title }}
            <!-- タスクの更新と削除のためのフォームをここに追加 -->
        </li>
        {% endfor %}
    </ul>
</body>
</html>
Flask
Flask-SQLAlchemy

 5.実装

実際にスケルトンの中身を実装してもらいます。
あまりに長すぎるとエラーになります。一つずつ作成してもらうほうが確実でしょう。
作成したファイルは「zipでまとめてダウンロードできるようにしてほしい」と依頼を出せばzipにまとめてプロジェクトごとダウンロードできるようになります。

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(80), nullable=False)
    # 他に必要なフィールドがあればここに追加

@app.before_first_request
def create_tables():
    db.create_all()

@app.route('/')
def index():
    tasks = Task.query.all()
    return render_template('index.html', tasks=tasks)

@app.route('/add', methods=['POST'])
def add():
    title = request.form.get('title')
    if title:
        new_task = Task(title=title)
        db.session.add(new_task)
        db.session.commit()
    return redirect(url_for('index'))

@app.route('/update/<int:task_id>', methods=['POST'])
def update(task_id):
    task = Task.query.get(task_id)
    if task:
        task.title = request.form['title']
        db.session.commit()
    return redirect(url_for('index'))

@app.route('/delete/<int:task_id>')
def delete(task_id):
    task = Task.query.get(task_id)
    if task:
        db.session.delete(task)
        db.session.commit()
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task Manager</title>
</head>
<body>
    <h1>Task Manager</h1>
    <form action="/add" method="post">
        <input type="text" name="title" placeholder="New task">
        <button type="submit">Add Task</button>
    </form>
    <ul>
        {% for task in tasks %}
        <li>
            {{ task.title }}
            <form action="{{ url_for('update', task_id=task.id) }}" method="post">
                <input type="text" name="title" value="{{ task.title }}">
                <button type="submit">Update</button>
            </form>
            <form action="{{ url_for('delete', task_id=task.id) }}" method="post">
                <button type="submit">Delete</button>
            </form>
        </li>
        {% endfor %}
    </ul>
</body>
</html>

6. 修正

最重要です。最初から動くコードを提供してくれることは稀です。
動かない部分については、修正していきましょう。
エラーを順番に対応していくか、なかなか解決しないようであればコードを全てGPT4に共有して書き直してもらうのも良いでしょう。
数回往復して下記のように動く物ができました。

まとめ

AIを使ったプログラミングは、開発プロセスを合理化し、効率を高める強力な手段です。この方法を取り入れることで、プログラマーはより複雑なタスクに集中し、創造性を発揮する時間を増やすことができます。


この記事が気に入ったらサポートをしてみませんか？