販売用ToDoリストアプリ作成　32-33日目　2024/11/7-8（お金持ちまでの道のり）

このアプリが完成するまでの時間をAIに計算してもらったら２００時間でした。毎日１０時間やっても２０日前後かかります。なんだかんだいって１か月はかかると思います。そしてこれが収益を生まなかったらと考えると恐ろしい。でも良い経験になるはずなので頑張ります。

販売用ToDoリストアプリの概要

特定のタスクをテーマにしたアプリを制作します。筋トレ、脳トレ、勉強、健康管理など特定の目標を選択してもらい、その目標に向かって頑張る人をサポートするアプリです。

このアプリが持つ機能一覧

①カスタマイズ可能なリマインダー機能
推奨します。筋トレや勉強タスクの性質に合わせてリマインダーを柔軟に設定できることは、ユーザーの利用頻度を高めます。

②進捗状況の可視化
推奨します。進捗バーやパーセンテージはユーザーに達成感を与えるため、継続率向上が期待できます。

③カレンダーとの統合
カレンダーを使うことで習慣化を促せるため、アプリ内カレンダーを追加します。

④タグやラベルによる分類
タスク整理がしやすくなるため、ユーザーが使いやすいアプリになります。

⑤ウィジェット対応
必須ではありませんが、ホーム画面からのアクセスが便利であれば検討しても良い機能です。

⑥ダークモード対応
UI/UX向上のため、ユーザーのニーズに合わせた柔軟な表示が望まれます。

⑦レベルアップとアバターの変化
アプリの差別化ポイントになり、楽しさを与える重要な要素です。

⑧ボーナスや報酬システム
タスクを完了するたびに小さな報酬（ポイントやバッジ）を獲得できるシステムです。ポイントが貯まると特別なアバターのスキンや背景が解放されるなど、ユーザーに更なる達成感を提供します。

⑨リフレクション（振り返り）機能
毎週や毎月の進捗やタスクの達成状況をまとめ、振り返りを促す機能です。改善点や次の目標を自分で記録できると、ユーザーの自己管理能力が高まります。

⑩通知カスタマイズでのモチベーションメッセージ
通知の際に「あと少しで目標達成！」「今日もよく頑張りました！」などのポジティブなメッセージを表示することで、タスク完了のモチベーションを向上させる仕組みです。

⑪日次・週次・月次レポートの生成
自分の進捗を定期的に確認できるレポート機能を追加することで、タスク管理の達成感を感じやすくし、モチベーション維持に役立てます。

⑫習慣形成機能
特定のタスクを習慣化したい場合、連続して実行した日数をカウントし、習慣の進捗として表示します。習慣の途切れを防ぐために「連続〇日達成」などの表示を行うことで、ユーザーのモチベーション維持をサポートします。

アプリの販売方法：サブスクリプションモデル

サブスクリプションの利点

1. 収益の持続性：毎月の定額収入が得られるため、安定した収益が見込めます。また、ユーザーのフィードバックに応じて新機能の開発や改善を継続的に行える環境を整えられます。
2. 価値の継続提供：進捗状況のレポート機能や習慣形成機能など、長期間の使用で価値が増す機能が多いため、サブスクリプションが適しています。
3. ユーザー層に合致：筋トレや勉強を習慣にしたい層は長期的な利用を見込めるため、継続課金モデルがマッチしやすいです。

価格設定の提案

• 月額モデル：400～600円の月額プラン。長期間使用してもらいやすい低価格で、手軽に利用開始できる設定です。
• 年額モデル：月額プランより少し割引した年間プラン（例：年間4000～5000円）を設定すると、長期利用者にメリットを提供できます。

アプリ開発のステップの概要

1. 企画と要件定義

• ターゲットユーザーの明確化：筋トレや勉強を習慣化したい人々をターゲットにするなら、ユーザーが求める機能や体験を具体的に定義しましょう。
• 機能リストの優先順位付け：一度にすべての機能を実装するのは大変なので、MVP（Minimum Viable Product）として、まずは核となる機能（例：リマインダー、進捗可視化、タグ、レベルアップ）から始めると良いでしょう。

2. プロトタイピングとデザイン

• 画面遷移図の作成：ユーザーがどのようにアプリを利用するか、主要な画面を作成し、遷移の流れを決めます。
• ワイヤーフレーム作成：シンプルなレイアウトで画面デザインを考え、必要な要素（カレンダー表示、進捗バー、レベルアップの表示など）を配置して確認します。
• UIデザイン：ターゲットユーザーに合ったデザインを考え、楽しさと使いやすさを両立させます。

3. 技術選定と開発環境構築

