TypeScriptを使ってマッチングアプリを作る！
こんにちは！今回は、TypeScriptとFlaskを使ってマッチングアプリを作成する方法をご紹介します。このガイドでは、フロントエンドにTypeScript、バックエンドにFlaskを使用し、step by stepで開発プロセスを説明していきます。
1. プロジェクトのセットアップ
まず、プロジェクトの基本構造を作成しましょう。
matching-app/
├── frontend/
│ ├── src/
│ ├── public/
│ ├── package.json
│ └── tsconfig.json
└── backend/
├── app.py
├── requirements.txt
└── venv/
フロントエンドのセットアップ
フロントエンドではReactとTypeScriptを使用します。
npx create-react-app frontend --template typescript
cd frontend
npm install axios
バックエンドのセットアップ
バックエンドではFlaskを使用します。
cd backend
python -m venv venv
source venv/bin/activate # On Windows use `venv\Scripts\activate`
pip install flask flask-cors
pip freeze > requirements.txt
2. バックエンドの開発
app.pyにFlaskアプリケーションを作成します。
from flask import Flask, request, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
users = [
{"id": 1, "name": "田中太郎", "age": 25, "interests": ["読書", "旅行"]},
{"id": 2, "name": "佐藤花子", "age": 28, "interests": ["料理", "スポーツ"]},
# ... more users ...
]
@app.route('/api/users', methods=['GET'])
def get_users():
return jsonify(users)
@app.route('/api/match', methods=['POST'])
def match_users():
user_id = request.json['userId']
user = next((u for u in users if u['id'] == user_id), None)
if not user:
return jsonify({"error": "User not found"}), 404
matches = [u for u in users if u['id'] != user_id and set(u['interests']) & set(user['interests'])]
return jsonify(matches)
if __name__ == '__main__':
app.run(debug=True)
3. フロントエンドの開発
3.1 ユーザー一覧コンポーネント
src/components/UserList.tsxを作成します。
import React, { useEffect, useState } from 'react';
import axios from 'axios';
interface User {
id: number;
name: string;
age: number;
interests: string[];
}
const UserList: React.FC = () => {
const [users, setUsers] = useState<User[]>([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await axios.get('http://localhost:5000/api/users');
setUsers(response.data);
};
fetchUsers();
}, []);
return (
<div>
<h2>ユーザー一覧</h2>
<ul>
{users.map(user => (
<li key={user.id}>
{user.name} ({user.age}歳) - 興味: {user.interests.join(', ')}
</li>
))}
</ul>
</div>
);
};
export default UserList;
3.2 マッチング機能コンポーネント
src/components/Matching.tsxを作成します。
import React, { useState } from 'react';
import axios from 'axios';
interface User {
id: number;
name: string;
age: number;
interests: string[];
}
const Matching: React.FC = () => {
const [userId, setUserId] = useState<number>(0);
const [matches, setMatches] = useState<User[]>([]);
const handleMatch = async () => {
try {
const response = await axios.post('http://localhost:5000/api/match', { userId });
setMatches(response.data);
} catch (error) {
console.error('Matching error:', error);
}
};
return (
<div>
<h2>マッチング</h2>
<input
type="number"
value={userId}
onChange={(e) => setUserId(Number(e.target.value))}
placeholder="ユーザーID"
/>
<button onClick={handleMatch}>マッチングを開始</button>
<h3>マッチング結果:</h3>
<ul>
{matches.map(user => (
<li key={user.id}>
{user.name} ({user.age}歳) - 興味: {user.interests.join(', ')}
</li>
))}
</ul>
</div>
);
};
export default Matching;
3.3 メインアプリケーションコンポーネント
src/App.tsxを更新します。
import React from 'react';
import UserList from './components/UserList';
import Matching from './components/Matching';
const App: React.FC = () => {
return (
<div className="App">
<h1>マッチングアプリ</h1>
<UserList />
<Matching />
</div>
);
};
export default App;
4. アプリケーションの実行
- バックエンドの起動:
cd backend
source venv/bin/activate # On Windows use `venv\Scripts\activate`
python app.py
- フロントエンドの起動:
cd frontend
npm start
ブラウザでhttp://localhost:3000を開くと、アプリケーションが表示されます。
5. まとめ
このチュートリアルでは、TypeScriptとFlaskを使用してシンプルなマッチングアプリケーションを作成しました。フロントエンドではReactとTypeScriptを使用してユーザーインターフェースを構築し、バックエンドではFlaskを使用してAPIを提供しました。
このアプリケーションをベースに、さらに機能を追加したり、デザインを改善したりすることができます。例えば、ユーザー認証、プロフィール編集、リアルタイムチャット機能などを追加することで、より本格的なマッチングアプリケーションに発展させることができるでしょう。
TypeScriptとFlaskの組み合わせは、フロントエンドとバックエンドの両方で型安全性を確保しつつ、高速な開発を可能にします。この組み合わせを使いこなすことで、効率的で堅牢なウェブアプリケーションを開発することができます。
ぜひ、このプロジェクトをベースに、自分だけのユニークなマッチングアプリを作成してみてください。がんばってください！