目次
- はじめに
- アプリの要件定義
- 開発環境の構築
- React TODOアプリの作成手順
- TODOアプリのビルドとデプロイ
- ConoHa WINGへのアップロード手順
- まとめ
※記事の最後にはgithubでコードを公開してあります！！
1. はじめに
この記事では、Reactを使用したTODOアプリの作成から、ConoHa WINGにデプロイするまでの手順を詳しく解説します。初心者でも簡単に実装できるように、手順ごとにわかりやすく説明しています。
2. アプリの要件定義
以下の機能を持つTODOアプリを作成します。
必須機能
✅ タスクの追加・編集・削除機能
✅ タスクの移動（ドラッグ＆ドロップ対応）
✅ タスクの状態管理（「アイデア」「実行」「完了」の3つ）
✅ 全てのタスクに「削除」ボタンと「編集」ボタンを配置
デザイン要件
✅ カラムレイアウト
✅ タスクの入力欄とタスクリストは直感的に操作可能
✅ モバイル対応のレスポンシブデザイン
3. 開発環境の構築
以下のツールとライブラリを使用します。
✅ Node.js（v18以上推奨）
✅ npm または yarn
✅ React（v19.0.0）
✅ @hello-pangea/dnd（ドラッグ＆ドロップ機能）
手順
- Node.jsのインストール
- プロジェクトの作成
- 必要なライブラリのインストール
npx create-react-app todo-app
cd todo-app
npm install @hello-pangea/dnd
4. React TODOアプリの作成手順
① コンポーネントの設計
App.js：アプリ全体の管理TodoForm.js：タスクの追加フォームTodoItem.js：タスク1つの要素TodoList.js：タスクリストの表示とカラム管理
② データの管理
useStateフックを利用し、以下のデータ構造でタスクを管理します。
[
{ id: "1", text: "サンプルタスク", status: "idea" },
{ id: "2", text: "別のタスク", status: "done" }
]
③ ドラッグ＆ドロップの実装
@hello-pangea/dndを利用し、タスクの移動機能を追加します。- ドロップ先が無効の場合は無視するロジックを実装します。
④ 編集・削除機能の実装
- 各タスクに「編集」と「削除」ボタンを配置します。
- 編集機能では、既存のテキストを変更可能にします。
- 「完了」カラムに移動したタスクは、削除ボタンを追加します。
5. TODOアプリのビルドとデプロイ
Reactアプリはビルドすることで、静的なHTML/CSS/JSに変換されます。
以下のコマンドでビルドを行います。
npm run buildビルドが完了すると、build フォルダが作成されます。
6. ConoHa WINGへのアップロード手順
- ConoHa WINGにログイン
- ファイルマネージャーを開く
buildフォルダ内のファイルを選択しアップロード.htaccessの作成
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
index.html の <head> タグ内に以下を追記し、パスを修正
<script defer src="/generator/todo-app/static/js/main.js"></script>
<link rel="stylesheet" href="/generator/todo-app/static/css/main.css">
7. まとめ
これで、Reactで作成したTODOアプリがConoHa WING上にデプロイされ、ドラッグ＆ドロップ機能や編集・削除機能を備えたアプリが公開されました。
初心者の方でも手順に沿って進めることで、基本的なReactの実装やデプロイ手順を学ぶことができます。ぜひ今回の内容を参考に、あなたのオリジナルアプリ作りにチャレンジしてみてください。