• フロントエンド・バックエンドの技術選定：例えば、React NativeやFlutterを使えばiOSとAndroidの両方に対応した開発が可能です。また、バックエンドにFirebaseを利用すれば、ユーザーデータの保存やバックアップも簡単です。
• 環境構築：開発環境を整え、必要なツールやフレームワークをインストールし、開発がすぐに始められるようにします。

4. コア機能の開発

• リマインダー機能：通知の仕組みを設定し、指定した時間に通知を送る処理を実装します。
• 進捗可視化：進捗バーやパーセンテージを表示し、タスクの進行度を一目でわかるようにします。
• タグ機能：タグやラベルを付けるための分類システムを構築します。
• アバターとレベルアップ機能：タスク達成で経験値が貯まるような仕組みを実装し、アバターの進化を実現します。

5. テストとフィードバック収集

• 最初のバージョンをテストし、バグ修正やUXの改善を行います。

企画と要件定義

ターゲットユーザーに関する基礎

年齢層

1. 若者
2. 高齢者
3. ペット

ゴール（達成したい目的）

1. 若者
   「健康維持や体力向上、スタイルアップのための筋トレを習慣化する」
   「試験や資格取得のための学習時間を増やし、集中して取り組めるようサポートする」
   「目標に向けて進捗を確認し、達成感を感じられるようにすることで、モチベーションの維持・向上を目指す」
2. 高齢者
   「健康維持と体力向上のため、日々の簡単な筋トレや軽い運動を習慣化する」
   「認知機能の維持や向上を目的とした脳トレや学習の定期的な実施」
   「生活のリズムを整え、日々の予定や重要なタスク（薬の服用、散歩、買い物など）を忘れずに行う」
3. ペット
   「ペットの健康管理や体調維持を目的とし、毎日の運動量や食事の管理を行う」
   「成長記録や体重管理など、健康状態を一元管理し、獣医での定期健診や体調不良の早期発見に役立てる」
   「ペットとのスケジュールを把握し、散歩、食事、投薬などの習慣化をサポートする」

ライフスタイル・課題

1. 若者
   忙しい毎日での時間確保：学生や社会人の若者は、学業や仕事で忙しく、筋トレや学習の時間が確保しにくいことが課題です。効率的に時間を活用し、短時間でも集中して取り組めるようなリマインダーやタイムマネジメント機能が有効です。
   モチベーションの維持：筋トレや学習は継続が難しいため、進捗が可視化されることで達成感を得られる仕組みや、ゲーミフィケーションを活用したレベルアップ要素が役立ちます。レベルアップごとにアバターが変化したり、達成バッジがもらえる機能で、やる気を引き出せます。
   自己改善や競争意識：若者には自己改善や達成感を求める傾向があるため、週ごとのレポートや進捗報告、他のユーザーとの比較機能もモチベーションアップに効果的です。ただし、競争心を煽りすぎないよう、あくまで「自分の目標に向かって努力する」雰囲気を維持することが重要です。
   スケジュールに柔軟性が必要：勉強や筋トレの予定は柔軟に変わる可能性があるため、リマインダーやスケジュールをタスクごとに設定しやすいシステムが必要です。週次や月次でのリフレクション機能も、状況に合わせたスケジュールの見直しに役立ちます。
2. 高齢者
   健康維持が重要：多くの高齢者は健康管理に対する関心が高く、筋力低下や認知機能の維持を日常生活の一部としています。しかし、自己管理が難しい場合もあるため、定期的なリマインダーや記録が役立ちます。
   シンプルな操作が必要：デジタルに不慣れな場合も多く、インターフェースはシンプルかつ直感的であることが重要です。音声アシスタントや大きなボタンなど、視覚や操作性をサポートする仕組みが必要です。
   家族との共有：家族と一緒に生活している場合、タスクや健康の進捗を家族と共有し、支援を受けられることが安心感につながります。家族も高齢者の生活リズムを把握しやすくなるため、共有機能があると価値が増します。
   忘れやすさへの対応：定期的な通知でタスクや健康チェックを思い出させ、簡単に記録できる機能があると、習慣化がしやすくなります。
3. ペット
   忙しい日常での管理：飼い主が日々の生活の中で、ペットの運動や食事時間、投薬タイミングなどを管理するのは意外と手間がかかります。アプリが手軽に記録・通知してくれることで、習慣的なケアが簡単になります。
   ペットの健康を最優先：ペットは自分で体調を伝えられないため、日々の食事や運動、体重の変化などのデータを一元的に管理しておくことで、健康維持に役立ちます。特に年齢を重ねたペットには、健康管理の重要性が増します。
   楽しさを伴った記録：可愛いペットの成長を見守るため、健康管理や成長記録を楽しく続けられる仕組みがあると、アプリの価値が高まります。例えば、運動を行うと「健康ゲージ」が増えたり、成長の節目に小さな報酬やバッジがもらえたりする機能があると良いです。
   家族間での情報共有：家族全員が同じペットの健康状況や世話の状況を把握できると、手分けしてケアがしやすくなり、家族間の連携が取りやすくなります。

