rn-9-1. シンプルなTodoアプリ

TextInput、Button、FlatListを組み合わせてTodoアプリを作ります

React Native - 第3章: React Native実践

📚

関連する教科書第3章: React Native実践

課題：シンプルなTodoアプリを作ろう

これまで学んだことを総動員して、Todoアプリを作ります。 TextInput、Button、FlatListを組み合わせて、追加・削除機能を実装しましょう。

やること

1.Todoの配列を状態で管理する（id、text）
2.TextInputで新しいTodoを入力
3.Buttonで追加する
4.FlatListでTodoリストを表示
5.各Todoに削除ボタンをつける

実装のポイント

Todoの追加：

const addTodo = () => {
  if (text.trim()) {
    const newTodo = {
      id: Date.now().toString(),
      text: text,
    };
    setTodos([...todos, newTodo]);
    setText('');
  }
};

Todoの削除：

const deleteTodo = (id) => {
  setTodos(todos.filter(todo => todo.id !== id));
};

ポイント：idにはDate.now()を使うと、ユニークな値を簡単に作れます。

期待される出力

[新しいTodo入力] [追加]

Todo リスト:
・買い物に行く [削除]
・レポートを書く [削除]
・メールを返信 [削除]

import { View, Text, TextInput, Button, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function App() {
  const [text, setText] = useState('');
  const [todos, setTodos] = useState([]);
  
  // ここにaddTodo関数を作成してください
  // 1. textが空でないことを確認
  // 2. 新しいTodoオブジェクトを作成（id: Date.now().toString(), text: text）
  // 3. todosに追加
  // 4. textを空にする
  
  
  // ここにdeleteTodo関数を作成してください
  // todosをfilterして、指定されたid以外を残す
  
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Todo リスト</Text>
      
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={text}
          onChangeText={setText}
          placeholder="新しいTodoを入力"
        />
        <Button title="追加" onPress={addTodo} />
      </View>
      
      {/* ここにFlatListを追加してください */}
      {/* data={todos} */}
      {/* keyExtractor={(item) => item.id} */}
      {/* renderItemで各Todoと削除ボタンを表示 */}
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
    gap: 10,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    fontSize: 16,
  },
  todoItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
    padding: 15,
    marginBottom: 10,
    borderRadius: 5,
    borderLeftWidth: 4,
    borderLeftColor: '#2196F3',
  },
  todoText: {
    fontSize: 16,
    flex: 1,
  },
  deleteButton: {
    backgroundColor: '#FF5252',
    padding: 8,
    borderRadius: 5,
  },
  deleteButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

Open Sandbox

← 前のレッスン: rn-8-4. FlatListの使い方

次のレッスン: rn-9-2. Todoアプリに完了機能を追加 →