【ReactNative】TODOアプリを作ってみた

はじめに

今回は、ReactNativeを用いてTODOアプリを作成していく。

環境構築がまだの方は、こちらを参考にお願いします。

今回はこちらのライブラリーを用いて実装していきます。

内容

ライブラリーをインストール

npm install react-native-elements react-native-vector-icons

タスクの変数と関数を用意

  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

taskとtasksの状態変数:

• task は現在のタスクの文字列を格納します。ユーザーが新しいタスクを入力する際に、この状態変数が更新されます。
• tasks はタスクのリストを格納します。追加された各タスクはこのリストに保存されます。

タスクを追加する関数を定義

const addTask = () => {
    if (task.trim() !== '') {
      setTasks([...tasks, task]);
      setTask('');
    }
  };

この関数は、新しいタスクをタスクリストに追加するために呼び出されます。
最初に、taskの値が空でないかチェックします。空でない場合、新しいタスクをtasks配列に追加します。
追加後に、taskの値を空文字して、新しいタスクを入力しやすくします。

タスクを削除する関数を定義

  const removeTask = (index) => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

この関数は、指定されたインデックスのタスクをタスクリストから削除するために呼び出されます。
newTasksという新しい配列を作成し、元のtasks配列から指定されたインデックスのタスクを削除します。

コンポーネントの作成

タスクのテキストフィールド

 <TextInput
          placeholder="新しいタスクを追加"
          value={task}
          onChangeText={(text) => setTask(text)}
    />

TextInput コンポーネントは、新しいタスクを入力するためのテキストフィールドです。valueプロパティにtaskの値を反映しており、onChageText内で新しいタスクの名前を変数に保存している。

タスク追加のボタン

<TouchableOpacity onPress={addTask}>
    <Icon name="add" size={30} color="white" />
</TouchableOpacity>

TouchableOpacityコンポーネントは、タスクを追加するためのボタンです。ユーザーがこのボタンをタップすると、　addTask関数が実行されます。
TouchableOpacityコンポーネントを用いることで、ボタンタップ時に透明度を下げることができます。

タスクのリスト表示

<FlatList
    data={tasks}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item, index }) => (
        <View>
            <Text>{item}</Text>
            <TouchableOpacity onPress={() => removeTask(index)}>
              <Icon name="delete" size={20} color="red" />
            </TouchableOpacity>
        </View>
    )}
/>

タスクリストの表示は、FlatListコンポーネントを使用して表示されます。このコンポーネントはスクロール可能なリストを作成し、

• dataプロパティに タスクリスト状態変数を反映
• keyExtractorプロパティに　一意のキー値を持たせるためindexの文字列を設定
• renderItemプロパティに　List内の要素のコンポーネントを作成して設定

各タスクは個別の項目として表示され、renderItemプロパティに指定された関数によってレンダリングされます。

他にもプロパティが用意されているので参考までに御覧ください。

タスク削除ボタン

上記のタスク項目内に実装されています。

<TouchableOpacity onPress={() => removeTask(index)}>
    <Icon name="delete" size={20} color="red" />
</TouchableOpacity>

削除ボタンのコンポーネントを作成して、各項目の中に含まれています。
このコンポーネントをタップすることにより、タスク削除の処理が呼び出されます。

完成

iOS

Web

まとめ

サンプルコード

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

const ToDoApp = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim() !== '') {
      setTasks([...tasks, task]);
      setTask('');
    }
  };

  const removeTask = (index) => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>ToDoアプリ</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="新しいタスクを追加"
          value={task}
          onChangeText={(text) => setTask(text)}
        />
        <TouchableOpacity style={styles.addButton} onPress={addTask}>
          <Icon name="add" size={30} color="white" />
        </TouchableOpacity>
      </View>
      <FlatList
        data={tasks}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <View style={styles.taskItem}>
            <Text>{item}</Text>
            <TouchableOpacity onPress={() => removeTask(index)}>
              <Icon name="delete" size={20} color="red" />
            </TouchableOpacity>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginTop: 100,
    marginBottom: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 10,
  },
  input: {
    flex: 1,
    height: 40,
    borderWidth: 1,
    borderColor: 'gray',
    marginRight: 10,
    paddingHorizontal: 10,
  },
  addButton: {
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
    width: 40,
    height: 40,
  },
  taskItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
});

export default ToDoApp;

今回は、ReactNativeでTODOアプリの実装を行いました。作成したTODOアプリはタスクがメモリ上に残るのみであり、一度アプリを落とすと消えてしまいます。そのため、次回以降にローカルDB　または、Firestore上にデータ保管する機能を実装してみたいと考えています。

最後に

他にも良い方法があれば、コメントいただけると大変うれしいです。
良かったと思ったら、いいねやTwitterのフォローよろしくお願いいたします！

個人でアプリを作成しているので、良かったら覗いてみてください！