機能リストの優先順位付け

必須機能（初期リリース時に搭載する機能）

1. カスタマイズ可能なリマインダー機能
   • タスクの期限や開始時間に応じて通知のタイミングや頻度を設定可能。
   • 若者・高齢者・ペットそれぞれのスケジュールに合わせたリマインダー設定が可能。
2. 進捗状況の可視化
   • タスクの完了度合いをパーセンテージや進捗バーで表示し、達成感を感じられるようにする。
   • 各ユーザーが現在の進捗状況を簡単に把握し、モチベーション向上を促進。
3. タグやラベルによる分類
   • タスクにタグやラベルを付与し、カテゴリ別に整理・検索をしやすくする。
   • ペット向けの「散歩」「食事」などのカテゴリや、高齢者向けの「健康」「趣味」などの分類も追加。
4. ダークモード対応
   • 夜間や暗い環境でも目に優しい表示が可能に。
   • 視覚の疲れを軽減し、全てのユーザーに快適な表示環境を提供。
5. レベルアップとアバターの変化機能
   • タスクをこなすたびにアバターがレベルアップし、見た目やステータスが変化する機能。
   • 若者向けに達成感を高め、高齢者にはシンプルに成長の楽しみを提供、ペット向けには成長を記録できる。

追加機能（将来的に搭載を検討する機能）

1. ボーナスや報酬システム
   • タスク完了ごとに小さな報酬（ポイントやバッジ）を獲得し、アバターのスキンや背景を解放できる。
   • 若者向けの達成感、高齢者には目標設定の楽しみを提供。
2. リフレクション（振り返り）機能
   • 毎週や毎月の進捗やタスクの達成状況を確認し、自己改善のためのフィードバックを得られる。
   • 若者・高齢者ともに自己管理と改善のモチベーションに。
3. 通知カスタマイズでのモチベーションメッセージ
   • 通知にポジティブなメッセージを表示し、モチベーションを維持・向上。
   • 特に若者向けに、「今日もよく頑張りました！」などのメッセージでやる気を引き出す。
4. 日次・週次・月次レポートの生成
   • 日々のタスク進捗を定期的に確認できるレポートを生成。
   • 自分の進捗状況を視覚的に把握できるため、特に学習やトレーニングの進行度管理に役立つ。
5. 習慣形成機能
   • 特定のタスクを習慣化したい場合、連続実施日数を記録し、途切れ防止のための表示を行う。
   • 若者・高齢者の両方に有効で、習慣形成とモチベーション維持をサポート。

ユーザーストーリーの作成

ユーザーストーリーを作成する目的は、ユーザーがどのようにアプリを利用するかを具体的にイメージすることです。これにより、開発において以下のような効果が期待できます。

1. 若者向け（筋トレ・学習サポート）

シナリオ 1: 筋トレのタスクを追加し、リマインダーを設定する

• 若林さん（25歳・会社員）は、筋力アップのために週に3回の筋トレを習慣にしたいと考えています。アプリを開き、「筋トレ」のタスクを追加し、リマインダーを設定します。リマインダーは仕事が終わった後の19時に毎回通知されるように設定しました。

シナリオ 2: タスク完了でアバターがレベルアップし、達成感を感じる

• 若林さんは1週間のトレーニングを終え、アプリで「完了」ボタンを押します。その結果、アバターがレベルアップし、見た目が強化されました。これにより達成感を得て、翌週もトレーニングを続けるモチベーションが高まります。（学習の場合も同様）
• 若林さんはなんらかの理由でトレーニングをサボってしまい、アバターがレベルダウンし、見た目が弱体化されました。トレーニングは継続が重要だということを再確認します。（学習の場合も同様）

シナリオ 3: 振り返り機能で筋トレや学習の進捗を確認し、改善点を把握する

• 試験勉強中の若林さんは、毎週末にアプリを開いて学習の進捗を確認します。振り返り機能で、今週の学習時間や達成状況が表示され、来週の改善点も見えてきました。（筋トレの場合も同様）

2. 高齢者向け（健康・生活サポート）

シナリオ 1: 健康維持のためのタスクを追加し、リマインダーを設定する

• Gさん（68歳）は、健康維持のために毎朝の散歩と簡単な筋トレを習慣にしたいと考えています。アプリを開き、「散歩」と「筋トレ」のタスクを追加し、それぞれの時間に合わせてリマインダーを設定しました。

