仕事のスピードを上げるためのタスクツール TASK CARTを作った

自作
  • 仕事のスピードを上げる秘訣は目の前の仕事だけに集中すること
  • 集中するためには、次のタスクや3時間後の報告やメールといった他の仕事を頭から追い出す
  • 安心して追い出し仕事のスピードを上げるタスクツール TASK CARTを作りました

よかったら使ってみてください。
util.mouse-apple.com

できること

タスクボード: タスクを書き出すための機能

f:id:MSitter29:20181101173556j:plain

  • 終わったタスクはチェックボックスONにして忘れる
  • ONにしたタスクは翌日には自動で消える
  • 時間がかかるタスクは約10時間以内に終えられる粒度に分割すると良い
  • 分割するとタスクボードを日々更新することができて仕事を進めている実感と安心を生み、さらに仕事に集中できる

別のプロジェクト、雑務、お客様・メンバー対応などの本作業とは違う別作業は別のタスクボードに分けると良いです。

リマインダー: タスクを思い出すための機能

f:id:MSitter29:20181101173918j:plain

  • 時間に制限のあるタスクを思い出したい日時で登録
    • 数日後にある提出期限・MTG
    • 数週間後にしなければならない宴会予約・宿泊予約
    • 定期的にしなければならない週報・月報
  • 登録した日時になると通知される

思い出したタスクはチェックボックスONする。ONになるまで定期的に通知されます。

予定と実績: 1日のタスクを記録するための機能

f:id:MSitter29:20181101174235j:plain

  • 心理的安全性を高めるための補助的な機能
    • 予定欄：予定を立てたり、可視化したい場合
    • 実績欄：タスクの実績時間を測りたい場合
    • 両方：予実管理をしたい場合
  • 予定と実績を全て埋める必要はない

複数の仕事を掛け持ちしている人は、実績欄を埋めることで仕事の割り当て時間が可視化され仕事を進めている実感と安心を持てます。

経緯

最近、若手の面倒を見る機会があり、自分のタスクは自己管理できることやリマインダで漏れを防ぐテクニックを教えることがありました。

自分も最初からすべてできていたわけではなく仕事していく中で覚え、タスクはSublimeで書き留め、10年以上使っているカレンダーアプリでリマインダし、実績はElectronで自作したアプリで記録していました。しかし、同じやり方を若手にやってもらうのはカレンダーアプリは古いし、Electronをインストールしてもらうはハードルが高い思いました。

そこで、どうせなら自分がタスク管理でやっている３つの機能を１つのWebツールにまとめれば、１つ１つバラバラであるよりは伝える方も学ぶ方も楽ができると思い作りました。

なので、若手の人に使ってもらえたり、ベテランの人が使ってみて他の人に勧めてもらえれば嬉しいです。
util.mouse-apple.com

技術

TASK CARTを作りにあたり自分にとって今までやったことがない技術的挑戦がありました。

Angular6

Angular1のころに触ったことはあるのですが、長々しい関数をいくつも実装しなくてはならずややこしい印象を持っていました。
しかし、Angular6を触った印象はReactに似ているなというもので、学習は容易でした。
むしろ、Angularコマンドでプロジェクトを作ればTypeScriptやSCSS、autoprefixなど入っていて、ちまちまnpm installしないで済むので、実装し始めるまでの時間は短かかったかもしれません。
あと、テンプレート・CSS(SCSS)がファイルとして別れているので、Reactより大規模向けだなと感じました。
Angular 日本語ドキュメンテーション

TypeScript

TASK CARTは週末の夜にチマチマ作っていたので、翌週末になればコードの勘所はほぼ忘れます。
そういった場合に、型があるのはすごく安心感は絶大でした。
データ構造を変える場合の影響範囲が一発でビルドエラーとして出てくるので変更漏れの心配がありません。そのため思いついたことを色々試すことができました。
あと、なんとなくで使ったので不正確かもしれませんが、全部の変数に型を指定しなくてもビルドは通るし動きます。なので、型があるので窮屈だ！ということもなく、ある程度ゆるく使えました。
TypeScript: JavaScript With Syntax For Types.

Angular Material

今回はそんなに多くのコンポーネントを使うことはありませんでしたが、使ったことがあるReactのMaterialUIと比べて不足感や不便さは特にありませんでした。
公式サイトのドキュメントとサンプルがしっかりしているので、ほぼ公式サイトだけ見ればこと足りました。
Angular Material UI component library

@ngrx/store

Angular版Redux的存在。ActionがあってReducerがあるのでReduxと同じ感覚で使えました。
GitHub - ngrx/store: RxJS powered state management for Angular applications, inspired by Redux

CSS grid

IE11では動かないので仕事ではまだ使えませんが、お試しでカレンダーに使ってみました。
普通にdivで組むと週ごとに段組みするレイアウトになりますが、CSS gridなら31日分の要素を並べるだけなのでとても楽でした。カレンダーとの相性は抜群です。
今後も積極的に使っていきたいと思いました。
CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN