誰でもできるスマホアプリ開発：初心者向けTODO管理アプリを作ろう

---

はじめに

スマートフォンのアプリ開発は、プログラミング初心者でも手軽に楽しめる趣味です。この記事では、初心者向けにスマホアプリ開発の基本を簡単な言葉で説明し、実際に簡単なTODO管理アプリを作る手順をコードとともに紹介します。

開発環境の準備

アプリ開発には、開発環境が必要です。今回は、React NativeというJavaScriptのフレームワークを使います。React Nativeは、AndroidとiOSの両方のアプリを同時に開発できるので、効率的です。

開発環境の準備手順は以下の通りです。

1. Node.jsのインストール: Node.js公式サイトからインストーラをダウンロードしてインストールしてください。
2. React Native CLIのインストール: コマンドプロンプトまたはターミナルを開き、「npm install -g react-native-cli」と入力して実行してください。
3. Expo CLIのインストール: コマンドプロンプトまたはターミナルで、「npm install -g expo-cli」と入力して実行してください。

プロジェクトの作成

まずは、アプリのプロジェクトを作成します。コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行してください。

expo init todo-app
cd todo-app
expo start

これで、プロジェクトが作成され、開発サーバーが起動します。ブラウザで表示されるQRコードをスマホのカメラで読み取るか、Expo Goアプリをインストールしてプロジェクトを開いてください。

コンポーネントの作成

React Nativeでは、画面の部品をコンポーネントと呼びます。TODO管理アプリには、以下のコンポーネントが必要です。

• 入力フォーム
• TODOリスト
• TODOアイテム

それぞれのコンポーネントを作成していきます。

入力フォーム

入力フォームは、テキスト入力と追加ボタンからなります。componentsフォルダを作成し、その中にInputForm.jsファイルを作成してください。以下のコードをコピーして、InputForm.jsに貼り付けてください。

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

const InputForm = (props) => {
const [inputText, setInputText] = useState('');

const inputHandler = (enteredText) => {
setInputText(enteredText);
};

const addButtonHandler = () => {
props.onAddTask(inputText);
setInputText('');
};

return (
<View style={styles.inputContainer}>
<TextInput
     placeholder="タスクを入力"
     style={styles.input}
     onChangeText={inputHandler}
     value={inputText}
   />
<Button title="追加" onPress={addButtonHandler} />
</View>
);
};

const styles = StyleSheet.create({
inputContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
input: {
width: '80%',
borderBottomColor: 'black',
borderBottomWidth: 1,
padding: 10,
marginBottom: 10,
},
});

export default InputForm;

TODOリスト

TODOリストは、FlatListを使用してリスト表示します。componentsフォルダにTaskList.jsファイルを作成し、以下のコードを貼り付けてください。

import React from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import TaskItem from './TaskItem';

const TaskList = (props) => {
  return (
    <View style={styles.listContainer}>
      <FlatList
        data={props.tasks}
        renderItem={(itemData) => (
          <TaskItem
            id={itemData.item.id}
            title={itemData.item.title}
            onDelete={props.onDeleteTask}
          />
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  listContainer: {
    flex: 1,
    marginTop: 10,
  },
});

export default TaskList;

TODOアイテム

TODOアイテムは、タスク名と削除ボタンからなります。componentsフォルダにTaskItem.jsファイルを作成し、以下のコードを貼り付けてください。

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const TaskItem = (props) => {
  return (
    <TouchableOpacity onPress={() => props.onDelete(props.id)}>
      <View style={styles.listItem}>
        <Text>{props.title}</Text>
        <TouchableOpacity onPress={() => props.onDelete(props.id)}>
          <Text style={styles.deleteButton}>削除</Text>
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  listItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#ccc',
    borderColor: 'black',
    borderWidth: 1,
    marginBottom: 10,
  },
  deleteButton: {
    color: 'red',
  },
});

export default TaskItem;

アプリの完成

最後に、作成したコンポーネントをApp.jsで組み合わせます。以下のコードに置き換えてください。

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import InputForm from './components/InputForm';
import TaskList from './components/TaskList';

const App = () => {
const [tasks, setTasks] = useState([]);

const addTaskHandler = (taskTitle) => {
setTasks((currentTasks) => [
...currentTasks,
{ id: Math.random().toString(), title: taskTitle },
]);
};

const deleteTaskHandler = (taskId) => {
setTasks((currentTasks) => {
return currentTasks.filter((task) => task.id !== taskId);
});
};

return (
<View style={styles.screen}>
<InputForm onAddTask={addTaskHandler} />
<TaskList tasks={tasks} onDeleteTask={deleteTaskHandler} />
</View>
);
};

const styles = StyleSheet.create({
screen: {
padding: 50,
},
});

export default App;

これで、簡単なTODO管理アプリが完成しました。Expo Goアプリでプレビューし、タスクの追加と削除ができることを確認してください。

まとめ

この記事では、初心者向けにスマホアプリ開発の基本を説明し、簡単なTODO管理アプリを作る手順を紹介しました。React Nativeを使えば、AndroidとiOSの両方に対応したアプリを簡単に作成できます。これをきっかけに、アプリ開発の世界に挑戦してみてください。