シナリオ 2: 進捗状況の可視化で運動習慣の達成感を感じる

• 毎日少しずつ運動を続けることで、Gさんはアプリ内の進捗バーが徐々に増えていくのを確認でき、達成感を感じます。また、運動を続けていくことで、アバターのステータスが少しずつ上がり、楽しみながら健康維持ができます。

シナリオ 3: リフレクション機能で週の運動状況を振り返り、モチベーションを維持する

• Gさんは週末にアプリを開き、今週どれくらい運動できたかを確認します。振り返り機能で運動の達成率が表示され、来週も続けようという気持ちが高まります。

シナリオ 4: 家族とアプリを共有する

• 遠方に住むGさんの家族はアプリを開くことでGさんの安否を確認できます。共通の話題も増えコミュニケーションの機会が生まれます。
• Gさんはなんらかの理由でしばらくタスクをこなせませんでした。アバターが寝たきりの状態になり、それを確認した家族から連絡が入ります。

3. ペットの飼い主向け（ペットの健康サポート）

シナリオ 1: ペットの散歩や食事のタスクを追加し、リマインダーを設定する

• 犬飼さん（34歳・会社員）は、愛犬の健康管理のため、毎日の散歩や食事時間を管理したいと考えています。アプリを開き、「散歩」と「食事」のタスクを追加し、毎日決まった時間にリマインダーが来るように設定しました。
• 食事や散歩が不十分だとアバターの表情が不機嫌になり、視覚的に状況の確認ができます。

シナリオ 2: ペットの健康進捗を確認し、適切なケアができているか把握する

• 犬飼さんはアプリでペットの健康進捗状況を確認し、散歩や食事のタスク達成度を見ています。アプリの進捗バーが増えていくのを確認し、愛犬の健康管理ができていることに安心感を得ています。

シナリオ 3: 日次レポートでペットの体調変化を記録し、早期発見に役立てる

• 犬飼さんは毎日ペットの体調を確認し、アプリ内のレポート機能を使って記録しています。少しでも異常があれば獣医に連れていく判断ができ、ペットの健康維持に役立てています。

プロトタイピングとデザイン

画面遷移図の作成

ここでは、アプリ内でどのように画面が切り替わり、ユーザーが目的の機能にたどり着くかを図にして確認します。画面遷移図を作成すると、UIデザインやユーザー体験の向上に役立ちます。

ステップ 1: 必要な画面をリストアップする

1. ホーム画面 - アプリ起動時に表示されるメイン画面。
2. タスク管理画面 - 新しいタスクを追加したり、進捗を確認できる画面。
3. リマインダー設定画面 - タスクごとに通知を設定する画面。
4. アバター画面 - アバターのレベルや見た目の変化を確認する画面。
5. 振り返り画面 - 週ごとや月ごとの進捗を振り返る画面。
6. 家族共有画面 - 家族がユーザーの状況を確認できる画面（高齢者向けのみ）。
7. ペット管理画面 - ペットの健康状態やタスク進捗を確認する画面（ペット向けのみ）。
8. 設定画面 - 各種設定を行う画面。

ステップ 2: 各画面の目的と主な機能を確認する

① ホーム画面 - アプリ起動時に表示されるメイン画面

• 目的: ユーザーがアプリを起動したときにまず表示され、各機能へのアクセスを提供するメインハブ。
• 主な機能:
  • 現在の進捗状況の簡易表示（例: 今日のタスク完了状況やアバターの状態）。
  • 各機能へのナビゲーション（タスク管理画面、振り返り画面、設定画面など）。
  • 新しいタスクの追加ボタンや、重要なリマインダー通知の確認。

② タスク管理画面 - 新しいタスクを追加したり、進捗を確認できる画面

• 目的: タスクを管理し、達成状況を把握できるようにする。
• 主な機能:
  • 新しいタスクの追加・編集・削除。
  • 各タスクの進捗状況の表示（完了済みや未完了のチェックボックスなど）。
  • タスクごとのリマインダー設定画面へのリンク。

③ リマインダー設定画面 - タスクごとに通知を設定する画面

• 目的: 各タスクに対するリマインダー通知のタイミングや頻度を設定し、忘れずにタスクをこなせるようサポート。
• 主な機能:
  • リマインダーの時間・頻度設定（例: 毎日、毎週、特定の曜日など）。
  • 通知メッセージのカスタマイズ（モチベーションアップのためのメッセージ）。
  • 設定したリマインダーのプレビューと確認。

④ アバター画面 - アバターのレベルや見た目の変化を確認する画面

• 目的: ユーザーが達成したタスクに応じたアバターの成長や見た目の変化を確認し、モチベーションを向上させる。
• 主な機能:
  • 現在のアバターのレベルとステータスの表示。
  • 過去のレベルアップ履歴や、次のレベルまでの進捗表示。
  • アバターのカスタマイズ機能（装備や背景の変更など）。

