- Node.jsをインストールし、バージョンを確認してください。Nuxt3はNode.jsのバージョン18以上が必要です。
nodenv install 18.0.0
node -v- VS Codeのターミナルを開き、リポジトリのクローンを作成します。
cd path/to/your/directory
git clone https://github.com/tsato21/todo-app-nuxt3.git- リポジトリのフォルダにアクセスします。
cd todo-app-nuxt3- Node Package Managerをインストールします。
npm install- 開発モードのサーバーを起動します。
npm run dev- (表示された場合のみ) 参加に対して、"⚫︎ Yes"を選択します。
❯ Are you interested in participating?
● Yes / ○ No- このアプリのホームページにアクセスします。(
http://localhost:3000)
ページトップより、言語を選択してください。
- 初期設定は日本語で設定されています。
- 選択可能な言語は日本語とEnglishです。
Todoの追加、更新、削除、完了状態の管理、及び完了状態によるフィルタリングなどのTodo管理が可能です。
- ページトップの"ホーム"をクリックすると、該当ページにアクセスできます。
- "+ 追加" ボタンをクリックします。
- 追加画面でTodoの詳細を入力し、"追加" をクリックします。
- "スタッフ" はスタッフリストにて、追加することで選択可能になります。("スタッフリストの管理"で説明)
- 新しいTodoが自動的にTodoリストテーブルに追加されます。
- 編集したいTodoの "編集" ボタンをクリックします。
- 編集画面でTodoを編集し、 "閉じる" をクリックします。
- 編集情報は自動的にTodoリストテーブルに反映されます。
- 削除したいTodoの "削除" ボタンをクリックします。
- 確認画面で "削除" をクリックします。
- Todoが自動的にTodoリストテーブルから削除されます。
- Todoが完了したら、チェックボックスをクリックします。
- Todoの完了状態が自動的に更新され、Todoリストテーブルに反映されます。
- "未完了"、"全て"、または "完了" ボタンをクリックします。
- Todoリストテーブルは自動的に更新され、選択したフィルタに一致するTodoのみが表示されます。
特定のスタッフにTodoを割り当てたい場合は、この機能を使用します。
- Todoの追加/編集画面内のスタッフのドロップダウンリストに反映されます。
- ページトップの"スタッフリスト"をクリックすると、該当ページにアクセスできます。
- スタッフ名を入力し、"追加" をクリックします。
- 追加されたスタッフは自動的にスタッフリストテーブルに表示されます。
- 特定のスタッフの "編集" をクリックします。
- 編集画面でスタッフ名を編集し、 "閉じる" をクリックします。
- テーブル内のスタッフ名が自動的に更新されます。
- この更新はTodoリストテーブルのスタッフ情報にも自動反映されます。
- 特定のスタッフの "削除" をクリックします。
- 確認画面で "削除" をクリックします。
- テーブル内のスタッフ情報が自動的に削除されます。
- この削除はTodoリストテーブルのスタッフ情報に反映されます。