背景

今働いている会社には、業務終わりにとある社内ツール上で日報を書きましょうねというようなものがあります。

特に決まったフォーマットがあるわけでは無いのですが、ざっくりと以下の形式。

• その日やったこと
  タイトルと詳細の形式で、書いて詳細の方に背景とか対応とか記載
• 明日の予定
• 雑記
  その日あったこととか気になっているものを書いてます。
  マネージャー陣の一人がしっかり書いててちょくちょく腹筋情報が流れてきます。

ただ、忙しいタイミングやタスクが多かったり差し込みがあったりすると業務終わりにはもう覚えてないということが起きがちで、その結果日報が書きづらいという事が多かったので分報を書こうとなりました。
前の会社ではSlackで times_* チャンネルを作っていたのでそこに書き出していたんですが、今の会社ではChatworkを使っています。マイチャットはメモにしてるので使い分けたいなっていうのも合わさって今回に繋がりました。

作ったもの

分報を書くためのツールとして、 Bunpost というものを作りました。
名前は分報をポストするから来ていて毎度ながら安直。

その日やったことを記録するため、タイトルと内容、やった日時を保存すると日付でまとめてくれるので、業務終わりにコピーして必要に応じて整形するだけになってだいぶ楽になりました。

技術的な部分とか

サクッと作って使いたかったので、NextjsとLocalStorageの構成です。
あくまで自分用おひとり様ツールなので、認証は不要としました。

フォーム部分

これまでフォームを作るとなったらFormikがいいやと思っていたんですが、React Hook Form が良さそうなので使ってみました。
npm に react-hooks-forms っていうs付きな名前のパッケージがあるんですがこれは別物。

今回は項目も少ないのでパフォーマンスなどはわかりませんが、書き方やデータのとり方は良いかなーという気がしました。もう少し使ってみたい。

データのマッピング

通信は無いものの、LocalStorageとのやりとりがあるためここから取り出す際にデータのマッピングを行っています。

パンダさんのブログにあった、InteractorとMapperの構成を参考にしています。

弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ

やってみるとその先も型情報がわかるので大事。

ルーティング情報を集約

プロジェクトルートにひとつだけオブジェクトをexportするファイルを作って中でパスの管理をするようにしました。

export const route = {
  root: '/',

  taskAdd: '/tasks/add',
  taskDetail: '/tasks/[date]',
}

<Link
href={{
    pathname: route.taskDetail,
    query: { date: date },
}}
>

next/link なんかで遷移先を指定する際にこんな感じで指定する想定。

これによって pages/ 以下で変更があった場合も各リンクがここで変更できるようになります。

やってみて

一応課題は解決できたのでよいかなと思ってます。

Nextjs + TypeScriptの構成は、暇ができたら触ってみてるんですがもう少しものにできてない感じがするなと思ってます。そのうち慣れるんかな