TODOアプリ開発記録
はじめに
私は、３３歳の主婦で、エンジニアに転職することを目指しています。現在はSEの職業訓練校に通い、JAVAやPHPを学んでいます。
今回は、ポートフォリオとしてTODOアプリを作成をchatGPTに質問しながら作っていく過程をQiitaに記録していきたいと思います。
以下に、作業環境と作成するTODOアプリの内容をまとめます。
作業環境
- OS: Windows11
- エディタ: VSCode
作成するTODOアプリケーションの技術スタック
- クライアントサイド: Next.js + TypeScript + Material-UI
- サーバーサイド: .NET6 + WEB APIテンプレート
- データベース: PostgreSQL
- クラウドサーバー: Azure + AppService
作成するTODOアプリケーションの仕様
クライアントサイド
- UIの処理のみを行い、永続化などはサーバーサイドで行う。
- 以下の切り替えが可能なこと:
- 未完了のタスクのみ表示する機能
- 完了済のタスクのみ表示する機能
- 予定日が過ぎたタスクを強調表示する機能
サーバーサイド（API）
- タスクを全件取得する機能
- 未完了タスクのみを取得する機能
- 完了済タスクのみを取得する機能
- タスクを追加する機能
- 予定日を入力できること
- 内容は100文字以内であること
- タスクを編集する機能
- 完了時には完了日時を設定すること
- 内容は100文字以内であること
- タスクを削除する機能
その他
- Axiosを使用する。
- その他のライブラリなどは制限しない。
現在の作業進捗
まだ何も行っていません。
以下の内容はchatGPTに設計を作ってもらいました。
この順番で作っていきたいと思います。
1. 開発環境の設定
-
create-next-appコマンドを使用して、新しいNext.jsプロジェクトを作成します。この際、--typescriptオプションを使用してTypeScriptの設定も行います。 - プロジェクトディレクトリに移動します。
- 必要なパッケージ（Material-UI、Axios）をnpmを使用してインストールします。
2. アプリケーションの大枠作成
-
_app.tsxと_document.tsxを作成し、アプリケーション全体で必要な設定（Material-UIの設定、グローバルスタイルなど）を行います。
3. コンポーネントの作成
- ヘッダーやフッター、サイドバーなどの主要なコンポーネントを作成します。
- メインコンテンツ領域を作成します。ここには未完了タスク一覧や完了タスク一覧などが表示されます。
- タスクを表示するコンポーネントを作成します。これにはタスクのステータス（未完了/完了）や期日の過ぎているかどうかを視覚的に表示する機能が含まれます。
4. API通信用の関数の作成
- Axiosを使用してAPIと通信するための関数を作成します。これらの関数はタスクの取得、追加、編集、削除を行います。
5. 状態管理の設定
- 必要に応じて、ReactのコンテクストAPIやReduxを使用して状態管理を設定します。これには現在表示されているタスクのリスト（未完了/完了）や選択されたタスクなどが含まれます。
6. UIの動的な変更
- UIの表示を現在の状態に応じて動的に変更します。例えば、特定のタスクを選択した場合には、そのタスクの詳細を表示するなどの機能を実装します。
7. テストの作成
- JestやReact Testing Libraryを使用して、各コンポーネントのユニットテストや統合テストを作成します。