公開日: 2025-06-21著者: Yov in YovStudio
はじめに
プログラミングを始めたいけど、どこから手をつければいいのかわからない。
環境構築でつまずく。チュートリアルでコードを写経して終わる。
この「ありがちな最初の壁」を、AI と一緒に越えてみませんか？
AI はエラーの原因を一緒に探してくれたり、アイデアをすぐに形にしてくれたり、まるで隣にいる頼れる友人のように手助けしてくれます。うまく使えば、手を止める時間がぐっと減ります。
このシリーズでは、AI と一緒に試行錯誤しながらアプリを作る体験を共有していきます。
このシリーズの目的とスタンス
まず、このシリーズは「プログラミングの勉強をしましょう！」というシリーズではありません。
AI と一緒に自分の思い描くアプリケーションを作り上げていく様子を共有することで、「これならできそう！」とみなさんに興味を持ってもらい、新たにプログラミングを学ぶ人が増えたり、プログラミング初学者に楽しさや何かモチベーションになるものを提供できたらいいなということを目的にしたシリーズです。
完璧なコードを書くことよりも、「自分の思いが形になった」という実感を大切にしています。
なので、AI とどういうやりとりをしてどんなものができたか、できるだけ生の情報を共有することを重視しています。
コードについては基本触れないですが、うまく動かないときや工夫が必要なとき、どんな風に解決していくかという過程をお見せする時は解説も加える予定です。
今回作るもの
今回 AI と一緒に作るのは、「毎日の気分を記録できるシンプルなアプリ」です。
使用 AI：
ChatGPT（freeプラン）
※無料版を使います。
アプリ名：
MOOD TRACKER
読み方：ムードトラッカー
機能：
- 「GitHubのヒートマップカレンダー」のように気分をヒートマップで表示
- ヒートマップでは色の濃淡で気分の変化を可視化
- 日々の気分を登録
- ダークモード/ライトモードやテーマカラーの切り替え
イメージ画像：
※この画像も、ChatGPT にイメージを伝えて作ってもらいました。
使用言語：
HTML / CSS / JavaScript
データ保存場所：
ブラウザのローカルストレージ
※データは自身が使用するブラウザにだけ保存されます。
なぜこのアプリなのか
この手の入門で多いのは TODO アプリですが、以下の観点で気分を記録するアプリにしてみました。
- インストール不要・ログイン不要・すぐに動かせる
- 視覚的な面白さがあり、初学者が「作った！」と思える完成度
- データ操作も簡単で、操作することで表示に変化がある
ここからはちょっとしたおまけのような話になりますが、「自分の気分を記録する」という行為は、「今日はなんだか調子がいいな」とか「この数日ちょっとモヤモヤしてたかも」といった、自分の内側に目を向けるきっかけになります。
AI がますます身近になる時代だからこそ、「自分の感情を自分の手で残す」ことに少しだけ意味を持たせてみてもいいんじゃないでしょうか。このシリーズを読みながら、ちょっとした日々の気づきも持ち帰ってもらえるような、そんな体験も添えられたらいいなと思っています。
最初の一歩は「やってみたい」
大きな目標も、最初は小さな「やってみたい」から始まります。 AI と一緒にコードを書くというのは、その最初の一歩を、ひとりじゃなく一緒に踏み出せるということ。
AI との対話を通じて、「やってみたい」が「なんだかやれそう」に変わっていく。 そんな変化を、みなさんと一緒に感じていけたらと思います。
さっそく次回から AI と対話しながら開発に入っていきます。
余談：イメージ画像は何度か作り直しています
実は先に紹介した今回作成するアプリのイメージ画像ですが、何度か作り直しているんですよ。
はじめに生成された画像がこちらです。
いや暗いよ！気分下がっちゃうよ！
まぁこれは私の依頼の仕方が雑だったのがいけないのですが、かゆいところに手が届いていない感じのものが出来上がってくるんです。どんな依頼の仕方だったのかは雑すぎて……ここではお見せできないかも。笑
ここからヒートマップの色を鮮やかにしたり、カレンダーの順番や数を変えてもらったり、デザインをかっこよくしてもらったり、いろいろあったのです。
「イメージが伝わればいいか」ということで、細かい部分は妥協してます。 たとえば上部のダークモード/ライトモードの切り替えの部分は元々「月と太陽」のイメージのはずが、いつのまにか形の違う何かに変わっていたり。。。
こんな感じで、「AI にどう伝えるか」のちょっとしたトレーニングになっていたのでした。