⑤ 振り返り画面 - 週ごとや月ごとの進捗を振り返る画面

• 目的: 過去のタスク達成状況や進捗を確認し、自己改善や目標設定に役立てる。
• 主な機能:
  • 週次・月次の達成率や進捗データの表示。
  • 日次の詳細なタスク完了履歴（どの日にどのタスクが達成されたか）。
  • 振り返りコメントや次週・次月への目標設定。

⑥ 家族共有画面 - 家族がユーザーの状況を確認できる画面（高齢者向けのみ）

• 目的: 高齢者の家族が、アプリ内で高齢者の健康やタスク達成状況を確認し、コミュニケーションのきっかけや安心感を提供する。
• 主な機能:
  • 高齢者のタスク進捗状況の表示（散歩や運動の達成状況など）。
  • 最近の活動履歴の確認（リマインダーの通知が無視されていないかなど）。
  • メッセージ機能やコメント機能での家族とのコミュニケーション（家族からの励ましの言葉など）。

⑦ ペット管理画面 - ペットの健康状態やタスク進捗を確認する画面（ペット向けのみ）

• 目的: ペットの健康管理状況を確認し、散歩や食事などのタスク進捗を可視化することで、ペットのケアがしやすくなる。
• 主な機能:
  • ペットの健康状態や体調チェックの履歴。
  • タスクの進捗表示（散歩や食事の完了状況、運動の回数など）。
  • ペットのアバターの表情や状態の確認（タスク未完了の場合、不機嫌な表情など）。

⑧ 設定画面 - 各種設定を行う画面

• 目的: アプリ全体の設定を調整し、ユーザーの好みに合わせた使いやすい環境を提供する。
• 主な機能:
  • アプリの基本設定（通知オン/オフ、音量、言語設定など）。
  • ダークモードの切り替えやフォントサイズの調整。
  • アカウント管理（ログイン・ログアウト、家族との共有設定）。

ステップ 3: 画面遷移図を描く

①画面を四角で描く

まず、リストアップした各画面（ホーム画面、タスク管理画面、リマインダー設定画面など）を四角で描き、それぞれにラベルを付けます。これにより、どの画面があるかが一目でわかります。

• ホーム画面
• タスク管理画面
• リマインダー設定画面
• アバター画面
• 振り返り画面
• 家族共有画面（高齢者向け）
• ペット管理画面（ペット向け）
• 設定画面

②各画面のつながりを矢印で示す

次に、各画面のつながりを矢印で表します。例えば、ユーザーが「ホーム画面」から「タスク管理画面」に移動できる場合、ホーム画面からタスク管理画面への矢印を描きます。これにより、ユーザーがアプリ内でどのように移動できるかが視覚化されます。

• 「ホーム画面」から「タスク管理画面」に矢印を引きます。
• 「タスク管理画面」から「リマインダー設定画面」に矢印を引きます。

③矢印に操作や条件を追加

各矢印のそばに、ユーザーが画面遷移するための操作や条件を簡単に書き加えます。これにより、どの操作で画面が遷移するかがわかりやすくなります。

• ホーム画面 → タスク管理画面：「タスク管理」ボタンをタップ
• タスク管理画面 → リマインダー設定画面：「リマインダー設定」ボタンをタップ

④画面遷移図の確認と調整

画面遷移図が完成したら、以下の点を確認して必要に応じて調整します。

• 主要な画面へのアクセスが簡単か
  • ユーザーが迷わず主要な機能にアクセスできるか確認します。例えば、「ホーム画面」から各主要画面に直接アクセスできると使いやすくなります。
• 無駄な遷移がないか
  • 画面間の移動が多すぎると操作が複雑になってしまいます。画面遷移がシンプルでわかりやすいか確認しましょう。

ステップ 4: 画面遷移の確認と調整

画面遷移図が描けたら、ユーザーストーリーに沿って、画面遷移が自然であるか確認しましょう。必要に応じて、以下のようなチェックを行います。

• 無駄な遷移がないか
  • 画面を無駄に行ったり来たりするような矢印がないか確認し、操作がスムーズに流れるようにします。
• アクセスがわかりやすいか
  • 各主要画面に簡単に戻れるよう、ホーム画面やメイン機能へのアクセスが確保されているか確認します。

ワイヤーフレーム作成

シンプルなレイアウトで画面デザインを考え、必要な要素（カレンダー表示、進捗バー、レベルアップの表示など）を配置して確認します。

①ホーム画面

