0. まず知っておきたいこと

コマンドプロンプト（cmd）：黒い画面。ここに文字（コマンド）を打って、パソコンに「こうして」とお願いする場所。
Anaconda Prompt：Anaconda（アナコンダ）というセットの中の黒い画面。中のPythonを使う。
今回の方針：Anacondaは使わず、Windowsの コマンドプロンプト と 公式のPython で進める。混ぜないほうがトラブルが少ない。
仮想環境（venv）：このアプリ専用の小さな箱。中に必要な部品（ライブラリ）を入れる。

ことばの意味は少しずつ出てきます。今は「書いてある通りにやる」で大丈夫です。

1. Python が入っているか確認 & 入っていない場合の手順

1-1. 確認（やる理由：無いなら入れる、あるならそのまま進むため）

cmd または PowerShell を開き、次を入力：

cmd

python --version
py -V
pip --version

どれか1つでもバージョンが出れば OK。
何も出ない／Microsoft Store が開く → 未インストール。

1-2. インストール（やる理由：cmd から素直に python/pip を使えるようにする）

公式インストーラをダウンロード（64bit Windows）
https://www.python.org/ftp/python/3.13.7/python-3.13.7-amd64.exe
インストーラの最初の画面で
「Add python.exe to PATH」に必ずチェック → Install
終了後、もう一度 cmd で確認：

cmd

python --version
pip --version

→ バージョンが出たら OK。

2. プロジェクト用フォルダを作ろう（なぜ：作品を1箱にまとめる）

どこで作ってもいいですが、ドキュメント直下が無難です（権限トラブル回避）。
コマンド：

cmd

mkdir my_ai_app
cd my_ai_app

my_ai_app は自分の好きな名前にしてね！

VS Code を今の場所で開く（超便利）：

cmd

code .

※一度 VS Code 側で「Shell Command: Install 'code' command in PATH」を実行しておくと使えます。

3. 仮想環境を作る（なぜ：このアプリ専用の部品置き場にする）

作成：

python -m venv .venv

失敗したら：

py -m venv .venv

有効化：

.\.venv\Scripts\activate

→ 先頭に (.venv) が出れば成功（以後の python/pip はこの箱の中のものになります）。

無効化（箱から出る）：deactivate

よくあるミス：(.venv) 表示が無いまま pip install し、PC全体へ入れてしまう。毎回、作業前に有効化を確認。

4. 6ファイルと3フォルダを作る（なぜ：最小で動かしつつ役割を分ける）

最終形

my_ai_app/
│── app.py
│── requirements.txt
│── .env
│
├── services/
│    └── ai_function.py
│
├── templates/
│    └── index.html
│
└── static/
     └── style.css

4-1. 3フォルダを作る（CLI or VS Code）

CLI（cmd/PowerShell）：

cmd

mkdir services templates static

VS Code：
左ペインで my_ai_app を右クリック → 新規フォルダー → services / templates / static

4-2. 6ファイルのテンプレートと役割

1. app.py

作成方法

CLI (cmd)：notepad app.py
PowerShell：ni app.py -ItemType File
VS Code： 右クリック → 新規ファイル → app.py

役割

Flaskアプリの司令塔。
ルーティング（どのURLで何を返すか）を決め、必要に応じてAI機能を呼び出す。

何を書くか

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

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

2. requirements.txt

作成方法

CLI：notepad requirements.txt
VS Code： 右クリック → 新規ファイル → requirements.txt

役割

必要なライブラリをメモするファイル。
pip install -r requirements.txt で一括インストールできる。

何を書くか

requirements.txt

flask

👉 他に必要になれば追記（例：requests, python-dotenv）。

3. .env

作成方法

CLI：notepad .env
VS Code： 右クリック → 新規ファイル → .env

役割

秘密情報（APIキーなど）を置く場所。GitHub公開禁止。

何を書くか

.env

# APIキーなどを記載します。今回は空でOK

4. services/ai_function.py

作成方法

CLI：notepad services\ai_function.py
VS Code： services フォルダ内で新規ファイル → ai_function.py

役割

AIの中身を1つだけ定義する。
app.py から呼び出され、結果を返す。

何を書くか

services/ai_function.py

def run_ai(text: str) -> str:
    return "まだAI機能は実装されていません"

5. templates/index.html

作成方法

CLI：notepad templates\index.html
VS Code： templates フォルダ内で新規ファイル → index.html

役割

画面（HTML） を記述。
入力フォームや結果表示を作る場所。

何を書くか

templates/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>My Flask App</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <h1>ようこそ</h1>
  <p>このページは Flask で表示しています（AI機能はまだ未実装）。</p>
</body>
</html>

6. static/style.css

作成方法

CLI：notepad static\style.css
VS Code： static フォルダ内で新規ファイル → style.css

役割

見た目（デザイン） を管理。
文字サイズや色、余白などを指定。

何を書くか

static/style.css

/* CSSのテンプレート。ここにデザインを追加予定 */
body {
  font-family: sans-serif;
  margin: 20px;
}
h1 {
  color: #333;
}

5. 機能追加のときのファイル別まとめ

AI機能を追加するとき

ルール：services/ai_function.py にまとめる。

app.py

from services.ai_function import run_ai を追加
ルート / に methods=["GET","POST"] を付ける
request.form.get("user_input") で入力を受け取る
run_ai(text) を1回だけ呼んで結果を render_template に渡す
外部APIなら from dotenv import load_dotenv; load_dotenv() も入れる

templates/index.html

<form method="POST"> を追加
<textarea name="user_input"></textarea> を置く（nameが重要）
{% if result %} {{ result }} {% endif %} で結果を表示
ファイルを扱う場合は <form enctype="multipart/form-data"> と <input type="file" name="csv_file"> を追加

services/ai_function.py

run_ai(text) を必ず1つ定義
ローカル処理 or API呼び出し or CSV処理など、やることをこの関数に書く
入力が空やエラーのときは「入力が空です」「APIエラー」などの文字列を返す

requirements.txt

最初は flask のみ
APIを使うなら requests, .env を読むなら python-dotenv
CSVを使うなら pandas

.env

APIキーを追記（例：OPENAI_API_KEY=xxxxx）

static/style.css

フォームや結果表示の見た目を整える（任意）

非AI機能を追加するとき（例：投稿機能・タスク管理）

ルール：処理は services、画面は templates、司令塔は app.py に分ける。

app.py

新しいルートを追加（例：/tasks）
GET：services の関数から一覧をもらってテンプレートに渡す
POST：フォームの入力を受け取って services に保存処理を任せる

templates/

新しい画面を作る（例：tasks.html）
投稿フォームと一覧表示を用意
{{ 変数 }} で app.py から渡されたデータを表示

services/

新しいファイルを作る（例：task_service.py）
投稿を保存する関数、一覧を返す関数を実装
初めはリスト変数でOK、あとからDBに置き換えやすい

static/style.css

投稿フォームや一覧の見た目を整える

requirements.txt / .env

非AI機能なら基本的に追加不要（DBを使う場合は SQLAlchemy など追記する）