はじめに
TRIAL&RetailAI Advent Calendar 2025 の9日目の記事です。
昨日は @mossan_hoshi さんの 「AIコーディングの極意 ~AIは〇〇と思え~」 という記事でした。
AIが全部やってくれる時代ではなく、AIと協働する時代ということで、今回のアプリ開発でもAIに支えてもらいながら進めた自分としても共感する部分が多かったです。一方で、知らない考え方や視点もたくさんあり、自分の学びにもつながる内容でした。
皆様もぜひご一読ください!
目次
- 🪂 自己紹介
- 🎟️ タスク管理アプリを作ろうと思った理由
- 🔬 使用した技術・ツール
- 🛼 Day 1~2
- 🧢 Day 3~7
- 🖇️ 感想
1. 🪂 自己紹介
初めまして、Qiita記事を書くのは初めてになります。
普段はシステム本部のプランナーとして、社内の課題解決に取り組んでいます。
非エンジニアなので、毛が生えた程度のIT知識しか持ち合わせていませんが、温かい目で読んでいただければ幸いです。
2. 🎟️ タスク管理アプリを作ろうと思った理由
非エンジニアと申し上げましたが、どれだけIT知識があるかというと、新卒で入社して少しKotlinをかじり、その後絶対に勝てない簡易じゃんけんゲーム?を作って以来、普段業務ではCopilotにクエリを書いてもらっているくらいです。
周りは自分以外エンジニア、もしくは学生時代にIT系を専攻していた人ばかりなので、何かエンジニアっぽいことしたい!という熱い気持ちは常に持っていました。
でもQiitaで記事を書くほどあっと驚くようなITハックは持ち合わせていないし...、何か披露できるようなITスキルもない...、何を書こうかと悩み出た答えが「AIに教えてもらったらアプリ作れるんじゃない?」でした。
なんならなんの先入観もなくこの試みをするのに、エンジニア未経験が最も最適解なのではないかと思い、1週間トライしてみた結果を共有させていただきたいと思います。
3. 🔬 使用した技術・ツール
- Python
- Streamlit
- Claude API(Anthropic)
- Pandas
- CSV 保存
- VS Code
🔹 Python
理由:React等などの選択肢もありましたが、学習コストが低く、初心者でも扱いやすいとのことで、「まずは何か作ってみたい」という今回の目的に最適でした。
🔹 Streamlit
理由:最速で「見える形のWebアプリ」を作れるからHTMLやCSS、JavaScriptをほとんど書かずにUIが作れるらしいので、未経験が1週間しか時間がないのにWebアプリを開発しないといけない!という時にはもってこいです。
🔹 Claude API(Anthropic)
理由:今回のAIにToDoを自動生成してもらう上で懸念していたのが、社内情報の漏洩です。ローカルを使用するのが一番安全なのですが、タスク生成の質を求めるとどうしてもクラウドなので、今回のアプリでは、APIへ渡す内容を要約用の安全な内容と自分用のメモ用に分離し、社内情報そのものに関わる部分を送信しない形にすることで、精度とセキュリティのトレードオフを最小化しました。
Geminiも選択肢としてあったのですが、管理者側にAPIキーを発行してもらわないといけないということで泣く泣く断念しました。
💡 技術選定の方針まとめ
- 短期間で形にすることを優先
- 少し手間はかかるが、社内情報の漏洩を防ぎつつ、タスク生成の質は維持
- 未経験でも開発を完走できる、シンプルで学習コストの低い構成
というのが Day1〜Day7 の開発思想です。
4. 🛼 Day 1~2
✨Day 1: 何を作るかを決める日
講師にChat GPT先生を迎え、初日が始まりました。
この日のゴールは「何を作るか決める」で、作りたいもの、持たせたい機能、どういう使い方をしていきたいか等決めました。
| 項目 | 内容 |
|---|---|
| アプリ名 | AI Task Planner |
| 一言コンセプト | 「毎日の進捗とスケジュールを入力すると、AIが“翌日のタスク”を提案してくれるアプリ」 |
使用シーンの想定
勤務開始:今日のタスクと進捗をざっくりチェック
↓
日中:アプリは開かず仕事に集中
↓
終業前10〜30分:
・今日やったことを記録
・相談事、困っていることを書く
・AIに明日のタスクを生成してもらう
UIイメージ
これは確かCanvaで作ってもらった記憶があります。
Day1 まとめ
コーディングはまだ始めず、何を作るかを決め、Day2以降の開発がスムーズに進むための、7日で作り切るための「設計図」を作りました。
✨Day 2: 開発環境をつくる&UIだけ動かす日
Day2では、機能を作り込む前に、「ブラウザでUIが表示されるところまで」 を目標に進めました。
① 環境準備
- Pythonのバージョンを確認
- VS Codeで開発フォルダを作成
- プロジェクトごとに分けるため .venv で仮想環境を作成
- pip install streamlit で必要ライブラリをインストール
② app.py の作成(UIのみ)
- プロジェクト一覧エリア
- 入力フォーム(今日やったこと / AI用の要約 / 困りごと)
- 保存ボタン / AI提案ボタン
- AI提案結果の表示スペース(まだ中身はなし)
③ アプリを起動
streamlit run app.py
おおおお!できた!
先生の指示通りにしか動いてないので自分が作ったわけではないのですが、それっぽいものを作れそうな気がして嬉しいですね。
Day2 まとめ
| 項目 | 結果 |
|---|---|
| UI表示 | ⭕ |
| ボタンが押せる | ⭕ |
| データ保存 | ❌(まだ) |
| AI連携 | ❌(まだ) |
中身はまだなく、まず画面がある状態を作りました。
Streamlitは初心者でもWebアプリの形まで一気に持っていけるので、先にUIだけでも動かすと完成イメージが掴めてモチベが上がっていいですね。
5. 🧢 Day 3~7
✨Day3:入力内容をCSVに保存できるようにした日
Day3の目標は、入力した内容をデータとして蓄積できるようにすることです。
UIが動くだけだったDay2から、ついにアプリっぽくなれるのでしょうか。
① 保存用のCSVを準備
data/progress.csv
初期構造(1行目のヘッダー)を以下に設定:
date,project,note_private,note_public,issue,ai_suggestion
② 保存処理を追加
save_clicked: が押された時に、入力内容が1行としてCSVに追記されるように実装。
CSVがなくても自動で作られるように os.makedirs("data", exist_ok=True)を使用
mode="a"で追記モードにして、毎日の記録が積み上がる形に
③ 保存後のフィードバック
保存成功時には st.success("保存しました")を表示
→ 「ちゃんと反応が返ってくる」ことで使い勝手が向上
Day 3 まとめ
| 機能 | 状態 |
|---|---|
| UI表示 | ⭕ |
| 保存処理 | ⭕(CSVへ追記できる) |
| 保存内容の読み込み表示 | ❌(Day4で対応予定) |
| AI連携 | ❌(まだ) |
Day3にて入力が残せるアプリへ進化しました。
とりあえず形にすることを優先に、後で改善するという流れで進めると挫折しにくいそうです。
楽しくなっちゃったので、本当はまだ現実ではDay2なのですが、Day4のフェーズに入っていきます。
✨Day4:保存した記録を画面に表示できるようにする
Day3で入力した内容をCSVに保存できるようになったので、Day4では保存したデータを、画面に表示して見返せる状態目指して進めました。
① CSVの読み込み
df = pd.read_csv("data/progress.csv")
※ファイルが存在しない場合に備えて os.path.exists で分岐を追加
② 進捗ログを表形式で画面に表示する
Streamlitの st.dataframe() を使い、保存済みの進捗ログを一覧表示。
新しい記録が上に来るように sort_values で日付を降順に並び替え。
③ ログがまだない場合の案内表示
保存データがない場合は、空の表ではなく
(まだ記録がありません)
とメッセージを表示してユーザーに案内。
Day 4 まとめ
| 機能 | 状態 |
|---|---|
| UI表示 | ⭕ |
| CSVへの保存 | ⭕ |
| CSVの読み込み・一覧表示 | ⭕ ← New!! |
| AI連携 | ❌(まだ) |
アプリの「AIに明日のタスクを提案してもらう」ボタンを押したら、Claude から実際にタスク候補が返ってくる状態にできました。
褒められたので調子乗ってDay5も始めます(本当はまだDay2-3です)。
✨Day 5: AIにタスクを自動生成してもらう
Day4で記録を一覧表示できるようになったので、Day5では生成AIに翌日のタスクを生成してもらい、画面に表示できる状態を目指して進めました👏
① Claude API の呼び出し処理を追加
- APIキーはコードに直書きせず、環境変数から読み込む方式に変更(セキュリティのため)
-
note_public(AIに送ってもいい要約)とissue(困っていること)をまとめてプロンプトへ送信
「明日のタスク案」を返してもらう形式でプロンプトを設計
② UIとAIの連携
- 「🤖 AIに明日のタスクを提案してもらう」ボタン押下時に API を呼び出す処理を実装
- AIから返ってきたタスク案を、画面下部の「AI提案エリア」に表示
Day5では提案の保存はまだ実施せず、表示のみ
③ 入力内容の選別について
- 日報(note_private)は外部送信せずローカル保存のみ
- AIには固有名詞・企業情報を含まない note_public を送信
Day5 まとめ
| 機能 | 状態 |
|---|---|
| UI表示 | ⭕ |
| CSVへの保存 | ⭕ |
| CSVの読み込み・一覧表示 | ⭕ |
| AIによるタスク生成 | ⭕ ← New!! |
| AI提案の保存 | ❌(まだ) |
AI連携ができたことで、入力が次の行動に変換されるアプリになり、さらにモチベが増しました!Claudeと連携するために課金もしたので出費も増えました。
Day6フェーズでは、AIが返してくれたタスクを保存して、後から見返せるようにしていきます🔥
✨Day6:AIが生成したタスクを保存して使い回せるようにする
Day5でAIからタスク案を表示できるようになったので、Day6では提案されたタスクを保存し、後から見返せる状態を目指して進めました。
① CSVに「AI提案の結果」を保存できるようにする
Day5では表示のみだった ai_suggestion を、保存ボタン押した時に進捗ログと一緒にCSVに追記できるように実装。
-
ai_suggestionが空の場合 → 空欄のまま保存 - AI提案後に保存 → その日のログにタスク案を紐付けて保存
② 「保存したAI提案」を画面で確認できるようにする
Day4で作った進捗ログの一覧に、新しい列として ai_suggestion を表示。
- タスクが生成された日のみ内容が入っている
- 改行が多くても読みやすいようにセルの折り返しを調整
③ UIの使い勝手を微調整
- 「AIに提案してもらう」→「気に入ったら保存」の流れが迷わないよう、ボタン位置・文言を整理
- 保存後はフィードバックとして
st.success("保存しました")を表示
Day6 まとめ
| 機能 | 状態 |
|---|---|
| UI表示 | ⭕ |
| CSVへの保存 | ⭕ |
| CSVの読み込み・一覧表示 | ⭕ |
| AIによるタスク生成 | ⭕ |
| AI提案の保存 | ⭕ ← New!! |
| UI改善(使いやすさ) | 🔺(軽微対応) |
AI提案を保存できるようになり、「今日の記録 → AI提案 → 明日のToDo」 というタスク管理サイクルがひと通り完成しました。
Day7(のフェーズ)ではUIの改善・カード形式での見やすさ向上を中心に仕上げていきます。
✨Day7:AIが提案したタスクをToDoリストとして管理できるようにする
Day6までで「AIが明日のタスク案を返してくれる」ところまではできたので、Day7ではAI提案をそのまま終わらせず、「タスクリストとして保存・チェック管理できる状態」 を目指して進めました。
① タスク保存用の tasks.csv を作成
進捗ログ用の progress.csv とは別に、タスク専用のCSVを新設しました。
data/tasks.csv
構造はシンプルに3項目だけ:
| date | task | is_done |
|---|---|---|
| 2025-12-04 | データ確認と修正 | False |
| 2025-12-04 | 改善箇所の洗い出し | True |
- アプリ起動時にファイルがなければ、空のCSVを自動作成
- 列は
["date", "task", "is_done"]に固定
② ClaudeのMarkdownから「タスクだけ」を抽出する関数を作成
Claudeの返すMarkdownはこのような形式なので
### 明日のタスク案
- データ確認と修正
- 新しい改善箇所の抽出
- ミーティング準備
行頭が - や • になっている行だけを拾って、
Pythonのリストに変換する関数を用意しました。
["データ確認と修正", "新しい改善箇所の抽出", "ミーティング準備"]
という形にしておくことで、1タスク = 1行としてCSVに保存しやすくしています。
③ AI提案から tasks.csv にタスクを保存
AIボタン押下時の処理を拡張して、
-
ai_result(ClaudeのMarkdownテキスト)を取得 - 上記の抽出関数でタスクだけをリストにする
- それぞれを
-
date… その日の日付 -
task… タスク名 -
is_done… 初期値False
としてtasks.csvに追記
という流れを追加しました。
これで 「AI提案 → タスクリストに自動登録」 がつながりました。
④ 「今日のタスク一覧」+チェックボックスUIを追加
画面下部に 「③ 今日のタスク一覧」 セクションを追加して、
-
tasks.csvから今日の日付のタスクだけを抽出 - 1件ずつチェックボックス付きで表示
- チェック状態が変わったものだけ
is_doneを更新してCSVに書き戻し
という形で、完了状態を画面から直接更新できるUIを作りました。
Day 7 まとめ
| 機能 | 状態 |
|---|---|
| AI提案のテキスト表示 | ⭕ |
| AI提案からタスクを抽出し、tasks.csvへ保存 | ⭕ ← New!! |
| 今日のタスク一覧の表示 | ⭕ ← New!! |
| チェックボックスで完了管理 | ⭕ ← New!! |
当初は「AI提案を表示するところまで」がゴールでしたが、実装が楽しくなってきて、チェックボックス付きのタスクリスト管理まで一気に追加しました。
これでようやく、「AIが提案してくれたタスクで毎日のToDoを回していけるアプリ」になったのではないのでしょうか。
6. 🖇️ 感想
こちら完成したWebアプリです。
限られた時間での制作だったため、1ページ構成でスクロール量の多い仕様になってしまいましたが、初心者なのでだいぶ達成感です。
当初は1週間の予定でしたが、楽しくなってしまい、気づけば3日で一気に完成させていました。
一方で、エラーが出てもすぐにAIが解決してくれる場合もあれば、原因の特定に時間がかかるものも多く、また具体的なUIイメージがあるほど理想どおりの実装が難しかったです。
改めて、AIはあくまで補助であり、最終的には自分で考える力が必要なんだなと実感しました。
今回の経験を踏まえ、今後はマイペースにUIの改善やNotion連携に挑戦してみたいなと思っています。
最後に
初めての Webアプリ開発、とても楽しかったです。
AI の力を借りれば未経験でもアプリが作れるんだと感動しつつ、まだ保守までは考えられていないので、やはり全部 AI に丸投げすれば終わり、ではないことも痛感しました。
最終的に責任を取るのは人間ですし、AIの提案をどう扱うかの知識や判断力はこれからも必要だなと感じています。
これからも AIとうまく付き合いながら、少しずつスキルを伸ばしていきたいです。
明日は@Mikeyさんの「AIと法律」という記事です。お楽しみに!
RetailAIとTRIALではエンジニアを募集しています。
興味がある方はご連絡ください!