+----------------------------------------+
|               ホーム画面               |
+----------------------------------------+
| タスク管理 | アバター管理 | 振り返り | 設定 |
+----------------------------------------+
| 今日のタスク進捗                        |
| [✔] タスク1 完了                       |
| [ ] タスク2 未完了                     |
|                                        |
|                                        |
|                                        |
|                   (+) タスク追加        |
+----------------------------------------+

②タスク管理画面

+----------------------------------------+
|             タスク管理画面             |
+----------------------------------------+
| < 戻る                                  |
|                                        |
| タスクリスト                           |
| ・英単語 - 毎日 ▼                     |
| ・筋トレ30分 - 平日のみ ▼             |
| ・水泳 - 特定の日付 ▼                 |
|                                        |
| 各タスクの操作                         |
| - タスク名をタップで詳細表示            |
| - 「リマインダー設定」ボタンでリマインダー設定画面へ|
|                                        |
| タスク追加 [ボタン]                    |
+----------------------------------------+

③リマインダー設定画面

+----------------------------------------+
|         リマインダー設定画面           |
+----------------------------------------+
| < 戻る                                  |
|                                        |
| タスクを選択                           |
| [ タスク1 ▼]                           |
|                                        |
| リマインダーの設定                     |
| - 通知日付 [  2024-11-20 ▼]            |
| - 通知時間 [   07:00   ▼]              |
|                                        |
| 通知メッセージ                         |
| [ カスタマイズメッセージを入力... ]    |
|                                        |
| 保存 [ボタン]                          |
+----------------------------------------+

④アバター管理画面

+----------------------------------------+
|           アバター管理画面            |
+----------------------------------------+
| < 戻る                                  |
|                                        |
| [ アバター画像 ]                        |
| レベル: 5                               |
| 職業: 戦士（※アバター作成時に選択）    |
| 性格: 遊び人（※アバター作成時に選択） |
|                                        |
| ステータス                             |
| - HP: 80                               |
| - MP: 50                               |
| - 力: 25                               |
| - 魔力: 10                              |
|                                        |
| カスタマイズ [ボタン]                  |
+----------------------------------------+

⑤振り返り画面

+----------------------------------------+
|             振り返り画面               |
+----------------------------------------+
| < 戻る                                  |
|                                        |
| 週の進捗                               |
| - 達成率: 80%       /   Level 2 UP     |
|                                        |
| 月の進捗                               |
| - 達成率: 70%       /   Level 1 DOWN   |
|                                        |
| 全ての進捗                             |
| - 達成率: 75%       /   Level 1 UP     |
|                                        |
| 初期ステータス     /   現在のステータス|
| - HP: 80           /   HP: 95          |
| - MP: 50           /   MP: 65          |
| - 力: 25           /   力: 45          |
| - 魔力: 10         /   魔力: 18        |
|                                        |
| 今週のコメント                         |
| [ 振り返りを記入... ]                   |
|                                        |
| 保存 [ボタン]                          |
+----------------------------------------+

UIデザイン

ターゲットユーザーに合ったデザインを考え、楽しさと使いやすさを両立させます。

①ホーム画面

↑Figmaを使って作成しています↑

②③④⑤も同じようにデザインすべきなのですが、①と同じようにワイヤーフレームとほぼ同じものになりそうなのでここでは割愛します。

技術選定と開発環境構築

フロントエンド・バックエンドの技術選定

色々な方法や手段がありますが、今までの学習を活かすならReactとNode.jsを使って開発を進めるのがスムーズです。

環境構築

開発環境を整え、必要なツールやフレームワークをインストールし、開発がすぐに始められるようにします。まず、VS Codeを開いたら、メニューから「ファイル」 > 「フォルダーを開く」で、作成中のアプリのフォルダーを選択し、ワークスペースとして設定します。次にメニューから「ターミナル」→「新しいターミナル」を選択します。

①Node.jsとnpmのインストール確認

以下のコードをVS Codeのターミナルにコピペして実行します。Node.jsがインストールされているか確認し、最新バージョンを使用していなければインストールします。

node -v  # Node.jsのバージョン確認
npm -v   # npmのバージョン確認

②ターミナルで新しいフォルダを作成

任意の名前を指定してください。

mkdir protask-quest
cd protask-quest

③Reactプロジェクトの作成

以下のコードもVS Codeのターミナルにコピペして実行します。create-react-appを使ってReactプロジェクトのセットアップを行います。

npx create-react-app protask-quest

※Reactプロジェクト名には小文字のみを使用する必要があります。

④プロジェクトディレクトリに移動（ディレクトリ = フォルダ）

cd protask-quest

⑤プロジェクトをVS Codeで表示

続けて以下のコードもVS Codeのターミナルに貼り付けます。プロジェクトディレクトリ内で以下のコマンドを実行して、プロジェクトをVS Codeで表示します。（ディレクトリ = フォルダ）

