こんにちは、37歳のおっさんエンジニア（？）です。
これまでCLIでコマンドバトルをしたり、じゃんけんゲームを作ったりと、プログラミングはしてきたものの「Webアプリ？ なんか難しそう…」と感じていた自分。
でも、ChatGPTとClaudeという生成AIを相棒にしたところ、「こんな機能ほしい！」→「AIに聞く」→「コード貼る」→「動いた！」を繰り返していくうちに、気づけば自分でもWebアプリが作れてしまったんです。
そんな私の初めてのWebアプリがこちらです。
👉 https://learning-log-pwa.onrender.com
📘 どんなアプリなの？
このアプリは、一言日記のように学習や作業のログを記録しつつ、時間の可視化でモチベを維持することを目的としたWebアプリです。
主な機能はこんな感じ👇
- ✅ 作業内容、開始・終了時間、感想を記録
- 📊 作業時間をグラフで可視化（累計時間・継続日数も表示）
- 🏷️ タグ機能で、タグごとの記録数や人気タグのランキング表示
- 📅 Googleカレンダーと連携して、記録内容を自動でカレンダーに転記
- 🌐 PWA対応で、スマホからでもサクッと使える！
ちょっとした作業や勉強を日記感覚で記録しておくことで、自分の積み上げが見える化され、続けるモチベーションに繋がるはずです。
🤖 AIとの開発スタイル
開発中は、**「ドラえもんを頼るのび太くん戦法」**でした（笑）
- 「○○したいな〜」と思ったらAIに相談
- AIが出力してくれたコードをそのまま実装
- 動けば次へ！動かなければエラー全文を貼って「助けて〜！」
最初は完全にお任せ状態でしたが、だんだんと知識がついてきて、
- requirements.txtが更新されてないことに気づく
- 見覚えのあるエラーが増える
- 修正方針が自分で少しずつ見えるようになる
など、**AIとの共創の中で学びも増えていきました。
特に意識してよかったのは以下の点です：
- 🔧 自分で修正できる部分（パッケージ追加、インポートなど）は修正後にAIへ共有
- 🧩 エラーを貼るときは「このあたりが怪しい？」と方向性を添える
- 🔄 AIの回答がループし始めたら、別案を自分から提案してみる
AIを「答えをくれる存在」としてではなく、一緒に考えてくれる相棒として扱うことで、どんどん開発が楽しくなっていきました。
🛠 技術スタックと構成
フロントエンド
- HTML / CSS（Bootstrap使用）
- JavaScript（最低限）
バックエンド
- Python
- Flask
- PostgreSQL
その他
- GitHubにコードを公開し、Renderでホスティング
- PWA（Progressive Web App）対応
- GoogleカレンダーAPIでログの自動転記
構成自体はシンプルながら、小さく作って育てる感覚がとても楽しかったです。
📝 制作期間と所感
仕事の合間やゲームの休憩中にちょこちょこ作っていたので、実際の制作期間はおおよそ1ヶ月ほど。
初めてのWebアプリとしては機能盛りだくさんになってしまい、
-
app.pyが激長になったり -
templatesにHTMLファイルが想定以上に増えたり - コードの可読性に課題が残ったり…
と反省点もありますが、それでも「ここまで作れるんだ！」という自信に繋がりました。
次回はもっと単機能で軽量なアプリに挑戦しつつ、コードの整理や保守性にもこだわっていきたいと思っています。
🙌 最後に
アプリは無料で使えるので、学習記録やタスク管理に興味がある方はぜひ試してみてください。
👉 https://learning-log-pwa.onrender.com
また、ChatGPTとClaudeの使い分けについても別の記事でまとめていければと思っています。
今後もゆるく開発を続けながら、何か面白いことができたらまた共有します！
ここまで読んでいただき、ありがとうございました🙇