計画がすぐ破綻する人のためのTodoリストアプリを作ってみた（前編・アプリ紹介）【PHP, JavaScript】

今回は、プログラミング初心者の私が初めて１からPHP・JavaScriptで作った``TodoリストのWebアプリ``を紹介したいと思います。

#アプリ概要
**``計画が上手く立てられるようになるTodoリストアプリ``**を作りました。
**計画を立てても全然予定通りにいかない**、という人におすすめです。

・**GitHubのリポジトリ：**　https://github.com/Sparrow42/TodoList
![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/dbdcdf19-43c7-4c75-2095-f59206df833c.png)

#アプリの使い方
##Todoの新規登録
まず、**今日１日で行うTodoをリストアップ**しましょう。下の画像は新規登録画面となります。``タイトル``、``詳細``、``重要度``、``推定所要時間``の４つを入力して、新しいTodoを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/d2dc0aa5-99aa-dfa6-94b0-05c396d309bd.png)

##Todoの一覧表示画面へ
Todoの一覧があるトップメニューに移ります。下のテーブルは``未達成項目``、上のテーブルは``達成済み項目``が表示されます。
下部には``メモ機能とそのアーカイブ``が付いています。作業中にTodoとして書けないタスクがあった際に自由に書けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/637bbef5-d642-5028-eae8-433f71e4c37f.png)

##作業順の設定
``優先順位``の列のプルダウンを操作して**作業順を決めます。**決めたら上の``更新``ボタンを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/369d66e7-bfac-be47-21cc-0fbeaf8e934c.png)
ちなみに、次の画像のように項目の``編集``や``削除``もでき、**行ごとに編集モードに切り替わります。**（画面遷移なしで行ごとにできるようにしたのはこだわりました。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/dd71e884-dbd8-26ff-f28d-c6e2c8e844ec.png)
削除もアラートをつけています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/2c4ae559-2cf8-2039-be08-f2034178a86b.png)

##作業開始
作業順が決まったら、**``作業開始``ボタンを押して作業を開始しましょう。**すると、``開始日時``と``終了予定日時``の列に自動で時間がつきます。現在時刻と推定所要時間から終了予定日時を算出しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/c0cb6734-220d-7acd-27b4-b2c7dc1ea318.png)

##作業終了
作業が終わったら、**``作業終了``ボタンを押しましょう。**すると、上の``達成済みテーブル``に移ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/3a6479be-b884-6466-c490-b260a9eb8016.png)

##作業時間の振り返り
達成済みテーブルには、``終了時間``の列が増えています。``終了予定日時``との差から、**どれくらい想定と違ったかが分かり**、次回の計画立てに役立てることができます。
「歯医者の予約」は**７分オーバー**してしまいました。ネット予約に思ったより手間取ってしまいました。**今度からは手間取ることを想定して、長めに時間を取っておくようにしようと思います。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/dd7d2ccb-157a-77eb-8dcf-a631d3841570.png)


#なぜ作ったのか
普段勉強をしているとき、``「１作業にどれくらい時間をかけているか」``を気にしていますか？
例えば、「１レポート書くのに何時間かかるか？」「テキスト〇ページ進めるのにどれくらいかかるか？」といった話です。
私自身、こういった時間管理がとても苦手です。昔は、**とりあえず頑張ってやればなんとか終わるでしょ！**という感じで、どれくらいで終わるかなんて気にせず作業していました。（今も直っているかは微妙です。。）
![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/474a0e7b-4e6d-1017-a196-dc769b6d4083.png)
そこでよく起こっていた問題として、**予定していた作業が全然終わらない**という問題がありました。「３つの作業をすべて終わらせよう！」と意気込んで始めたものの、終わった頃には**１つしか終わってない**という絶望的な状況がよく起こりました。
それに対して、何が原因で想定した時間よりも長引いてしまっているのかを検証するため、**どの程度想定と乖離があるのかを把握する必要がある**と考えました。

そこで、計画の立て方の問題点を洗い出すために、このアプリを作りました。

![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/4fb447d5-caf9-3dcc-66da-5f80290515a8.png)

#使用した技術
今回の裏テーマとして、**長期インターンで学んだ技術を使って自由に開発する**というテーマがありました。ですので、今回はそこで使っていた言語（下のスライド参照）を使いました。
（長期インターンではフレームワークに触れる機会があまりなく、モダンな技術に触れられなかったのが心残りです。。この辺りの話は長期インターンの記事で書きます。）
#![スライド6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/b31a5f35-3927-d408-41c2-072a4bf8208b.png)

#開発期間
**約１カ月**です。ただ、使いながらいじったのを含めればもっとあります。また、自分用アプリで見せるつもりがなかったので、~~見た目は手抜きです~~機能性重視となっております。
![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/1dbb9fa3-b5c3-b717-0e98-d5e6e0d36f7e.png)

#おわりに
最後まで読んでいただき、ありがとうございました！　

アプリ紹介の前編は以上です。初めての制作物紹介となりましたが、少しでも興味を持っていただければ幸いです。刺激になったと思ったら、**LGTM＆フォローをお願いします。モチベが上がります！**

本記事の後編では、``工夫したこと、学んだこと、展望、初心者の個人開発のすゝめ``等を書く予定です。私が本当に伝えたい話は後編にあります。
後編は、主に**プログラミング初心者やバイト先の高校生**に向けた記事となります。２週間以内に上げる予定です。

本当だったら公開して触れられる状態にしたかったのですが、あいにく勉強不足でできていません。Herokuを今度使ってみたいです。