Flutter と Django を使ったモバイルアプリ開発の基礎

## 記事の目的

こんにちは。私は大学二年生で、IT業界にエンジニアとして就職することを目標として、日々アプリ開発に励んでいます。今回は、モバイルアプリ開発の初期段階で Flutter と Django を使ってデータベース（PostgreSQL）と接続する方法 を学んだのでまとめておきます。

---

## 必要なパッケージのインストール

### Flutter のパッケージ
Flutter で API を利用するために、`dio` パッケージを追加します。

```yaml
# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0
```

ターミナルで次のコマンドを実行して、パッケージをインストールします。

```sh
flutter pub get
```

---

### Django + PostgreSQL のセットアップ

#### **1. 仮想環境の作成と Django のインストール**
まず、Python の仮想環境を作成し、Django と PostgreSQL に接続するための `psycopg2` をインストールします。

```sh
# 仮想環境の作成
python -m venv env

# 仮想環境の有効化（Windows）
env\Scripts\activate

# Django と psycopg2 のインストール
pip install django psycopg2
```

#### **2. Django プロジェクトの作成と設定**
プロジェクトディレクトリを作成し、Django プロジェクトを初期化します。

```sh
# Django プロジェクトの作成
django-admin startproject myproject
cd myproject

# アプリの作成
python manage.py startapp myapp
```

次に、`settings.py` で **PostgreSQL** を設定します。

```python
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'testdb',  # データベース名
        'USER': 'postgres',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '5432',
        'OPTIONS': {
            'client_encoding': 'UTF8',
        },
    }
}
```

#### **3. マイグレーションの実行**
データベースのマイグレーションを行い、テーブルを作成します。

```sh
python manage.py makemigrations myapp
python manage.py migrate
```

#### **4. スーパーユーザーの作成**
管理画面にアクセスするためのスーパーユーザーを作成します。

```sh
python manage.py createsuperuser
```

---

## Django の API を作成

Flutter からデータを取得するために、Django REST Framework（DRF）を使って API を作成します。

#### **1. DRF のインストール**
```sh
pip install djangorestframework
```

#### **2. `views.py` の作成**
```python
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .models import User
from .serializers import UserSerializer

@api_view(['GET'])
def get_users(request):
    users = User.objects.all()
    serializer = UserSerializer(users, many=True)
    return Response(serializer.data)
```

#### **3. `urls.py` の設定**
```python
from django.urls import path
from .views import get_users

urlpatterns = [
    path('users/', get_users, name='get_users'),
]
```

#### **4. Django サーバーの起動**
```sh
python manage.py runserver
```

---

## Flutter から Django の API にリクエストを送る

Flutter から Django の API にリクエストを送信し、データを取得します。

#### **1. `api_service.dart` を作成**
```dart
import 'package:dio/dio.dart';

class ApiService {
  final Dio _dio = Dio();
  final String baseUrl = "http://127.0.0.1:8000/api/";

  Future<List<dynamic>> fetchUsers() async {
    final response = await _dio.get("${baseUrl}users/");
    return response.data;
  }
}
```

#### **2. UI にデータを表示**
```dart
import 'package:flutter/material.dart';
import 'api_service.dart';

class UserListScreen extends StatefulWidget {
  @override
  _UserListScreenState createState() => _UserListScreenState();
}

class _UserListScreenState extends State<UserListScreen> {
  final ApiService apiService = ApiService();
  List<dynamic> users = [];

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  void fetchUsers() async {
    final data = await apiService.fetchUsers();
    setState(() {
      users = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ユーザー一覧")),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(users[index]['name']),
            subtitle: Text(users[index]['email']),
          );
        },
      ),
    );
  }
}
```

---

## まとめ

今回は、Flutter と Django を連携させ、PostgreSQL を使ってデータを管理する方法を学びました。

- **Django のセットアップ（PostgreSQL の設定）**
- **Django REST Framework で API を作成**
- **Flutter から API にリクエストを送信し、データを表示**

実際のアプリ開発では、認証やエラーハンドリングも考慮する必要がありますが、まずはこの基本を押さえておけばスムーズに開発が進められると思います！