code .

⑤依存関係のインストール

npm install

⑥Reactプロジェクトの起動確認

開発サーバーを起動して、Reactプロジェクトが正しく動作しているか確認します。

npm start

⑦Node.jsサーバーのセットアップ（必要に応じて）

Reactとは別にバックエンドが必要な場合、Node.jsのプロジェクトをセットアップします。

# Reactプロジェクトの外で新しいフォルダを作成
mkdir backend
cd backend
npm init -y  # 新しいNode.jsプロジェクトを作成
npm install express  # Expressフレームワークのインストール

cd ..

mkdir backend

cd backend

npm init -y

npm install express

const express = require('express');
const app = express();
const PORT = 5000;  // サーバーが使用するポート番号

app.get('/', (req, res) => {
    res.send('Hello from the Node.js server!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

サーバーの起動と確認

1. ターミナルを開く

もしまだターミナルが開いていなければ、VSCodeのメニューから「ターミナル」→「新しいターミナル」をクリックして開きます。

2. サーバーを起動する

server.js ファイルがある backend フォルダにいることを確認して、以下のコマンドを実行します。

node server.js

動作確認

• サーバーが正しく起動すると、ターミナルに「Server is running on http://localhost:5000」と表示されます。
• ブラウザを開き、アドレスバーに「http://localhost:5000」と入力し、「Hello from the Node.js server!」というメッセージが表示されることを確認してください。

現状でできていること

• 基本的なサーバーの応答:
  • サーバーが起動し、クライアントからのリクエストを受けて単純なメッセージを返すことだけです。

今後の追加が必要な機能

1. データの保存や管理:
   • 現在はデータベースに接続していないため、タスクやユーザー情報などを保存することはできません。
   • 追加するには、MongoDBやFirebaseといったデータベースをセットアップし、Node.jsからそれにアクセスするコードを実装する必要があります。
2. 認証やセキュリティ:
   • ログインやユーザー認証のための仕組みがないため、ユーザーの識別やパスワードの管理ができません。
   • ユーザー認証には、例えばbcryptでパスワードの暗号化を行い、jsonwebtokenでセッション管理を実装することが考えられます。
3. ビジネスロジックの処理:
   • クライアントからリクエストされた際のデータ処理や集計といった複雑な処理がまだ行えません。
   • 例えば、タスクの進捗を管理したり、特定の条件に基づいた処理を実行するコードを追加していく必要があります。
4. リアルタイム通信:
   • 現状のサーバーではリアルタイム通信ができません。チャットや通知のようなリアルタイム通信を行うには、WebSocketやSocket.IOを使った実装が必要です。

⑧Gitでバージョン管理（任意）

1.VSCodeを開く

• デスクトップやタスクバー、またはスタートメニューからVisual Studio Code (VSCode) を開きます。

2.プロジェクトフォルダを開く

• VSCodeが開いたら、上部メニューのファイル > フォルダーを開くを選択します。
• その後、Gitで管理したいプロジェクトフォルダ（例：protask-quest3）を選択して、フォルダーの選択ボタンをクリックします。
• この操作により、VSCodeの左側の「エクスプローラー」にプロジェクトのディレクトリ構造が表示されます。

3.プロジェクトフォルダがエクスプローラーに表示されていることを確認

• 左側のエクスプローラーに、あなたのプロジェクトフォルダ（例：protask-quest3）が表示されていれば成功です。
• もし表示されていない場合は、正しいフォルダを開いたか確認してください。

4.Gitリポジトリの初期化

正しいディレクトリに移動したら、以下のコマンドをターミナルにコピペして実行します。

git init

このコマンドを実行すると、Gitリポジトリが初期化され、プロジェクトフォルダ内に.gitという隠しフォルダが作成されます。

5..gitignore ファイルを作成

• .gitignoreには、Gitで追跡しないファイルやフォルダを指定します。たとえば、以下のように設定します：
• プロジェクトフォルダ内に、.gitignoreという名前のファイルを作成します。

node_modules/
.env

6.最初のコミットを作成

ターミナルに以下のコマンドを入力し、プロジェクト内の全てのファイルをGitに追加します。

git add .

Gitに名前とメールアドレスが設定していない場合は以下のコードのように名前とアドレスを入力してVSCodeの続きにコピペしてください。

git config --global user.name "C.River"
git config --global user.email "ika.com0508@gmail.com"

そして、以下のコマンドで初回のコミットを行います。

git commit -m "Initial commit"

以上でGitの初期設定が完了です。今後、変更を加えるたびに git add や git commit コマンドを使って変更を保存できます。

git status

git add .

git commit -m "Your commit message"

Gitでバージョン管理の短い説明

A: プロジェクトのバージョン管理のため、Gitリポジトリを作成します。

# プロジェクトフォルダ内でGitリポジトリを初期化
git init

# プロジェクトのすべてのファイルを追加
git add .

# 最初のコミットを作成
git commit -m "Initial commit"

B: GitHubやGitLabにリポジトリを作成した後、リモートリポジトリを追加してプッシュします。（必要に応じて）

# リモートリポジトリを追加
git remote add origin <リモートリポジトリのURL>

# コードをリモートにプッシュ（最初のプッシュ）
git push -u origin main

プロジェクトの初期化

ここまでに行った初期化の内容

1. Node.jsとnpmの確認
   • Node.jsとnpmが正常にインストールされ、バージョンが確認されている。
2. Reactプロジェクトの作成
   • npx create-react-app todo-appを実行して、新しいReactプロジェクトtodo-appを作成。
   • プロジェクトフォルダに移動し、VS Codeで開いています。
3. Gitリポジトリの初期化（必要であれば）
   • git init、git add .、git commit -m "Initial commit" で、Gitでのバージョン管理を始める準備が整っています。
   • リモートリポジトリ（GitHubなど）を使いたい場合は、リモートの設定と初回のプッシュも完了していると理想的です。

追加の要件に応じて設定が必要になる場合

Gitリポジトリのリモート設定（必要な場合）

• リモートリポジトリ（GitHubなど）を使用してコードをバックアップしたり、共有したりする場合、git remote add origin <リポジトリURL>とgit push -u origin mainが必要です。
• これを行わなければ、リモートリポジトリに保存されず、ローカルでの管理に限られます。

必要なパッケージやライブラリの追加（プロジェクトの要件に応じて）

• 例えば、React Routerや状態管理用のReduxなど、特定の機能が必要な場合は追加でインストールします。
• 基本のReactプロジェクトにはこれらのライブラリが含まれていないため、要件に応じて追加する必要があります。

環境変数やAPIの設定

• バックエンドと連携したり、外部APIを利用したりする場合、APIキーなどの環境変数が必要になることがあります。
• .envファイルを作成して、APIキーなどを設定するのが一般的です。

他のアプリを作る際に使いまわせるもの

1. Gitの設定
   • git init や .gitignore ファイルの設定など、バージョン管理の基本的な設定は他のプロジェクトでも繰り返し利用します。特に、.gitignore ファイルで node_modules/ や .env ファイルを無視する設定は、他のNode.jsプロジェクトでもそのまま使えます。
   • git config --globalで設定したユーザー名とメールアドレスも引き継がれるため、新しいプロジェクトでもそのまま使用できます。
2. Node.jsとExpressの基本設定
   • Node.jsサーバーのセットアップ方法（npm init、npm install expressなど）は、新しいバックエンドプロジェクトでも同じ流れで利用できます。
   • 基本的な server.js ファイル（もしくは index.js）の作成方法、app.listen() や app.get() の使い方など、Expressを使ったサーバーの構築の基本コードも再利用可能です。
3. .envファイルの活用
   • セキュリティのため、機密情報（例えば、データベース接続情報やAPIキー）は .env ファイルに保存し、.gitignore で追跡から外す方法は他のアプリでも使います。
   • .env ファイルを利用するために dotenv パッケージをインストールする手順も共通で利用できます。
4. VSCodeの環境設定
   • Visual Studio Code（VSCode）の基本的な操作（フォルダを開く、ターミナルを使う、ファイルを作成するなど）は他のアプリ開発時にも役立ちます。
5. ディレクトリ構成の理解
   • フロントエンド（Reactアプリ）とバックエンド（Expressサーバー）を分けたディレクトリ構成や、src や public フォルダの使い方は、他のReact+Node.jsプロジェクトで同じ構成を採用できます。

その他の使いまわせる知識

• npmコマンドの使い方: パッケージのインストールやプロジェクトの初期化 (npm init -y) の流れは、どのNode.jsプロジェクトでも共通です。
• 環境変数の管理: 他のプロジェクトでも dotenv を使って .env ファイルで環境変数を管理するのが一般的です。

本日の感想

本来なら４０時間くらいかかるはずだった下準備が１４時間くらいで終わりました。AIの力は本当にすごいです。一人で１から全てやったら４０時間でも終わらなかったかもしれません。次回から具体的にコードを組んでいくので、難易度が上がりスピードが落ちてしまうと思いますが、１か月かかるはずだったものが１週間で終わる可能性が出てきたので少しモチベーションが回復しました。どんどんアプリを作って経験値を稼いで、お金も稼ぎたいです。

妻がちょっと不安そうなので早く少しでも稼がねば。