todoアプリ　解説

### 登場人物一覧

```ruby:
 登録したいもの : task

 登録する時、一時的に使うもん :tasks
 
 削除時、使うもん　：task_id
```

### task新規登録したら、一覧に戻る
 
```ruby:app.py
if request.method == 'POST':
        task = request.form.get('task')
        if task:
            tasks.append(task)
        return redirect(url_for('index'))
```

### ”タスクを追加”リンクをクリックしたら、add.index(タスク追加画面)へ

```ruby:index.html
<a href="{{ url_for('add') }}">タスクを追加</a>
```

### ”削除”リンクをクリックしたら、削除され一覧画面(index.html)へ
 
```ruby:index.html
<a href="{{ url_for('delete', task_id=loop.index0) }}">削除</a>
```

### 削除処理
 
```ruby:app.py
@app.route('/delete/<int:task_id>')
def delete(task_id):
    if 0 <= task_id < len(tasks):
        tasks.pop(task_id)
    return redirect(url_for('index'))
```

### 戻るボタンを押したら、index.html(タスク一覧画面)へ
 
```ruby:index.html
<a href="{{ url_for('index') }}">戻る</a>
```

## 登録したいものが「タスク」と「メモ」の２つに

###一覧
```ruby:app.py
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

tasks = []
notes = []  # メモ用のリスト

@app.route('/')
def index():
    return render_template('index.html', tasks=tasks, notes=notes)
```

### task追加リンククリックしたら、タスク追加画面へ
 
```ruby:
<form method="POST" action="{{ url_for('add_task') }}">
  <input type="text" name="task" placeholder="タスクを入力">
  <button type="submit">タスク追加</button>
</form>
```

### メモ追加リンククリックしたら、メモ追加画面へ

```ruby:
<form method="POST" action="{{ url_for('add_note') }}">
  <input type="text" name="note" placeholder="メモを入力">
  <button type="submit">メモ追加</button>
</form>
```

### 一覧画面

```ruby:
<h3>メモ一覧</h3>
<ul>
  {% for note in notes %}
    <li>{{ note }}</li>
  {% endfor %}
</ul>
```

### task追加処理とメモ追加処理

```ruby:
@app.route('/add_task', methods=['POST'])
def add_task():
    task = request.form.get('task')
    if task:
        tasks.append(task)
    return redirect(url_for('index'))

@app.route('/add_note', methods=['POST'])
def add_note():
    note = request.form.get('note')
    if note:
        notes.append(note)
    return redirect(url_for('index'))
```

### データ登録したから一覧画面に戻る

```ruby:
 redirect
```

## 編集機能

### データを新しく上書きし、一覧画面へ

```ruby:app.py
if request.method == 'POST':
        new_task = request.form.get('task')
        tasks[index] = new_task
        return redirect(url_for('index'))
```

### 編集ボタン表示

```ruby:
<a href="{{ url_for('edit', index=loop.index0) }}">編集</a>
```

### 編集画面作成

```ruby:
<form method="POST">
  <input type="text" name="task" value="{{ task }}">
  <button type="submit">保存</button>
</form>
```

### タスクを編集する時

## IndexError: list assignment index out of range

<p>ifでdataが長いか短いかチェックしてない<```

![スクリーンショット 2025-04-25 18.37.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628823/9e1799ca-c9f2-4f8f-83d8-df6ed6fce5b9.png)

```ruby:解決策
def edit_task(index):
    if index < len(tasks):
        if request.method == 'POST':
            new_task = request.form.get('task')
            if new_task:
                tasks[index] = new_task
            return redirect(url_for('index'))
        return render_template('edit_task.html', task=tasks[index])
    else:
        return "タスクが見つかりません"  # インデックスが範囲外の場合
```

### edit 画面 if index < len(tasks):　仕組み

```ruby:
ないデータ( tasks[99]ちょーだい )リクエストがきたら「そんなインデックスない」って怒る仕組みになってる。
だから、if index < len(tasks):ってチェック
```

$$$ ファイル変更あったら自動で再リロード

```ruby:run.py か app.py
if __name__ == "__main__":
    app.run(debug=True, use_reloader=True)
```