【個人開発】AIと協働してtype script + Reactでタスク管理ツールを作った

表題の通りですが、type scriptとReactのキャッチアップのためにこんな感じのwebアプリを作ってみました。

https://task-timer.imarin.net/
github: https://github.com/imarin309/task-timer

デプロイした方法は以前の記事で書いた方法でAWS cloud frontを使った形です。

超雑な感想で言うと、開発するのすごい楽しかった！

僕は今までpythonのバックエンドの開発がエンジニアとしての経験のメインでした。
転職した先の会社でtype scriptとReactによるフロントエンドの開発をする機会があるのですが、それが今までのバックエンドの開発から流用できない思考を求められる気がしていて苦戦していました。

そこで、勉強がてらアプリを作ってみようと思ったのがきっかけですが、やってみると自分のやりたいようにプログラミングして形のあるアプリを作るのは楽しい。

Contents

キャッチアップをすることを目的とした実装の方法

AIツールのClaude Codeを使って開発しました。

みなさんAIツールを使ったことがあればわかると思いますが、AIツールを使うと技術の中身を理解していなくても形になるものはできてしまう。

一昔前なら便利すぎて信じられないですし、実務ではAIツールを使ってスムーズに開発しています。
一方でキャッチアップのためにAIだけを使って実装しても自分の力にならないと感じました。

で、僕は次のようにしてプロンプトを打ちました。

claude.mdに次のように書いて実装していました。
https://github.com/imarin309/task-timer/blob/main/CLAUDE.md

- コミッターのimarinはフロントエンド開発、またはReactの実装の初心者です。
- 学習のためにこのシステムを作っています。
- あなたはReactを用いたフロントエンド開発の先輩として優しく教え導いてください。

このように書くとclaudeに質問をした時も初心者向けに教えてくれるので捗った。

xxxの実装をしたい。自分で実装をするのですが指針が思い浮かばないのでヒントをください。

こんな感じでプロンプトを打っていました。

claudeに何か聞くと（おそらくもともと組み込まれているシステムプロンプトの影響で）claudeが方針を提案し実装しようします。

今回はそれをさせないようにヒントをくださいと言うふうに言って質問しました。

これはプログラミングのキャッチアップをする上では革命だなって思いました。

今まではわからないことがあれば公式ドキュメントをみたり、googleで同じようなことをしている人の記事を検索したり、teratailに質問したりなどをしていました。

でもそれらは、多くの場合は自分のニーズに一致した情報になっていなくそれを状況に合わせて理解するよう努力しなくてはなりませんでした。
teratailのように実際にネットで聞く場合は、コミュニケーションコストがかかるし相手の時間を奪ってしまう。

でもAIにメンターをしてもらうと、それらの欠点が全て解消されます。

アプリ作るのは楽しいですね。
今回作ったやつも気が向いたら拡張させたい。

ではまた( ´ ▽ ` )