これは何

• 生産性を上げることにこだわったタスク管理ツール。
• 全てをテキストベース(Markdown)で管理することで自由度と編集しやすさを両立。
• (実現していないものも含め)仕様が200個くらいあって書き出すのが難しい
• AIに頼らなかった場所として、高速な表示を工夫している(アクセス時、説明記述時)(F12→｢パフォーマンス｣である程度見られるはず)
• Render無料枠の性能?により阿部寛のサイトより遅い(ファイルサイズは小さいのに...)

実装方針

完璧を目指すよりまず終わらせろ

―マークザッカーバーグ

の通り、開発期間が短いため必要なものから順に実装。

• 最低限、タスク、ワークスペース、リマインダーの追加、編集、削除などできるように
• タスクリストをまとめたワークスペースをサイドパネルに追いやる(あんまり使わないので)
• タスクに対してステータスや優先度を用意することでチケット的な運用も可能
• 本発表に当たってはデバッグ重視

技術的な話

フロントエンドまわり

• 表示を高速にするためにライブラリなどを遅延読み込み(読み込まれた瞬間にレンダリングして遅延を最小化)
• Markdown表示を別のスレッドに切り出すことで入力の作業を邪魔しない
• 表示関係はMathJax,marked,hljsのライブラリに委託、細かいレイアウトをcssで手動調整 (実は初期段階ではAIが文字列置換で実装しようとしていたので手動で直した)

def f(arg1):
  for i in range(10):
    print('hello world!') # Markdownパーサはmarked,ハイライトをhljsにまかせている
  return 0;
f(0)

$$ e^{i \pi}+1 =0 $$

• KISSの原則(Keep it simple, stupid!)に則り1種類の部品は1箇所でのみ定義されるようにした。 (AI生成物はページ読み込み時とタスク読み込みという別の場所で同じ部品を使っていた！)
• HTMLなどの部品とFEの処理(関数群)は別ファイルに切り出して保守性を高める

バックエンドまわり

• タイムゾーンの問題があるので、適宜タイムゾーンを取得して情報を付加(意図的にやらないとバグる)
• タスクのソーティングはバックエンドからDBへのクエリの投げ方で実装
• タスク追加時の処理は妥協

データベースまわり

• 永続化するデータはワークスペース、タスク、リマインダー(同期の問題でデータを1箇所に置きたいので手元に残す情報はほぼない)
• 特にタスク本文も文字列としてDBに格納している(ファイルに切り出してBEに任せるより全部DB管理するほうがラクだった)
• スキーマは壁打ち仙人に作らせるべきだったか...(動作だけ与えると不完全なスキーマが作られる割にスキーマはとても大事)

その他の話(実装中の試行錯誤とか学びとか)

• 工数を鑑みて実装、デバッグの一部を省いている(許容した既知のバグ:1件)
• AIに書かせると同種かつ大規模なコードを複数ヶ所に書いていて保守性が下がったので手動リファクタリング(もしかしたらモデルのせいかも?)
• faviconを作ってみて始めて拡大縮小で見え方がだいぶ違ってくるという知見を得た